/* Foxtrot Consulting — design tokens ("Night Edition"). Source of truth: ../DESIGN.md
   Pages use these names, never raw values. */

/* Self-hosted fonts (../assets/fonts/, SIL OFL). No Google requests. */
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/Newsreader-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/Newsreader-Italic-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Dark mode (default) — "Dusk Blue cool" (D38) */
  --ink-950: #0B0D10;
  --ink-900: #101318;
  --ink-850: #161A20;
  --ink-800: #1D222A;
  --line: #262C35;
  --line-strong: #343B46;
  --bone: #E8EAEE;
  --bone-muted: #9DA4AF;
  --bone-faint: #878F9B;
  --signal: #A9C2E2;          /* pale sky blue: the accent on dark */
  --signal-hover: #C2D4EA;
  --error-dark: #F0907E;
  --success-dark: #7FD3A0;

  /* Light "stone" mode: light slabs and Insights articles */
  --paper: #C3C9D0;
  --paper-raised: #D5DAE0;
  --rule: #A6ADB6;
  --ink-text: #14171C;
  --ink-text-lift: #262B33;
  --ink-muted: #3A4049;
  --ink-faint: #4A515B;
  --deep: #2B4560;            /* deep slate blue: the accent on stone */
  --error-light: #8E2A21;
  --success-light: #245A41;

  /* Mist: the one statement slab per page */
  --mist: #A8B8CA;
  --mist-muted: #2A3646;
  --mist-line: #8C9DB1;
  --mist-accent: #1F3550;

  /* Type families */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Type scale */
  --text-label: 0.71875rem;                                 /* 11.5px */
  --text-sm: 0.9375rem;                                     /* 15px */
  --text-body: 1.0625rem;                                   /* 17px */
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);      /* 18 → 20 */
  --text-h4: 1.5rem;                                        /* 24px */
  --text-h3: clamp(1.75rem, 1rem + 2.4vw, 3rem);            /* 28 → 48 */
  --text-h2: clamp(2rem, 1.1rem + 3vw, 3.5rem);             /* 32 → 56 */
  --text-display: clamp(2.75rem, 1.2rem + 5.4vw, 6.25rem);  /* 44 → 100 */

  --leading-label: 1.4;
  --leading-sm: 1.5;
  --leading-body: 1.65;
  --leading-lead: 1.55;
  --leading-h4: 1.2;
  --leading-h3: 1.05;
  --leading-h2: 1.02;
  --leading-display: 0.98;

  --tracking-label: 0.09em;
  --tracking-h4: -0.01em;
  --tracking-h3: -0.025em;
  --tracking-h2: -0.03em;
  --tracking-display: -0.035em;

  --weight-serif-dark: 300;
  --weight-serif-paper: 380;
  --weight-regular: 400;
  --weight-medium: 500;

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

  /* Layout */
  --content-max: 1280px;
  --gutter: 48px;
  --rail: 120px;
  --section-y: 96px;
  --measure: 66ch;
  --header-h: 74px;

  /* Shape */
  --radius-0: 0;
  --radius-pill: 999px;
  --radius-slab: 24px;
  --radius-tile: 14px;
  --radius-panel: 10px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
}

@media (max-width: 720px) {
  :root {
    --gutter: 18px;
    --section-y: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; }
}