/* ============================================================================
   EqualWeb Design System — Design Tokens
   The single source of truth. Everything else references var(--ew-*) only.

   Brand DNA (sampled from the official logo): black + electric teal #00C0A8.
   Positioning: "The Hybrid Accessibility Platform" — premium enterprise SaaS.

   Accessibility note: every text/surface pairing below is chosen to meet
   WCAG 2.1 AA. Bright teal (--ew-teal-500) is LIGHT, so it is used for accents
   on dark surfaces and for fills that carry DARK text. For teal text/links on
   light surfaces, use --ew-teal-700 (AA on white). See README "Contrast map".
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     1. COLOR — primitives (raw palette, do not use directly in components;
        prefer the semantic aliases in section 2)
     --------------------------------------------------------------------- */

  /* Teal — the signature brand ramp (anchor 500 = logo #00C0A8) */
  --ew-teal-50:  #e6fbf6;
  --ew-teal-100: #c3f5ea;
  --ew-teal-200: #8eebd8;
  --ew-teal-300: #4fdcc1;
  --ew-teal-400: #18cdad;
  --ew-teal-500: #00c0a8;   /* BRAND anchor — sampled from logo */
  --ew-teal-600: #00a08c;
  --ew-teal-700: #0e7c6b;   /* AA text on white (~5.0:1) */
  --ew-teal-800: #0b6053;
  --ew-teal-900: #0a4a41;
  --ew-teal-glow: #2ee6c2;  /* brighter highlight for glows on dark */

  /* Ink / neutral ramp (cool near-black → white) */
  --ew-ink-950: #070b10;    /* darkest hero surface */
  --ew-ink-900: #0a0e12;    /* primary text / black */
  --ew-ink-800: #11161d;
  --ew-ink-700: #1c232c;
  --ew-ink-600: #2b3440;
  --ew-slate-500: #475569;  /* AA muted text on white (~8:1) */
  --ew-slate-400: #64748b;  /* large/secondary text only (~4.6:1) */
  --ew-slate-300: #94a3b8;
  --ew-line-200: #e4e8ee;   /* borders / dividers */
  --ew-line-100: #eef1f5;
  --ew-surface-50: #f6f8fa; /* app/section background */
  --ew-white: #ffffff;

  /* Semantic status primitives.
     -600 = fills / borders (on white or as solid).
     -700 = TEXT on the matching -100 tint (all clear AA ≥4.5:1). */
  --ew-green-600: #0e9f6e;
  --ew-green-700: #047857;   /* text on green-100 ≈ 4.8:1 */
  --ew-green-100: #d8f6e9;
  --ew-amber-600: #b45309;
  --ew-amber-700: #92400e;   /* text on amber-100 ≈ 6.1:1 */
  --ew-amber-100: #fdecc8;
  --ew-red-600:   #d8312b;
  --ew-red-700:   #b91c1c;   /* text on red-100 ≈ 5.3:1 */
  --ew-red-100:   #fde2e1;
  --ew-blue-600:  #2563eb;
  --ew-blue-700:  #1d4ed8;   /* text on blue-100 ≈ 5.4:1 */
  --ew-blue-100:  #dbe7ff;

  /* ---------------------------------------------------------------------
     2. COLOR — semantic aliases (USE THESE in components)
     --------------------------------------------------------------------- */

  /* Brand */
  --ew-color-brand:        var(--ew-teal-500);
  --ew-color-brand-strong: var(--ew-teal-600);
  --ew-color-brand-text:   var(--ew-teal-700); /* teal that is AA on white */

  /* Text */
  --ew-color-text:          var(--ew-ink-900);
  --ew-color-text-muted:    var(--ew-slate-500);
  --ew-color-text-subtle:   var(--ew-slate-400);
  --ew-color-text-inverse:  var(--ew-white);
  --ew-color-link:          var(--ew-teal-700);
  --ew-color-link-hover:    var(--ew-teal-800);

  /* Surfaces */
  --ew-color-bg:            var(--ew-white);
  --ew-color-bg-subtle:     var(--ew-surface-50);
  --ew-color-bg-inverse:    var(--ew-ink-950);
  --ew-color-surface:       var(--ew-white);
  --ew-color-surface-raised:var(--ew-white);

  /* Borders */
  --ew-color-border:        var(--ew-line-200);
  --ew-color-border-strong: var(--ew-slate-300);
  --ew-color-field-border:  var(--ew-slate-400); /* form controls: ≥3:1 (1.4.11) */

  /* Interactive — primary action (Request a Demo): bright teal + ink text */
  --ew-color-action:        var(--ew-teal-500);
  --ew-color-action-hover:  var(--ew-teal-600);
  --ew-color-action-text:   var(--ew-ink-900);  /* ink on teal ≈ 9:1 */

  /* Interactive — solid ink action (alt primary) */
  --ew-color-action-ink:        var(--ew-ink-900);
  --ew-color-action-ink-hover:  var(--ew-ink-700);
  --ew-color-action-ink-text:   var(--ew-white);

  /* Focus — must be ≥3:1 against its background (AA 2.4.11) */
  --ew-color-focus:         var(--ew-teal-700);

  /* Status */
  --ew-color-success:     var(--ew-green-600);
  --ew-color-success-bg:  var(--ew-green-100);
  --ew-color-warning:     var(--ew-amber-600);
  --ew-color-warning-bg:  var(--ew-amber-100);
  --ew-color-danger:      var(--ew-red-600);
  --ew-color-danger-bg:   var(--ew-red-100);
  --ew-color-info:        var(--ew-blue-600);
  --ew-color-info-bg:     var(--ew-blue-100);

  /* ---------------------------------------------------------------------
     3. TYPOGRAPHY
     --------------------------------------------------------------------- */
  --ew-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Arial, sans-serif;
  --ew-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, Arial, sans-serif;
  --ew-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (rem, 1rem = 16px) — fluid where it matters */
  --ew-text-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); /* hero */
  --ew-text-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  --ew-text-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --ew-text-h3: 1.5rem;
  --ew-text-h4: 1.25rem;
  --ew-text-h5: 1.0625rem;
  --ew-text-body-lg: 1.125rem;
  --ew-text-body: 1rem;
  --ew-text-sm: 0.875rem;
  --ew-text-xs: 0.75rem;

  /* Weights */
  --ew-weight-regular: 400;
  --ew-weight-medium: 500;
  --ew-weight-semibold: 600;
  --ew-weight-bold: 700;
  --ew-weight-extrabold: 800;

  /* Line heights */
  --ew-leading-tight: 1.1;
  --ew-leading-snug: 1.25;
  --ew-leading-normal: 1.5;
  --ew-leading-relaxed: 1.7;

  /* Letter spacing */
  --ew-tracking-tight: -0.02em;
  --ew-tracking-snug: -0.01em;
  --ew-tracking-normal: 0;
  --ew-tracking-wide: 0.08em;   /* eyebrows / overlines */

  /* ---------------------------------------------------------------------
     4. SPACING (4px base)
     --------------------------------------------------------------------- */
  --ew-space-0: 0;
  --ew-space-1: 0.25rem;  /* 4 */
  --ew-space-2: 0.5rem;   /* 8 */
  --ew-space-3: 0.75rem;  /* 12 */
  --ew-space-4: 1rem;     /* 16 */
  --ew-space-5: 1.5rem;   /* 24 */
  --ew-space-6: 2rem;     /* 32 */
  --ew-space-7: 3rem;     /* 48 */
  --ew-space-8: 4rem;     /* 64 */
  --ew-space-9: 6rem;     /* 96 */
  --ew-space-10: 8rem;    /* 128 */

  /* ---------------------------------------------------------------------
     5. RADIUS
     --------------------------------------------------------------------- */
  --ew-radius-xs: 6px;
  --ew-radius-sm: 8px;
  --ew-radius-md: 12px;
  --ew-radius-lg: 16px;
  --ew-radius-xl: 24px;
  --ew-radius-2xl: 32px;
  --ew-radius-pill: 999px;

  /* ---------------------------------------------------------------------
     6. ELEVATION (soft, layered, premium) + teal glow
     --------------------------------------------------------------------- */
  --ew-shadow-xs: 0 1px 2px rgba(10, 14, 18, 0.06);
  --ew-shadow-sm: 0 2px 8px rgba(10, 14, 18, 0.06), 0 1px 2px rgba(10, 14, 18, 0.04);
  --ew-shadow-md: 0 8px 24px -8px rgba(10, 14, 18, 0.14), 0 2px 6px rgba(10, 14, 18, 0.05);
  --ew-shadow-lg: 0 24px 56px -20px rgba(10, 14, 18, 0.22), 0 6px 16px -8px rgba(10, 14, 18, 0.10);
  --ew-shadow-xl: 0 40px 90px -28px rgba(10, 14, 18, 0.32);
  --ew-glow-teal: 0 0 0 1px rgba(0, 192, 168, 0.30), 0 18px 60px -16px rgba(0, 192, 168, 0.45);

  /* ---------------------------------------------------------------------
     7. BORDERS
     --------------------------------------------------------------------- */
  --ew-border-width: 1px;
  --ew-border-width-strong: 2px;
  --ew-border: var(--ew-border-width) solid var(--ew-color-border);

  /* ---------------------------------------------------------------------
     8. Z-INDEX
     --------------------------------------------------------------------- */
  --ew-z-base: 0;
  --ew-z-raised: 10;
  --ew-z-sticky: 100;
  --ew-z-header: 200;
  --ew-z-overlay: 900;
  --ew-z-modal: 1000;
  --ew-z-widget: 1100;
  --ew-z-toast: 1200;

  /* ---------------------------------------------------------------------
     9. MOTION
     --------------------------------------------------------------------- */
  --ew-duration-fast: 120ms;
  --ew-duration-base: 200ms;
  --ew-duration-slow: 320ms;
  --ew-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ew-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ew-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------------------------------------------------------------------
     10. LAYOUT
     --------------------------------------------------------------------- */
  --ew-container: 1200px;
  --ew-container-wide: 1320px;
  --ew-container-narrow: 760px;
  --ew-tap-target: 44px;   /* WCAG 2.5.5 minimum touch target */
}

