/* ============================================================================
   eCentric Design System — tokens
   Base layer copied verbatim from the eCentric Design System package
   (tokens/colors.css · typography.css · spacing.css).
   Do not invent values here; extend only in the clearly marked blocks below.
   ========================================================================== */

:root {
  /* -- Brand: Navy (primary) --------------------------- */
  --navy-900: #000A40;   /* core brand navy — headings, primary text, buttons */
  --navy-800: #0C1550;   /* dashboard panel base */
  --navy-700: #131F62;
  --navy-600: #16246E;   /* dashboard panel top */
  --navy-500: #1E256C;
  --navy-400: #1D2A72;   /* hero glow navy */

  /* -- Brand: Yellow (accent) -------------------------- */
  --yellow-500: #FFC700; /* core accent — CTAs, highlights, logo mark */
  --yellow-600: #F0B400;
  --yellow-700: #E6B400; /* CTA hover */
  --yellow-800: #B88900;
  --yellow-300: #FFD338;
  --yellow-200: #FFE88A;
  --yellow-100: #FFF8E8; /* soft yellow surface */

  /* -- Neutrals (slate) -------------------------------- */
  --slate-900: #0F172A;
  --slate-700: #334155;
  --slate-600: #4B5563;  /* body copy */
  --slate-500: #64748B;  /* muted / captions */
  --slate-200: #E2E8F0;  /* borders */
  --slate-100: #F1F5F9;  /* hairline borders */
  --white: #FFFFFF;

  /* -- Surfaces ---------------------------------------- */
  --surface-cream: #FFFCF8; /* hero gradient top */
  --surface-lilac: #F7F8FD; /* hero gradient bottom / section bg */
  --surface-indigo-50: #F5F7FF;
  --surface-indigo-100: #F2F5FC;

  /* -- Semantic status --------------------------------- */
  --success: #34D399;
  --danger:  #E40014;
  --danger-strong: #BF000F;

  /* -- Semantic aliases -------------------------------- */
  --text-strong:   var(--navy-900);
  --text-body:     var(--slate-600);
  --text-muted:    var(--slate-500);
  --text-on-navy:  var(--white);
  --text-on-yellow:var(--navy-900);

  --bg-page:       var(--white);
  --bg-subtle:     var(--surface-lilac);
  --bg-cream:      var(--surface-cream);
  --bg-navy:       var(--navy-900);
  --bg-yellow-soft:var(--yellow-100);

  --accent:        var(--yellow-500);
  --accent-hover:  var(--yellow-700);

  --border:        var(--slate-200);
  --border-subtle: var(--slate-100);

  /* hero ambient gradient used across marketing sections */
  --hero-gradient:
    radial-gradient(ellipse 120% 70% at 50% -18%, rgba(255,199,0,0.10), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 118%, rgba(29,42,114,0.09), transparent 62%),
    linear-gradient(180deg, #FFFCF8 0%, #FFFFFF 45%, #F7F8FD 100%);

  /* -- Typography: families ---------------------------- */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-vn:   'Be Vietnam Pro', 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* -- Typography: scale (marketing) ------------------- */
  --text-display: 64px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-eyebrow: 12px;

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

  /* -- Typography: line heights ------------------------ */
  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* -- Typography: letter spacing ---------------------- */
  --tracking-display: -0.01em;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.15em;

  /* -- Spacing scale (4px base) ------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* -- Layout ------------------------------------------ */
  --container-max: 1440px;
  --gutter: 80px;
  --gutter-sm: 20px;

  /* -- Radii ------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* -- Shadows (navy-tinted, never pure black) --------- */
  --shadow-xs: 0 1px 2px rgba(0,10,64,0.05);
  --shadow-sm: 0 1px 3px rgba(0,10,64,0.08), 0 1px 2px rgba(0,10,64,0.04);
  --shadow-md: 0 6px 16px rgba(0,10,64,0.08);
  --shadow-lg: 0 18px 40px rgba(0,10,64,0.12);
  --shadow-yellow: 0 10px 24px rgba(255,199,0,0.35);

  /* -- Focus ring -------------------------------------- */
  --ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--navy-900);
}

/* ============================================================================
   EXTENSION LAYER — scrollytelling only
   The DS scale tops out at 64px (a conventional marketing hero). This build is
   an editorial scroll story that needs display type at 96-140px (brief 3.2).
   These steps are derived from the DS scale, not replacements for it: every
   value from --fs-h1 down resolves back to a DS token at its max.
   ========================================================================== */

:root {
  /* Fluid display steps. Min values keep 375px readable, max hits the brief. */
  --fs-display-1: clamp(2.75rem, 1.25rem + 6.4vw, 8.75rem); /* 44px -> 140px */
  --fs-display-2: clamp(2.375rem, 1.25rem + 5.3vw, 6rem);   /* 38px -> 96px @1440 */
  --fs-display-3: clamp(2rem, 1.25rem + 3.2vw, 4.5rem);     /* 32px -> 72px  */

  --fs-h1: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);           /* 30 -> 48 = --text-h1 */
  --fs-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);       /* 26 -> 36 = --text-h2 */
  --fs-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);      /* 22 -> 28 = --text-h3 */
  --fs-h4: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem);    /* 19 -> 22 = --text-h4 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);      /* 17 -> 20 */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16 -> 17 */

  /* Display copy sits tighter than the DS marketing scale allows. */
  --leading-display: 0.95;
  --tracking-display-xl: -0.025em;

  /* Section rhythm. --space-20 (80px) is the DS section unit; the story needs
     more air between chapters, so chapters scale it fluidly. */
  --chapter-pad-y: clamp(80px, 9vh + 2rem, 168px);
  --chapter-gap: clamp(48px, 6vw, 80px);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
  --dur-reveal: 0.9s;

  --nav-h: 68px;
}

/* ============================================================================
   PAGE THEME — chapters alternate navy <-> light as the reader scrolls.
   Every chapter carries data-theme; components read only --page-* tokens so a
   single attribute flips an entire section.
   ========================================================================== */

[data-theme="light"] {
  --page-bg: var(--white);
  --page-fg: var(--navy-900);
  --page-body: var(--slate-600);
  --page-muted: var(--slate-500);
  --page-border: var(--slate-200);
  --page-hairline: var(--slate-100);
  --page-eyebrow: var(--slate-500);
  --page-surface: var(--surface-lilac);
  --page-surface-2: var(--surface-cream);
  /* Yellow fails AA as text on white — on light chapters it is fill only. */
  --page-accent-text: var(--navy-900);
  --page-shadow: var(--shadow-md);
  --page-ring: var(--ring);
}

[data-theme="navy"] {
  --page-bg: var(--navy-900);
  --page-fg: var(--white);
  --page-body: rgba(255, 255, 255, 0.74);
  --page-muted: rgba(255, 255, 255, 0.56);
  --page-border: rgba(255, 255, 255, 0.14);
  --page-hairline: rgba(255, 255, 255, 0.08);
  --page-eyebrow: var(--yellow-500);
  --page-surface: rgba(255, 255, 255, 0.04);
  --page-surface-2: var(--navy-800);
  /* On navy, yellow is 11.9:1 — safe as text, and the only place it may be. */
  --page-accent-text: var(--yellow-500);
  --page-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --page-ring: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--yellow-500);
}