/* =============================================================================
   SECURECOMMERCE - Product theme layer
   Sits on top of os-foundations.css. Inherits ALL corporate structure
   (type, space, shape, gray/ink, shadows, components) and overrides ONLY the
   brand hue: corporate blue → SecureCommerce violet. Adds product tokens.

   Product: security & firewall protection for online shops.
   Operator: Online Solution 360 GmbH.
   ========================================================================== */

:root {

  /* --- SecureCommerce violet ramp (product identity) ---------------------- */
  --sc-violet-50:  #F5EEFE;
  --sc-violet-100: #EADCFD;
  --sc-violet-200: #D6B8FB;
  --sc-violet-300: #BC8DF6;
  --sc-violet-400: #9E5CEF;
  --sc-violet-500: #8A2BE6;   /* bright accent */
  --sc-violet-600: #7A00DF;   /* ▲ SECURECOMMERCE BRAND VIOLET (logo) */
  --sc-violet-700: #6200B4;   /* interactive - text/links on white (AA) */
  --sc-violet-800: #4B008A;   /* hover / pressed / deep accent */
  --sc-violet-900: #320060;   /* deepest, on-dark structure */

  /* --- "Secure" cyber accent (used sparingly: highlights, gradients) ------ */
  --sc-cyan-400: #22D3EE;
  --sc-cyan-500: #06B6D4;
  --sc-secure:   var(--sc-cyan-500);

  /* --- Remap the corporate brand aliases to the product hue --------------- */
  --os-brand:             var(--sc-violet-600);
  --os-brand-interactive: var(--sc-violet-700);
  --os-brand-deep:        var(--sc-violet-800);
  --os-brand-bright:      var(--sc-violet-500);
  --os-link:              var(--sc-violet-700);
  --os-info:              var(--sc-violet-600);

  /* --- Product signature gradient (echoes the legacy purple, cleaned up) -- */
  --sc-gradient: linear-gradient(135deg, var(--sc-violet-600) 0%, var(--sc-violet-800) 55%, var(--sc-cyan-500) 130%);
  --sc-gradient-soft: linear-gradient(135deg, var(--sc-violet-50) 0%, #EAF7FB 100%);

  /* --- Focus ring in product violet --------------------------------------- */
  --sc-focus-ring: 0 0 0 3px rgba(122, 0, 223, 0.28);
}

/* Retune corporate primitives that referenced the old blue washes/rings */
.os-btn--secondary:hover { background: var(--sc-violet-50); }
.os-input:focus { border-color: var(--sc-violet-600); box-shadow: var(--sc-focus-ring); }

/* Consistent keyboard focus across the product */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline: none; box-shadow: var(--sc-focus-ring); border-radius: var(--os-radius-sm); }