/* ============================================================
   MUXA Design System tokens, v2 (Direction 2, May 13)
   Mirrors design-system/tokens.json. Update there first.
   ============================================================ */

:root {
  /* ---------- Core color primitives ---------- */
  --color-red:        #F9202D;  /* Brand red. Mark, AI signal fills, body text on ink only. */
  --color-red-deep:   #C8161D;  /* AA-safe red text on light surfaces. */
  --color-teal:       #005F65;  /* Brand teal. Structural, supportive editorial weight. */
  --color-teal-light: #A5D2D5;  /* Round mark border only, not a general accent. */
  --color-sodium:     #F4A300;  /* Voltage accent. Decorative on light, text-eligible on dark. */
  --color-ink:        #141414;
  --color-steel:      #2A2D32;  /* Secondary dark. Red text NOT permitted here. */
  --color-paper:      #E8F0EF;  /* Direction 2, pale teal mist (was #F4F0E8 warm cream). */
  --color-bone:       #F4F8F7;  /* Direction 2, lighter teal mist (was #FAFAF6). */
  --color-slate:      #3F4D5E;
  --color-mid:        #9AA0A6;  /* Dark mode only, fails contrast on light. */
  --color-line-paper: #C8D8D6;  /* Direction 2, cool teal-grey line (was #DCD8CD beige). */
  --color-line-ink:   #2A2D32;

  /* ---------- Typography families ---------- */
  --font-serif: "Fraunces", "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:  "General Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---------- Font sizes (web scale, smaller than 1200px artboard) ---------- */
  --fs-display: clamp(56px, 9.5vw, 144px);
  --fs-h1:      clamp(40px, 5.6vw, 84px);
  --fs-h2:      clamp(32px, 4.6vw, 64px);
  --fs-h3:      clamp(24px, 2.6vw, 40px);
  --fs-h4:      clamp(20px, 1.8vw, 28px);
  --fs-body-lg: 22px;
  --fs-body:    18px;
  --fs-small:   14px;
  --fs-caption: 11px;
  --fs-stat:    clamp(64px, 8vw, 144px);
  --fs-cta:     16px;
  --fs-cta-lg:  18px;

  /* ---------- Line heights ---------- */
  --lh-tight:    1;
  --lh-headline: 1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;
  --lh-loose:    1.6;

  /* ---------- Letter spacing (Direction 2, opened up) ---------- */
  --ls-display: -0.008em;
  --ls-tight:   -0.005em;
  --ls-snug:    -0.003em;
  --ls-neutral: 0;
  --ls-kicker:  0.08em;
  --ls-wide:    0.1em;
  --ls-word:    0.06em;

  /* ---------- Spacing scale ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 96px;
  --sp-11: 128px;

  /* ---------- Borders ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-6: 6px;     /* Sodium underline thickness. */
  --r-none: 0;
  --r-pill: 9999px;

  /* ---------- Motion ---------- */
  --dur-underline: 1400ms;
  --dur-pulse:     1600ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Layout ---------- */
  --wrap-max: 1320px;
  --wrap-pad: 56px;
}

/* ============================================================
   Light theme (default surface mode)
   Editorial and marketing surfaces lean paper.
   ============================================================ */
:root,
:root[data-theme="light"] {
  --surface-primary:   var(--color-paper);
  --surface-secondary: var(--color-bone);
  --surface-border:    var(--color-line-paper);

  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-slate);
  --text-muted:        var(--color-slate);
  --text-emphasis:     var(--color-red-deep);   /* AA-safe red on paper. */
  --text-positive:     var(--color-teal);
  --text-inverse:      var(--color-bone);

  --accent-voltage:    var(--color-sodium);     /* Decorative only. */

  --fill-brand:        var(--color-red);
  --fill-surface:      var(--color-red);        /* CTA pills, bottleneck blocks. */
  --fill-on-brand:     var(--color-bone);       /* Bold bone text on red, 20px min. */
}

/* ============================================================
   Dark theme
   Technical and product surfaces lean ink.
   ============================================================ */
:root[data-theme="dark"] {
  --surface-primary:   var(--color-ink);
  --surface-secondary: var(--color-steel);
  --surface-border:    var(--color-line-ink);

  --text-primary:      var(--color-bone);
  --text-secondary:    var(--color-mid);
  --text-muted:        var(--color-mid);
  --text-emphasis:     var(--color-red);        /* Brand red on ink only. AA-body. */
  --text-positive:     var(--color-sodium);     /* Sodium is text-eligible on dark. */
  --text-inverse:      var(--color-ink);

  --accent-voltage:    var(--color-sodium);

  --fill-brand:        var(--color-red);
  --fill-surface:      var(--color-red);
  --fill-on-brand:     var(--color-bone);
}

/* Respect OS preference unless user has set explicit override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-primary:   var(--color-ink);
    --surface-secondary: var(--color-steel);
    --surface-border:    var(--color-line-ink);

    --text-primary:      var(--color-bone);
    --text-secondary:    var(--color-mid);
    --text-muted:        var(--color-mid);
    --text-emphasis:     var(--color-red);
    --text-positive:     var(--color-sodium);
    --text-inverse:      var(--color-ink);

    --accent-voltage:    var(--color-sodium);

    --fill-brand:        var(--color-red);
    --fill-surface:      var(--color-red);
    --fill-on-brand:     var(--color-bone);
  }
}