/* ============================================================================
   DARK THEME — apply via <html data-theme="dark"> or .ew-on-dark on a section.
   On dark surfaces, teal can be used directly as text/accent (high contrast),
   and the focus color switches to the bright glow teal.
   ============================================================================ */
:root[data-theme="dark"],
.ew-on-dark {
  --ew-color-text:          var(--ew-white);
  --ew-color-text-muted:    #aeb9c6;   /* AA on ink-950 */
  --ew-color-text-subtle:   #8a97a6;
  --ew-color-text-inverse:  var(--ew-ink-900);
  --ew-color-link:          var(--ew-teal-glow);
  --ew-color-link-hover:    var(--ew-teal-300);
  --ew-color-brand-text:    var(--ew-teal-glow);

  --ew-color-bg:            var(--ew-ink-950);
  --ew-color-bg-subtle:     var(--ew-ink-900);
  --ew-color-bg-inverse:    var(--ew-white);
  --ew-color-surface:       var(--ew-ink-800);
  --ew-color-surface-raised:var(--ew-ink-700);

  --ew-color-border:        rgba(255, 255, 255, 0.12);
  --ew-color-border-strong: rgba(255, 255, 255, 0.28);
  --ew-color-field-border:  rgba(255, 255, 255, 0.42);

  --ew-color-focus:         var(--ew-teal-glow);

  --ew-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --ew-shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, 0.6);
}

/* Reduced motion — honor the user's OS setting globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ew-duration-fast: 0ms;
    --ew-duration-base: 0ms;
    --ew-duration-slow: 0ms;
  }
}