/* ==========================================================================
   Design tokens — colour, type and layout scales.
   Light is the default; `html.dark` overrides only what changes.
   ========================================================================== */

:root {
  /* Type */
  --font-sans: "Space Grotesk", "Lucida Grande", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Layout */
  --max: 1080px;
  --gutter: 48px;
  --gutter-sm: 20px;

  /* Warm paper & ink — light */
  --paper: #faf8f3;
  --ink: #1f1b16;
  --muted: #6f685d;
  --rule: #e4ded2;
  --accent: #2f8f4a;
  --accent-soft: #e6efe0;
  --highlight: #f5ede4;

  /* Notebook chrome */
  --nb-bg: #f6f3ec;
  --nb-code-bg: #f2ece1;
  --nb-head-bg: #f0ebe1;

  /* Sticky topbar */
  --bar-bg: rgba(250, 248, 243, 0.72);
  --bar-shadow: rgba(31, 27, 22, 0.06);

  /* Syntax */
  --syn-key: #2c5578;
  --syn-str: #4f6a43;
  --syn-err: #a33b2a;
  --success: #4f6a43;

  /* Trajectory graph */
  --chart-faint: #d8d0c2;
  --node-role: #8f8475;
}

html.dark {
  /* Warm paper & ink — dark (espresso, not blue-black) */
  --paper: #1a1714;
  --ink: #ece6dc;
  --muted: #9a9184;
  --rule: #302b25;
  --accent: #5cbf72;
  --accent-soft: #1f3524;
  --highlight: #2a231c;

  --nb-bg: #211d19;
  --nb-code-bg: #1e1a16;
  --nb-head-bg: #211d19;

  --bar-bg: rgba(26, 23, 20, 0.68);
  --bar-shadow: rgba(0, 0, 0, 0.4);

  --syn-key: #7fa9cf;
  --syn-str: #9dbd85;
  --syn-err: #e08d7d;
  --success: #9dbd85;

  --chart-faint: #4a443c;
  --node-role: #8a7f70;
}