/* tokens.css — the single source of design values. */

:root {
  /* ============ FONT FAMILIES ============ */
  --ff-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ff-data:    'Space Grotesk', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ============ TYPE SCALE ============ */
  /* Major Third (1.250) desktop → Minor Third (1.200) mobile */
  --font-display: clamp(2.5rem,   5.5vw, 4rem);      /* 40 → 64 */
  --font-h1:      clamp(2rem,     5vw,   3rem);      /* 32 → 48 */
  --font-h2:      clamp(1.625rem, 4vw,   2.25rem);   /* 26 → 36 */
  --font-h3:      clamp(1.25rem,  3vw,   1.5rem);    /* 20 → 24 */
  --font-h4:      clamp(1.125rem, 2vw,   1.25rem);   /* 18 → 20 */
  --font-body-lg: clamp(1rem,     1.5vw, 1.125rem);  /* 16 → 18 */
  --font-body:    clamp(0.9375rem,1.2vw, 1rem);      /* 15 → 16 */
  --font-body-sm: clamp(0.8125rem,1vw,   0.875rem);  /* 13 → 14 */
  --font-eyebrow: clamp(0.75rem,  1vw,   0.8125rem); /* 12 → 13 */
  --font-stat:    clamp(2.5rem,   6vw,   3.5rem);    /* 40 → 56 */
  --font-ui:      0.9375rem;                         /* 15 fixed */

  /* ============ MEASURE ============ */
  --max-width-prose:  68ch;
  --max-width-narrow: 46ch;
  --max-width-wide:   88ch;

  /* ============ EMERALD (brand) ============ */
  --emerald-900: #064E3B;
  --emerald-800: #065F46;
  --emerald-700: #047857;   /* interactive: links, button fills, small accent text — AA */
  --emerald-600: #059669;   /* brand: icons, borders, tags, text ≥24px only */
  --emerald-500: #10B981;
  --emerald-400: #34D399;
  --emerald-300: #6EE7B7;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;

  /* ============ STONE (light-theme neutrals) ============ */
  --stone-900: #1A1A17;
  --stone-600: #52524C;
  --stone-500: #6E6E68;
  --stone-300: #D2D2CB;
  --stone-200: #E6E6E1;
  --stone-100: #F4F4F1;
  --stone-50:  #FAFAF8;

  /* ============ SLATE (dark-theme neutrals) ============ */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* ============ STATUS ============ */
  --status-ok:   #047857;  --status-ok-tint:   #ECFDF5;
  --status-warn: #B45309;  --status-warn-tint: #FFFBEB;
  --status-bad:  #B91C1C;  --status-bad-tint:  #FEF2F2;
  --status-info: #0369A1;  --status-info-tint: #F0F9FF;

  /* ============ SEMANTIC — TEXT ============ */
  --color-text-primary:   var(--stone-900);
  --color-text-secondary: var(--stone-600);
  --color-text-tertiary:  var(--stone-500);
  --color-text-accent:    var(--emerald-600);
  --color-text-inverse:   var(--white);

  /* ============ SEMANTIC — SURFACE / ACCENT / LINE ============ */
  --color-bg:              var(--stone-50);
  --color-surface:         var(--white);
  --color-surface-sunken:  var(--stone-100);
  --color-surface-raised:  var(--white);
  --color-surface-inverse: var(--stone-900);
  --color-accent:          var(--emerald-600);
  --color-accent-strong:   var(--emerald-700);
  --color-accent-hover:    var(--emerald-800);
  --color-accent-tint:     var(--emerald-50);
  --color-on-accent:       var(--white);
  --color-line:            var(--stone-200);
  --color-line-strong:     var(--stone-300);
  --color-focus:           var(--emerald-600);

  /* ============ GRADIENTS ============ */
  --gradient-hero: linear-gradient(160deg, #0F172A 0%, #020617 100%);
  --gradient-wash: linear-gradient(180deg, var(--color-accent-tint) 0%, transparent 100%);

  /* ============ SPACE ============ */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;
  --space-10: 8rem;
  --section-y:    clamp(2rem, 4.5vw, 3.5rem);
  --section-y-lg: clamp(2.5rem, 6vw, 4.5rem);

  /* ============ LAYOUT ============ */
  --container:       1200px;
  --container-wide:  1400px;
  --container-prose: 760px;
  --container-pad:   clamp(1rem, 4vw, 2rem);
  --header-h:        72px;
  --header-h-compact: 56px;   /* sticky header after scrolling */
  --grid-gap:        var(--space-5);

  /* ============ SHAPE ============ */
  --radius-xs: 3px;  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

  /* ============ ELEVATION ============ */
  --shadow-xs: 0 1px 2px rgba(26,26,23,.06);
  --shadow-sm: 0 1px 3px rgba(26,26,23,.07), 0 1px 2px rgba(26,26,23,.04);
  --shadow-md: 0 4px 12px rgba(26,26,23,.08), 0 1px 3px rgba(26,26,23,.05);
  --shadow-lg: 0 12px 32px rgba(26,26,23,.10), 0 2px 8px rgba(26,26,23,.05);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* ============ MOTION ============ */
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;
  --ease-out:    cubic-bezier(.2,.8,.3,1);
  --ease-in-out: cubic-bezier(.6,0,.3,1);

  /* ============ Z-INDEX ============ */
  --z-base: 0;       --z-sticky: 10;   --z-header: 100;
  --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}

[data-theme="dark"] {
  --color-text-primary:   var(--slate-100);
  --color-text-secondary: var(--slate-400);
  --color-text-tertiary:  var(--slate-500);
  --color-text-accent:    var(--emerald-500);
  --color-text-inverse:   var(--slate-100);

  --color-bg:              var(--slate-950);
  --color-surface:         var(--slate-900);
  --color-surface-sunken:  var(--slate-950);
  --color-surface-raised:  var(--slate-800);
  --color-surface-inverse: var(--slate-950);
  --color-accent:          var(--emerald-500);
  --color-accent-strong:   var(--emerald-400);
  --color-accent-hover:    var(--emerald-300);
  --color-accent-tint:     rgba(16,185,129,.12);
  --color-on-accent:       var(--slate-950);
  --color-line:            var(--slate-800);
  --color-line-strong:     var(--slate-700);
  --color-focus:           var(--emerald-400);

  --status-ok:   #34D399;  --status-ok-tint:   rgba(52,211,153,.15);
  --status-warn: #FBBF24;  --status-warn-tint: rgba(251,191,36,.15);
  --status-bad:  #F87171;  --status-bad-tint:  rgba(248,113,113,.15);
  --status-info: #38BDF8;  --status-info-tint: rgba(56,189,248,.15);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.30);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
}

@media (max-width: 899px) { :root { --header-h: 64px; --header-h-compact: 52px; } }

/* ============ BASE TYPE ============ */

body {
  font-family: var(--ff-body);
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--ff-heading); color: var(--color-text-primary); margin-top: 0; }
h4         { font-family: var(--ff-body);    color: var(--color-text-primary); margin-top: 0; }

h1 { font-size: var(--font-h1); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
h2 { font-size: var(--font-h2); font-weight: 700; line-height: 1.20; letter-spacing: -0.02em; }
h3 { font-size: var(--font-h3); font-weight: 600; line-height: 1.30; letter-spacing: -0.01em; }
h4 { font-size: var(--font-h4); font-weight: 600; line-height: 1.35; letter-spacing: 0; }

/* Home hero only — one per site. Still an <h1> element. */
.hero__title {
  font-size: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

p {
  max-width: var(--max-width-prose);
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

/* Long-form pages: regulation, article, legal */
.prose p, .prose li { font-size: var(--font-body-lg); line-height: 1.6; }

/* Load-bearing copy is never secondary */
th, td, label { color: var(--color-text-primary); }

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--font-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-accent-strong);   /* #047857 — AA at 13px */
}

th, td { font-size: var(--font-body-sm); font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}