/*!
 * css/_variables.css · v2
 * SINGLE SOURCE OF TRUTH · Phase 1 typography unification
 *
 * Built from the actual usage data in your 53 existing CSS files:
 *   - 384 unique font-size values → consolidated to 10
 *   - 9 different font-family aliases → all mapped to 3 canonical
 *   - Dominant heading patterns kept (so visual output is preserved)
 */

:root {

  /* ═══════════════════════════════════════════════════════════
     FONT FAMILIES · 3 CANONICAL · all legacy aliases below
     ═══════════════════════════════════════════════════════════ */

  --ff-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ff-mono:    'DM Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', ui-monospace, monospace;

  /* ── Legacy alias map · keeps existing CSS working without edits ── */
  --fm:         var(--ff-mono);       /* 256 files use this */
  --ff-d:       var(--ff-display);    /* 61 files */
  --ff-m:       var(--ff-mono);       /* 54 files */
  --ff:         var(--ff-mono);       /* 58 files */
  --ff1:        var(--ff-display);    /* 13 files */
  --ff3:        var(--ff-mono);       /* 14 files */
  --ff-mono2:   var(--ff-mono);       /* 18 files */

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY SCALE · 10 sizes total · all derived from 16px base
     ═══════════════════════════════════════════════════════════ */

  /* Body / UI text sizes */
  --fs-10:      0.625rem;    /* 10px · legal/footnote */
  --fs-11:      0.6875rem;   /* 11px · micro labels */
  --fs-12:      0.75rem;     /* 12px · small UI */
  --fs-13:      0.8125rem;   /* 13px · body small */
  --fs-14:      0.875rem;    /* 14px · default UI */
  --fs-15:      0.9375rem;   /* 15px · alt body */
  --fs-16:      1rem;        /* 16px · body base */
  --fs-18:      1.125rem;    /* 18px · large body / lead */
  --fs-20:      1.25rem;     /* 20px · small heading */
  --fs-22:      1.375rem;    /* 22px · card heading */
  --fs-24:      1.5rem;      /* 24px · sub-section */
  --fs-28:      1.75rem;     /* 28px · sub-hero */
  --fs-32:      2rem;        /* 32px · large heading */
  --fs-36:      2.25rem;     /* 36px · h2 desktop */
  --fs-44:      2.75rem;     /* 44px · h1 mid */
  --fs-52:      3.25rem;     /* 52px · h1 large */
  --fs-60:      3.75rem;     /* 60px · h1 max */

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE HEADING SCALE · matches your actual design patterns
     · Tuned so headings fit ONE LINE in typical containers
     ═══════════════════════════════════════════════════════════ */

  /* H1 · hero · full width container */
  --h1:         clamp(30px, 5vw, 60px);

  /* H2 · section heading · full width or 8/12 container */
  --h2:         clamp(24px, 3.8vw, 46px);

  /* H3 · subsection · 6/12 container */
  --h3:         clamp(22px, 3vw, 36px);

  /* H4 · card heading · 4/12 container · fits ONE line */
  --h4:         clamp(18px, 2vw, 24px);

  /* H5 · card heading · 3/12 or smaller · fits ONE line */
  --h5:         clamp(16px, 1.5vw, 20px);

  /* H6 · micro card heading · used in nested card grids · NORMAL case */
  --h6:         clamp(13px, 1.5vw, 17px);

  /* ── Col-context overrides · use when default H-tag size is too big ── */
  /* These guarantee single-line fit in tight columns */
  --h-col-12:   clamp(28px, 4vw, 44px);     /* full-width container */
  --h-col-8:    clamp(24px, 3vw, 36px);     /* 2/3 width */
  --h-col-6:    clamp(20px, 2.5vw, 28px);   /* 1/2 width */
  --h-col-4:    clamp(18px, 2vw, 22px);     /* 1/3 width · 4-col grid */
  --h-col-3:    clamp(16px, 1.5vw, 20px);   /* 1/4 width · 4-col grid */
  --h-col-2:    clamp(14px, 1.2vw, 16px);   /* 1/6 width · 6-col grid */

  /* ── Legacy alias map · for old --body-sm, --overline patterns ── */
  --body:       var(--fs-16);
  --body-sm:    var(--fs-14);
  --overline:   var(--fs-11);

  /* ═══════════════════════════════════════════════════════════
     LINE-HEIGHT · pick by context
     ═══════════════════════════════════════════════════════════ */

  --lh-tight:   1.1;    /* headings */
  --lh-snug:    1.25;   /* sub-headings */
  --lh-base:    1.5;    /* UI text */
  --lh-relaxed: 1.65;   /* body prose */
  --lh-loose:   1.8;    /* generous spacing */

  /* ═══════════════════════════════════════════════════════════
     LETTER-SPACING
     ═══════════════════════════════════════════════════════════ */

  --ls-tight:   -0.03em;
  --ls-snug:    -0.02em;
  --ls-base:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-x-wide:  0.12em;    /* overlines */

  /* ═══════════════════════════════════════════════════════════
     BRAND COLORS · single source · keeps backward-compat aliases
     ═══════════════════════════════════════════════════════════ */

  /* Canonical (use these going forward) */
  --c-ink:      #0a0f1e;
  --c-ink-2:    #475569;
  --c-ink-3:    #5a6a8a;
  --c-ink-90:   rgba(10, 15, 30, .9);
  --c-ink-60:   rgba(10, 15, 30, .6);
  --c-ink-30:   rgba(10, 15, 30, .3);
  --c-ink-08:   rgba(10, 15, 30, .08);
  --c-ink-04:   rgba(10, 15, 30, .04);

  --c-signal:   #06d69e;
  --c-signal-d: #008850;   /* WCAG-AA accessible · use for text on white */
  --c-signal-80:rgba(6, 214, 160, .8);
  --c-signal-20:rgba(6, 214, 160, .2);
  --c-signal-08:rgba(6, 214, 160, .08);

  --c-pulse:    #2341c4;
  --c-pulse-20: rgba(67, 97, 238, .2);
  --c-pulse-08: rgba(67, 97, 238, .08);

  --c-warm:     #f0a017;
  --c-warm-d:   #b26200;   /* WCAG-AA accessible · use for text on white */
  --c-fail:     #e74c3c;
  --c-fail-d:   #d73c2c;   /* WCAG-AA accessible · use for text on white */
  --c-pass:     #06d69e;

  --c-white:    #ffffff;
  --c-surface:  #f6f9ff;
  --c-border:   #e8edf8;
  --c-border-mid: rgba(232, 237, 248, .7);

  /* Legacy alias map · matches existing CSS variable names */
  --ink:        var(--c-ink);
  --ink-90:     var(--c-ink-90);
  --ink-60:     var(--c-ink-60);
  --ink-30:     var(--c-ink-30);
  --ink-08:     var(--c-ink-08);
  --ink-04:     var(--c-ink-04);
  --signal:     var(--c-signal);
  --signal-80:  var(--c-signal-80);
  --signal-20:  var(--c-signal-20);
  --signal-08:  var(--c-signal-08);
  --pulse:      var(--c-pulse);
  --pulse-20:   var(--c-pulse-20);
  --pulse-08:   var(--c-pulse-08);
  --warm:       var(--c-warm);
  --white:      var(--c-white);
  --surface:    var(--c-surface);
  --border:     var(--c-border);
  --border-mid: var(--c-border-mid);
  --muted:      var(--c-ink-3);

  /* ═══════════════════════════════════════════════════════════
     SPACING · 8-pt grid
     ═══════════════════════════════════════════════════════════ */

  --sp-4:    0.25rem;
  --sp-8:    0.5rem;
  --sp-12:   0.75rem;
  --sp-16:   1rem;
  --sp-20:   1.25rem;
  --sp-24:   1.5rem;
  --sp-32:   2rem;
  --sp-40:   2.5rem;
  --sp-48:   3rem;
  --sp-64:   4rem;
  --sp-80:   5rem;
  --sp-96:   6rem;
  --sp-128:  8rem;

  /* ═══════════════════════════════════════════════════════════
     RADIUS · SHADOWS · TIMING · Z · LAYOUT
     ═══════════════════════════════════════════════════════════ */

  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-pill:  999px;

  --sh-sm:   0 1px 2px rgba(10, 15, 30, .05);
  --sh-md:   0 4px 12px rgba(10, 15, 30, .08);
  --sh-lg:   0 10px 32px rgba(10, 15, 30, .12);
  --sh-xl:   0 24px 64px rgba(10, 15, 30, .15);
  --sh-glow: 0 0 0 4px rgba(6, 214, 160, .15);

  --t-fast:  150ms cubic-bezier(.4, 0, .2, 1);
  --t-base:  240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:  400ms cubic-bezier(.4, 0, .2, 1);

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;

  --container-max: 1200px;
  --container-px:  clamp(1rem, 5vw, 2rem);
  --section-py:    clamp(3rem, 8vw, 6rem);
}

/* ── Honor reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}