/* Zeus — The Thunder Cycle · design tokens
   Every value traces to docs/direction.md. Only role variables are used outside this file. */
:root {
  /* 1. Raw palette — named after where it lives in the paintings */
  --palette-sky-black: #030303;      /* plate I, night sky top-left (exact sample) */
  --palette-star-navy: #0d1020;      /* plate III, starry sky right */
  --palette-robe-ivory: #e8e2d6;     /* plate IV, robe */
  --palette-marble-dim: #b9b2a5;     /* plate III, marble steps in shadow */
  --palette-bolt-blue: #8aa4ff;      /* plate I, electric bolt (lightened for contrast) */
  --palette-bolt-core: #dbe4ff;      /* plate I, lightning core */
  --palette-helmet-bronze: #c08a45;  /* plate I, lit bronze helmets */
  --palette-earth: #1c120b;          /* plate I, helmets in shadow */
  --palette-hairline: #2a2a2e;       /* ivory at ~12% on sky black */

  /* 2. Color roles */
  --color-bg: var(--palette-sky-black);
  --color-surface: var(--palette-star-navy);
  --color-surface-2: var(--palette-earth);
  --color-text: var(--palette-robe-ivory);
  --color-text-muted: var(--palette-marble-dim);
  --color-accent: var(--palette-bolt-blue);
  --color-accent-2: var(--palette-helmet-bronze);
  --color-light: var(--palette-bolt-core);
  --color-border: var(--palette-hairline);
  --color-overlay: rgb(4 4 5 / 0.94);
  --color-focus: var(--palette-bolt-blue);

  /* 3. Type */
  --font-display: "Marcellus", "Trajan Pro", "Times New Roman", serif;
  --font-body: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;

  /* scale ratio ≈ 1.5+ (editorial drama) */
  --fs-wordmark: clamp(6.25rem, 19vw, 17.5rem);
  --fs-display: clamp(3.5rem, 9vw, 8.75rem);
  --fs-h1: clamp(2.75rem, 6vw, 5.75rem);
  --fs-h2: clamp(2rem, 3.4vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.9vw, 1.75rem);
  --fs-lede: clamp(1.25rem, 1.55vw, 1.5rem);
  --fs-body: 1.1875rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.86;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --tracking-display: -0.01em;
  --tracking-wordmark: 0.02em;
  --tracking-label: 0.2em;
  --tracking-micro: 0.14em;

  /* 4. Space (base 4/8) */
  --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: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;
  --section-pad: var(--space-10);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --container: 82rem;
  --container-narrow: 40rem;
  --header-h: 4.5rem;

  /* plates: never shown wider than natural 1648 / 1.5 */
  --plate-ratio: 1648 / 2944;
  --plate-max: 62.5rem;

  /* 5. Shape & effects — marble: square corners, no shadows */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 999px;
  --rule: 1px solid var(--color-border);
  --mask-solid: #000;
  --bolt-width: 1px;
  --bolt-glow: 0 0 0.75rem rgb(138 164 255 / 0.55);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 1400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
}

@media (max-width: 1199px) {
  :root {
    --section-pad: var(--space-9);
  }
}

@media (max-width: 809px) {
  :root {
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --section-pad: var(--space-8);
    --header-h: 3.5rem;
    --tracking-label: 0.16em;
  }
}
