/* Design tokens — see docs/archive/DESIGN_SPEC_2026-05-15.md §2.
   Framework-agnostic CSS custom properties. Touch this file, not values
   in component stylesheets. */

/* Self-hosted fonts. Files live in /web/static/fonts/, sourced from
   @fontsource (Inter SIL OFL, JetBrains Mono Apache 2.0). Self-hosted
   because Google Fonts was blocked by browser ORB in some environments
   and h1 was falling back to the system stack. font-display: swap so
   the system fallback paints immediately and the woff2 hot-swaps in. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2");
}

:root {
  /* Surface — warm paper */
  --surface-page: #faf9f7;
  --surface-card: #fffdfb;
  --surface-card-nested: #fdfcfa;
  --surface-rail: #f5f3f0;

  /* Ink — text */
  --ink-1: #2b2823;
  --ink-2: #4a443e;
  --ink-3: #6b6660;
  --ink-4: #8b847c;

  /* Border */
  --border-subtle: #ebe7e0;
  --border-strong: #d4cfc6;

  /* --accent is the brand teal. Bright accents fail AA for body links
     on paper — use --accent-hover for any underlined text. Reserve
     --accent for icons, checked states, accent bars, primary chart lines.

     --accent-link is the *semantic* color for link text. It re-points
     per theme: on paper it's --accent-hover (the darker shade that
     passes AA on cream surfaces); in dark mode it flips to --accent
     (the brighter shade that passes AA on a dark surface). Components
     should reference --accent-link, not --accent-hover, for link text. */
  --accent: #1eb797;
  --accent-hover: #178f75;
  --accent-link: var(--accent-hover);

  /* Semantic / data colors */
  --data-positive: #1eb797;
  --data-attention: #ef7f1a;
  --data-negative: #b23b3b;
  --data-neutral: #6d7698;
  --data-used: #b07a4b;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    monospace;

  --text-display: 24px;
  --text-display-line: 1.25;
  --text-display-weight: 600;

  --text-h2: 16px;
  --text-h2-line: 1.4;
  --text-h2-weight: 600;

  --text-h3: var(--text-body);

  --text-body: 13px;
  --text-body-line: 1.5;
  --text-body-weight: 400;

  --text-ui: 11px;
  --text-ui-line: 1.4;
  --text-ui-weight: 500;

  --text-meta: 10px;
  --text-meta-line: 1.4;
  --text-meta-weight: 400;

  /* Spacing — 8px base, tight rhythm per spec §2.3 */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-8: 20px;
  --space-10: 24px;
  --space-12: 32px;

  /* Border & shape — square is the brand */
  --radius-0: 0;
  --radius-tip: 2px;
  --hairline: 1px;

  /* Motion */
  --transition-default: 120ms ease-out;

  /* Elevation — only tooltips/hover-cards get a shadow */
  --shadow-tip: 0 4px 12px rgba(43, 40, 35, 0.08);

  /* Focus ring — accent at 30% opacity per spec §5 */
  --focus-ring: 0 0 0 2px rgba(30, 183, 151, 0.3);

  /* Paper noise — dark grain on light surface. Body references
     --noise-image so the theme can swap it for a light-on-dark variant
     without re-declaring the background-image rule. */
  --noise-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- dark paper ----------
   Warm-dark variant. Surfaces are deep brown (think a well-bound book
   under low light, not a tech dashboard); ink is warm cream. Accent
   values stay the same hex — the bright versions read well on dark —
   but --accent-link flips to point at --accent rather than
   --accent-hover, because the *darker* hover shade fails AA on dark
   surfaces.

   Toggled via [data-theme="dark"] on <html>. The default is dark
   (set as an HTML attribute so first paint is correct); a tiny inline
   script in <head> reads localStorage and switches to light if the
   visitor has chosen it, before stylesheets apply. */
[data-theme="dark"] body {
  background-blend-mode: soft-light;
}

[data-theme="dark"] {
  --accent-link: var(--accent);

  --surface-page: #1a1612;
  --surface-card: #221c16;
  --surface-card-nested: #1d1813;
  --surface-rail: #14110d;

  --ink-1: #f4ecdc;
  --ink-2: #cdc3b1;
  --ink-3: #97907f;
  --ink-4: #6e6859;

  --border-subtle: #2a241c;
  --border-strong: #463c30;

  --shadow-tip: 0 4px 12px rgba(0, 0, 0, 0.55);

  --noise-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.92 0 0 0 0 0.82 0 0 0 0.30 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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