/* ==========================================================================
   Design tokens — The Major League Developers
   Single source of truth for color, type, spacing, radii and motion.
   Components must reference these variables, never raw values.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License 1.1) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
/* Metric-matched fallback so the swap to Archivo causes no layout shift. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 88%;
  descent-override: 21%;
}

:root {
  color-scheme: light dark;

  /* ---------- Palette: light (default) ----------
     Restrained neutrals + one accent ("signal"). All text pairs meet WCAG AA. */
  --paper: #f4f2ed;          /* page background, warm off-white */
  --surface: #fbfaf7;        /* raised surfaces: cards, panels */
  --surface-2: #ebe8e0;      /* insets, tracks, code blocks */
  --ink: #111214;            /* primary text, 17.4:1 on paper */
  --ink-2: #3a3c41;          /* body copy, 10.1:1 */
  --ink-3: #5e6068;          /* secondary/meta text, 5.6:1 */
  --line: #d9d5cb;           /* hairlines */
  --line-strong: #b9b4a8;
  --control: #85817a;        /* form-control borders: 3:1 non-text contrast */
  --signal: #c2360c;         /* the accent: 5.0:1 on paper, 5.5:1 with white */
  --signal-ink: #ffffff;     /* text on signal */
  --signal-soft: #f6dfd5;    /* tints behind accent content */
  --focus: #1f5eff;          /* focus rings: distinct from the accent on purpose */
  --success: #19703f;
  --danger: #b3261e;
  --blueprint: #1f5eff;      /* blueprint-mode overlay color */
  --shadow-sm: 0 1px 2px rgb(17 18 20 / .06), 0 1px 1px rgb(17 18 20 / .04);
  --shadow-md: 0 10px 30px -12px rgb(17 18 20 / .22), 0 2px 6px rgb(17 18 20 / .06);
  --shadow-lg: 0 30px 60px -20px rgb(17 18 20 / .35);

  /* ---------- Typography ---------- */
  --font-sans: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --stretch-display: 78%;    /* condensed, jersey-like display cut */
  --stretch-body: 100%;

  /* Fluid type scale (min at 320px viewport, max at 1440px). */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.8vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.42rem + 1.55vw, 2.8rem);
  --step-4: clamp(2.07rem, 1.5rem + 2.85vw, 4.1rem);
  --step-5: clamp(2.5rem, 1.55rem + 4.75vw, 5.9rem);

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --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: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 2.5rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --maxw: 76rem;
  --maxw-prose: 42rem;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Motion ----------
     Durations collapse to ~0 under prefers-reduced-motion (see below). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 700ms;

  /* ---------- Layers ---------- */
  --z-header: 50;
  --z-overlay: 80;
  --z-blueprint: 90;
  --z-toast: 100;
}

/* ---------- Palette: dark ----------
   Applied when the OS prefers dark and the visitor hasn't chosen light,
   or when the visitor explicitly picks dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0e10;
    --surface: #15171a;
    --surface-2: #1d2024;
    --ink: #efede7;
    --ink-2: #c4c2bb;
    --ink-3: #9a9891;
    --line: #2a2d32;
    --line-strong: #43474e;
    --control: #71757d;
    --signal: #ff6b3d;
    --signal-ink: #140803;
    --signal-soft: #3a1a0f;
    --focus: #7aa2ff;
    --success: #5fcf8e;
    --danger: #ff8a80;
    --blueprint: #7aa2ff;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 12px 30px -12px rgb(0 0 0 / .7);
    --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"] {
  --paper: #0d0e10;
  --surface: #15171a;
  --surface-2: #1d2024;
  --ink: #efede7;
  --ink-2: #c4c2bb;
  --ink-3: #9a9891;
  --line: #2a2d32;
  --line-strong: #43474e;
  --control: #71757d;
  --signal: #ff6b3d;
  --signal-ink: #140803;
  --signal-soft: #3a1a0f;
  --focus: #7aa2ff;
  --success: #5fcf8e;
  --danger: #ff8a80;
  --blueprint: #7aa2ff;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 12px 30px -12px rgb(0 0 0 / .7);
  --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / .8);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}