/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Two layers:
   1. Primitives  (--navy-900, --stone-100 …) raw values. Never use them in
      components directly.
   2. Semantic    (--color-text, --color-action-bg …) what components use.

   When the brand is defined, re-skin by editing the primitives and, if
   needed, the semantic mapping. Components never need to change.
   ========================================================================== */

:root {
  /* ---- Primitives: color ------------------------------------------------ */
  --navy-950: #0b1526; /* ink */
  --navy-900: #111e33;
  --navy-800: #1a2b47;
  --navy-700: #2a4a7a;
  --navy-300: #a9b1be;
  --navy-400: #7e8692;

  --stone-0: #ffffff;
  --stone-50: #f6f4ef; /* paper */
  --stone-100: #eeebe4;
  --stone-200: #e2ded5;
  --stone-300: #cdc8bd;
  --slate-500: #5a616c;
  --slate-700: #323a46;

  --brass-300: #c6a66e;
  --brass-500: #a8834a;
  --brass-700: #8a6a35;

  --green-700: #2f6a4f;
  --green-300: #8fc7a9;
  --red-700: #9e3a2f;
  --red-300: #eba59b;

  /* ---- Semantic: color (light surface, default) ------------------------- */
  --color-bg: var(--stone-0);
  --color-bg-alt: var(--stone-50);
  --color-bg-sunken: var(--stone-100);
  --color-bg-inverse: var(--navy-950);

  --color-text-strong: var(--navy-950); /* headings — 18.3:1 */
  --color-text: var(--slate-700); /* body — 11.5:1 */
  --color-text-muted: var(--slate-500); /* secondary — 6.2:1 */
  --color-text-accent: var(--brass-700); /* eyebrows, numerals — 5:1 */

  --color-border: var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-rule-accent: var(--brass-500);

  --color-action-bg: var(--navy-950);
  --color-action-bg-hover: var(--navy-700);
  --color-action-text: var(--stone-0);
  --color-action-outline: var(--navy-950);
  --color-link: var(--navy-700);

  --color-focus: var(--navy-700);
  --color-success: var(--green-700);
  --color-danger: var(--red-700);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid scale: 360px → 1440px viewport */
  --text-display-xl: clamp(2.625rem, 1.65rem + 4.35vw, 5.25rem); /* 42 → 84 hero */
  --text-display-l: clamp(2.25rem, 1.6rem + 2.9vw, 4rem); /* 36 → 64 */
  --text-display-m: clamp(1.875rem, 1.45rem + 1.9vw, 3rem); /* 30 → 48 section */
  --text-display-s: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); /* 24 → 32 */
  --text-title: 1.1875rem; /* 19 — card titles (sans) */
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --text-body: 1rem; /* 16 */
  --text-small: 0.875rem; /* 14 */
  --text-xs: 0.75rem; /* 12 — eyebrows, labels */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.6;

  --tracking-display: -0.018em;
  --tracking-tight: -0.006em;
  --tracking-eyebrow: 0.14em;

  --measure: 62ch; /* max line length for running text */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */
  --space-10: 8rem; /* 128 */

  --section-y: clamp(4.5rem, 3rem + 6.5vw, 9rem); /* 72 → 144 */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem); /* 16 → 40 */
  --container: 76rem; /* 1216 content */
  --container-narrow: 48rem;
  --header-h: 4.5rem; /* 72 */

  /* ---- Shape & elevation ------------------------------------------------ */
  --radius-0: 0;
  --radius-1: 2px; /* buttons, inputs */
  --radius-2: 4px; /* cards, media */
  /* Re-declared inside each [data-surface] so it resolves to that surface's border */
  --border-hairline: 1px solid var(--color-border);

  --shadow-1: 0 1px 2px rgb(11 21 38 / 0.06);
  --shadow-2: 0 1px 2px rgb(11 21 38 / 0.05), 0 18px 40px -18px rgb(11 21 38 / 0.22);
  --shadow-3: 0 2px 4px rgb(11 21 38 / 0.04), 0 40px 80px -32px rgb(11 21 38 / 0.32);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 90;
}

/* Dark surface: put data-surface="dark" on any section (CTA band, footer…).
   Every component inside re-maps automatically. */
[data-surface="dark"] {
  --color-bg: var(--navy-950);
  --color-bg-alt: var(--navy-900);
  --color-bg-sunken: var(--navy-800);

  --color-text-strong: #f4f1ea;
  --color-text: #d3d7de;
  --color-text-muted: var(--navy-300);
  --color-text-accent: var(--brass-300);

  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.28);
  --color-rule-accent: var(--brass-300);

  --color-action-bg: #f4f1ea;
  --color-action-bg-hover: var(--stone-0);
  --color-action-text: var(--navy-950);
  --color-action-outline: #f4f1ea;
  --color-link: #f4f1ea;
  --color-focus: var(--brass-300);
  --color-success: var(--green-300);
  --color-danger: var(--red-300);
  --border-hairline: 1px solid var(--color-border);

  background-color: var(--color-bg);
  color: var(--color-text);
}

[data-surface="paper"] {
  --color-bg: var(--stone-50);
  --color-border: var(--stone-200);
  --color-text-accent: var(--brass-700);
  --border-hairline: 1px solid var(--color-border);
  background-color: var(--color-bg);
}