/* ============================================================
   ENIGMA FINANCIALS — Design Tokens (migrated to approved system)
   New system tokens are the source of truth; legacy names below
   resolve to the same values so existing var() references migrate.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ===================== NEW SYSTEM ===================== */
  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --text-h1: 3.8125rem; --text-h2: 3.0625rem; --text-h3: 2.4375rem; --text-h4: 1.9375rem;
  --text-h5: 1.5625rem; --text-lede: 1.25rem; --text-body: 1rem; --text-caption: 0.8125rem;
  /* Fluid display headings — min/max are scale steps; the vw term is a rate.
     Verified px @1280: hero 61 · display 48.6 · title 39 (capped by ~1290px). */
  --text-hero:    clamp(2.4375rem, 4.8vw, 3.8125rem);  /* h3 39 → h1 61 */
  --text-display: clamp(1.9375rem, 3.8vw, 3.0625rem);  /* h4 31 → h2 49 */
  --text-title:   clamp(1.5625rem, 3.05vw, 2.4375rem); /* h5 25 → h3 39 */

  --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6;
  --tracking-display: -0.02em; --tracking-body: 0em; --tracking-caps: 0.12em;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;

  /* Color */
  --primary: #0B1F3A; --primary-hover: #142C4F;
  --accent: #E8A23A; --accent-ink: #8A5E10; --accent-tint: #FBE7B8;
  --neutral-0: #FFFFFF; --neutral-50: #FAF6EE; --neutral-200: #E7E0D0; --neutral-500: #5E5647; --neutral-900: #14192A;
  --surface: var(--neutral-50); --surface-raised: var(--neutral-0); --surface-inverse: var(--primary);
  --border: var(--neutral-200); --border-on-primary: rgba(255,255,255,0.14);
  --border-strong-on-primary: rgba(255,255,255,0.4); --fill-on-primary: rgba(255,255,255,0.08);
  --text-primary: var(--neutral-900); --text-muted: var(--neutral-500);
  --text-on-primary: #FBF7EC; --text-muted-on-primary: #C7C2B6; --text-on-accent: var(--primary);
  --link: var(--accent-ink);
  --focus-ring: #9C6F1C; /* focus outline — 4.14:1 on cream, 3.70:1 on navy */

  /* Spacing (base 4px, single scale) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  /* Measure & layout */
  --measure: 66ch; --container: 75rem;

  /* Radius (3) */
  --radius-sm: 8px; --radius-md: 16px; --radius-full: 9999px;

  /* Elevation (3) */
  --shadow-1: 0 1px 2px rgba(11,31,58,.06), 0 2px 6px rgba(11,31,58,.05);
  --shadow-2: 0 8px 24px -8px rgba(11,31,58,.16);
  --shadow-3: 0 24px 56px -20px rgba(11,31,58,.28);

  /* Motion (unchanged) */
  --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms;
  --reveal-shift: 12px; /* scroll-reveal entrance rise (transform only) */

  /* Signature gradients (rebuilt on new palette) */
  --gradient-navy: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 60%, #061322 100%);
  --gradient-gold: linear-gradient(135deg, #F5C56B 0%, var(--accent) 100%);
  --gradient-paper: radial-gradient(140% 80% at 50% 0%, #FFFCF3 0%, var(--surface) 60%, var(--neutral-200) 100%);

  /* ===================== LEGACY ALIASES → new values ===================== */
  /* fonts */
  --font-sans: var(--font-text); --font-mono: var(--font-text);
  /* navy → primary */
  --enigma-navy-900: var(--primary); --enigma-navy-800: var(--primary);
  --enigma-navy-700: var(--primary-hover); --enigma-navy-600: var(--primary-hover); --enigma-navy-500: var(--primary-hover);
  /* gold */
  --enigma-gold-700: var(--accent-ink); --enigma-gold-600: var(--accent-ink);
  --enigma-gold-500: var(--accent); --enigma-gold-400: var(--accent); --enigma-gold-300: var(--accent);
  --enigma-gold-100: var(--accent-tint);
  /* unused decorative ramps → accent family */
  --enigma-sky-700: var(--link); --enigma-sky-500: var(--accent); --enigma-sky-300: var(--accent-tint); --enigma-sky-100: var(--accent-tint);
  --enigma-coral-500: var(--accent); --enigma-coral-300: var(--accent-tint);
  --enigma-rose-500: var(--accent); --enigma-rose-300: var(--accent-tint);
  /* creams → surface / border */
  --cream-50: var(--surface); --cream-100: var(--surface); --cream-200: var(--neutral-200);
  --cream-300: var(--border); --cream-400: var(--border);
  /* stone / ink → text */
  --stone-500: var(--text-muted); --stone-700: var(--text-muted);
  --ink-900: var(--text-primary); --ink-950: var(--text-primary);
  /* status (unused on site; kept brand-safe) */
  --success-500: #2D8F5E; --success-100: #DCEFE3; --warning-500: var(--accent-ink); --warning-100: var(--accent-tint);
  --danger-500: #C5453A; --danger-100: #F7DDD9; --info-500: var(--link); --info-100: var(--accent-tint);
  /* semantic aliases */
  --bg: var(--surface); --bg-paper: var(--surface-raised); --bg-subtle: var(--surface); --bg-muted: var(--neutral-200);
  --hairline: var(--border); --line: var(--border);
  --fg-1: var(--text-primary); --fg-2: var(--text-primary); --fg-3: var(--text-muted); --fg-4: var(--text-muted);
  --fg-on-navy: var(--text-on-primary); --fg-on-gold: var(--text-on-accent);
  --accent-hover: var(--accent); --accent-press: var(--accent-ink); --link-hover: var(--primary);
  /* legacy type scale → snapped */
  --text-12: var(--text-caption); --text-13: var(--text-caption); --text-14: var(--text-caption);
  --text-16: var(--text-body); --text-18: var(--text-lede); --text-20: var(--text-lede);
  --text-24: var(--text-h5); --text-30: var(--text-h4); --text-38: var(--text-h3);
  --text-48: var(--text-h2); --text-64: var(--text-h1); --text-88: var(--text-h1);
  /* legacy line-height / tracking */
  --lh-tight: var(--leading-tight); --lh-snug: var(--leading-snug); --lh-normal: var(--leading-body); --lh-relaxed: var(--leading-body);
  --tracking-tight: var(--tracking-display); --tracking-normal: 0em; --tracking-wide: var(--tracking-caps);
  /* legacy spacing extras → nearest step */
  --space-5: var(--space-4); --space-10: var(--space-12); --space-20: var(--space-24);
  /* legacy radii → 3 */
  --radius-xs: var(--radius-sm);
  --radius-lg: var(--radius-md); --radius-xl: var(--radius-md); --radius-2xl: var(--radius-md); --radius-pill: var(--radius-full);
  /* legacy borders */
  --border-hair: 1px solid var(--border); --border-line: 1px solid var(--border);
  --border-strong: 1.5px solid var(--primary); --border-gold: 1.5px solid var(--accent);
  /* legacy shadows */
  --shadow-xs: var(--shadow-1); --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3); --shadow-xl: var(--shadow-3);
  --shadow-inset-line: inset 0 0 0 1px var(--border);
  --shadow-gold-glow: 0 0 0 3px rgba(232,162,58,0.30);
  --gradient-sunrise: var(--gradient-gold);
}

/* --- Element defaults --- */
html, body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--text-h2); }
h2 { font-size: var(--text-h3); }
h3 { font-size: var(--text-h4); }
h4 { font-size: var(--text-h5); }
h5 { font-size: var(--text-lede); }
h6 { font-size: var(--text-body); }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-ink);
}
.lede { font-size: var(--text-lede); line-height: var(--leading-body); color: var(--text-muted); text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
small, .meta { font-size: var(--text-caption); color: var(--text-muted); }
strong, b { font-weight: var(--weight-bold); color: var(--text-primary); }
em { font-style: italic; }
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--primary); text-decoration-color: currentColor; }
::selection { background: var(--accent); color: var(--text-on-primary); }