/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: modern-minimal · macrostructure: Stat-Led · theme: custom
 * vibe: "deep-ink stat-hero, solar-amber anchor, grotesk precision"
 * paper: oklch(97% 0.008 82) · accent: oklch(74% 0.18 72)
 * display: Space Grotesk · body: DM Sans
 * axes: light / grotesk-sans / warm
 * nav: N1b · footer: Ft1
 * contrast: pass (40–41) · nav: N1b · footer: Ft1 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

/* ── Google Fonts ────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

:root {
  /* ── Color tokens — OKLCH ──────────────────────────────────── */

  /* Paper / surfaces — amber-warm tint */
  --color-paper:    oklch(97% 0.008 82);   /* near-white, warm */
  --color-paper-2:  oklch(94% 0.010 80);   /* subtle card surface */
  --color-paper-3:  oklch(91% 0.012 78);   /* deeper inset */

  /* Dark hero surface — deep ink, amber-warm undertone */
  --color-hero-bg:  oklch(15% 0.012 60);   /* near-black, warm ink */
  --color-hero-bg2: oklch(20% 0.014 65);   /* slightly lighter band */

  /* Ink / text */
  --color-ink:      oklch(18% 0.010 60);   /* primary text */
  --color-ink-2:    oklch(35% 0.010 65);   /* secondary text */
  --color-ink-3:    oklch(52% 0.008 70);   /* muted / captions */
  --color-ink-hero: oklch(94% 0.006 80);   /* text on dark hero */
  --color-ink-hero2:oklch(72% 0.008 75);   /* muted text on dark hero */

  /* Rules / borders */
  --color-rule:     oklch(85% 0.010 78);   /* light-mode borders */
  --color-rule-dark:oklch(28% 0.012 60);   /* dark-hero borders */

  /* Accent — solar amber */
  --color-accent:      oklch(74% 0.18 72);    /* solar amber (≈#f59e0b) */
  --color-accent-dark: oklch(58% 0.18 65);    /* darker amber for hover */
  --color-accent-ink:  oklch(16% 0.010 55);   /* ink on amber fills: passes 4.5:1 */
  --color-accent-muted:oklch(74% 0.08 72);    /* low-chroma amber tint */

  /* Focus ring */
  --color-focus:    oklch(60% 0.18 68);

  /* Success */
  --color-success:  oklch(55% 0.16 145);

  /* ── Typography tokens ─────────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  /* No outlier — 2-family discipline */

  /* Type scale — major-third ratio (1.25) base 16px */
  --text-xs:   0.64rem;    /*  10.2px */
  --text-sm:   0.8rem;     /*  12.8px */
  --text-base: 1rem;       /*  16px   */
  --text-md:   1.25rem;    /*  20px   */
  --text-lg:   1.5625rem;  /*  25px   */
  --text-xl:   1.9531rem;  /*  31.25px*/
  --text-2xl:  2.4414rem;  /*  39px   */
  --text-3xl:  3.0518rem;  /*  48.8px */
  --text-display-s: clamp(2rem, 3.5vw + 0.75rem, 3.4rem);   /* section heads */
  --text-display:   clamp(2.75rem, 5vw + 1rem, 4.75rem);    /* hero headline */
  --text-stat:      clamp(4rem, 8vw + 1rem, 8rem);          /* hero stat numbers */

  /* Line-heights */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-base:    1.6;
  --lh-relaxed: 1.72;

  /* Letter-spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.10em;

  /* ── Spacing scale — 4pt grid ──────────────────────────────── */
  --space-3xs: 0.25rem;  /* 4px  */
  --space-2xs: 0.5rem;   /* 8px  */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4.5rem;   /* 72px */
  --space-3xl: 7rem;     /* 112px */

  /* ── Radius ────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Shadow ────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px oklch(18% 0.010 60 / 0.05);
  --shadow-sm: 0 2px 6px oklch(18% 0.010 60 / 0.07);
  --shadow:    0 4px 16px oklch(18% 0.010 60 / 0.10);
  --shadow-lg: 0 8px 32px oklch(18% 0.010 60 / 0.14);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-short:   200ms;
  --dur-medium:  350ms;
  --dur-long:    500ms;

  /* ── Layout ────────────────────────────────────────────────── */
  --maxw: 1120px;
  --maxw-prose: 68ch;
  --banner-height: 64px;

  /* ── Z-index scale ─────────────────────────────────────────── */
  --z-base:       1;
  --z-raised:     10;
  --z-sticky:     100;
  --z-sticky-nav: 200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}