/* ==========================================================================
   MPN — Design tokens
   Palette, type scale, spacing, motion. Nothing else lives here.

   Palette follows the supplied John Burgos style guide: natural black and
   deep blue-charcoal surfaces, cool gray type, and PMS 278C blue as the only
   chromatic accent. Typography intentionally remains unchanged.
   ========================================================================== */

:root {
  /* --- Raw brand palette (never used directly in components) ------------ */
  --brand-navy:        #07111A;  /* canvas */
  --brand-navy-raised: #101C26;  /* raised panels */
  --brand-navy-deep:   #050C13;  /* sunken / image scrim */
  --brand-white:       #F5F7F7;  /* type and inverted surfaces */
  --brand-gray:        #A8B0B5;  /* cool gray secondary type */
  --brand-blue:        #8AB7E9;  /* PMS 278C / RGB 138 183 233 */
  --brand-blue-deep:   #315D8B;  /* AA-safe blue for text on white */

  /* --- Type families ---------------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Fluid type scale -------------------------------------------------
     Desktop targets: H1 88 · H2 56 · H3 32 · body 18 · caption 14
     Mobile targets:  H1 44 · H2 34 · H3 24 · body 17                     */
  --fs-h1:      clamp(2.75rem, 1.42rem + 5.90vw, 5.5rem);
  --fs-h2:      clamp(2.125rem, 1.44rem + 3.06vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 1.30rem + 0.89vw, 2rem);
  --fs-h4:      clamp(1.25rem, 1.16rem + 0.40vw, 1.5rem);
  --fs-lede:    clamp(1.1875rem, 1.09rem + 0.45vw, 1.4375rem);
  --fs-body:    clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-stat:    clamp(3.5rem, 1.56rem + 8.63vw, 6rem);   /* 56 → 96 */
  --fs-stat-sm: clamp(2.5rem, 1.83rem + 2.98vw, 4rem);   /* 40 → 64 */

  --lh-display: 1.03;
  --lh-h2: 1.08;
  --lh-h3: 1.18;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.18em;
  --tracking-btn: 0.1em;
  --measure: 68ch;
  --measure-tight: 46ch;

  /* --- Space & layout ---------------------------------------------------- */
  --maxw: 1280px;
  --gutter: clamp(1.5rem, 5.6vw, 7.5rem);     /* 24 → 120 */
  --section-y: clamp(4.5rem, 7.3vw, 8.75rem); /* 72 → 140 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.75rem;
  --radius: 4px;
  --tap: 44px;         /* minimum touch target */
  --btn-h: 56px;
  --nav-h: 72px;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-reveal: 400ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --reveal-travel: 20px;

  --focus-ring: 2px solid var(--accent);
}

/* ==========================================================================
   Theme: the deep navy image-led mode is the primary brand expression
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--brand-navy);
  --bg-raised: var(--brand-navy-raised);
  --bg-sunken: var(--brand-navy-deep);
  --bg-invert: var(--brand-white);
  --fg: var(--brand-white);
  --fg-invert: var(--brand-navy);
  --fg-muted: rgba(245, 247, 247, 0.76);
  --fg-quiet: rgba(245, 247, 247, 0.58);
  --mute: var(--brand-gray);
  --hairline: rgba(245, 247, 247, 0.16);
  --hairline-strong: rgba(245, 247, 247, 0.32);

  --accent: var(--brand-blue);
  --accent-fill: var(--brand-blue);
  --on-accent: #101820;
  --accent-soft: rgba(138, 183, 233, 0.16);
  --slate: #8FA6B4;                   /* cool blue-gray for verification notices */
  --slate-soft: rgba(143, 166, 180, 0.14);

  --scrim: linear-gradient(to bottom, rgba(5, 12, 19, 0) 35%, rgba(5, 12, 19, 0.72) 88%, var(--bg) 100%);
  --shadow-lift: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F7F7;
  --bg-raised: #E9EDEE;
  --bg-sunken: #DFE4E6;
  --bg-invert: var(--brand-navy);
  --fg: #0C1A24;
  --fg-invert: var(--brand-white);
  --fg-muted: rgba(12, 26, 36, 0.76);
  --fg-quiet: rgba(12, 26, 36, 0.60);
  --mute: #5A6771;
  --hairline: rgba(12, 26, 36, 0.16);
  --hairline-strong: rgba(12, 26, 36, 0.34);

  --accent: var(--brand-blue-deep);
  --accent-fill: var(--brand-blue-deep);
  --on-accent: #FFFFFF;
  --accent-soft: rgba(49, 93, 139, 0.14);
  --slate: #3E5666;
  --slate-soft: rgba(62, 86, 102, 0.10);

  --scrim: linear-gradient(to bottom, rgba(245, 247, 247, 0) 55%, rgba(245, 247, 247, 0.40) 84%, var(--bg) 100%);
  --shadow-lift: 0 18px 40px -26px rgba(12, 26, 36, 0.35);
}