/* =====================================================================
   Signal · design tokens
   Precision you can see: a cool paper page around a dark, gridded
   "light table" instrument. Light by default, full dark mode.
   Dark mode follows the visitor's system setting unless the page sets
   data-theme="light" | "dark" on <html> (the theme button does this).
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  /* ---- page ---- */
  --paper: #eceff4;         /* page background: cool, never cream */
  --surface: #ffffff;       /* panels, plans, tables */
  --ink: #131a2c;           /* text and the 2px proof rules */
  --muted: #5d6680;         /* secondary text */
  --line: #d3d8e3;          /* hairlines, borders */

  /* ---- signal colours ---- */
  --accent: #1f5bff;        /* cobalt: links, primary buttons, group labels */
  --accent-ink: #ffffff;    /* text on cobalt */
  --accent-soft: #e3eaff;   /* tinted plan, highlighted column, inline code */
  --glow: #8fe3ff;          /* cyan: selected outlines and the second data series */
  --lime: #b7f05a;          /* the one "add / new" action on the instrument */
  --lime-ink: #13210a;
  --violet: #7a5cff;        /* third data series */

  /* ---- the light table (always dark, in both themes) ---- */
  --table: #0d1324;
  --table-grid: #1a2238;
  --table-glass: #18233f;   /* tiles on the table */
  --table-ink: #e8ecf6;
  --table-muted: #8b96b4;
  --table-shadow: 0 30px 60px -30px rgba(13, 19, 36, 0.55);

  /* ---- status marks ---- */
  --ok: #17865a;            /* filled dot: done, tested, included */
  --built: #b07400;         /* ring: built, pending, partly */
  --no: #8a93aa;            /* grey dot: not available */

  /* ---- code ---- */
  --code-bg: #131a2c;
  --code-ink: #dfe6f7;

  /* ---- type ---- */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --fs-h1: clamp(40px, 5.6vw, 68px);
  --fs-h2: clamp(30px, 3.6vw, 44px);
  --fs-h3: 21px;
  --fs-lede: 19px;
  --fs-intro: 18px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-figure: clamp(30px, 3.4vw, 42px);

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 72px; --s-9: 96px;
  --wrap: 1120px;
  --gutter: 16px;

  /* ---- shape ---- */
  --r-xs: 4px; --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 16px; --r-pill: 999px;

  /* ---- motion: it moves when you touch it ---- */
  --ease: ease;
  --plug: cubic-bezier(0.2, 0.9, 0.3, 1.2);   /* a tile plugging in */
  --d-move: 0.25s;                            /* tiles settling into place */
  --d-bar: 0.4s;                              /* bars re-measuring */
  --d-plug: 0.45s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1422; --surface: #161d2f; --ink: #e8ecf6; --muted: #98a2bd; --line: #26304a;
    --accent: #5b84ff; --accent-ink: #0b1020; --accent-soft: #1b2648;
    --table: #080c18; --table-grid: #141b2e; --table-glass: #1a2645;
    --ok: #3ccf8e; --built: #f0b43c; --no: #6d7792; --code-bg: #0a0f1c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1422; --surface: #161d2f; --ink: #e8ecf6; --muted: #98a2bd; --line: #26304a;
  --accent: #5b84ff; --accent-ink: #0b1020; --accent-soft: #1b2648;
  --table: #080c18; --table-grid: #141b2e; --table-glass: #1a2645;
  --ok: #3ccf8e; --built: #f0b43c; --no: #6d7792; --code-bg: #0a0f1c;
  color-scheme: dark;
}