/* The single source of truth for colour, type, space, and motion.
 *
 * lab.css pulls this in with @import, so it lands inside the bundle. The static
 * pages (reading views, credits) link it directly, ahead of their own stylesheet.
 * 404.html deliberately inlines its own copy of these values so it still renders
 * when nothing else on the site can load; keep the two in step.
 *
 * Day and night are the same token names with different values, swapped by
 * body[data-light], so a rule almost never needs to name a theme. */

:root {
  color-scheme: light;

  /* Ground. Three values, not one: the room's walls are near-white, so the page
   * behind it has to sit lower or the object dissolves into the background.
   * --stage is the field the room is composed on; --surface lifts panels off it. */
  --paper: #e9e7dd;
  --stage: #d7d3c4;
  --surface: #f7f6f0;

  /* Ink. --muted is the supporting voice; it holds 4.6:1 on --paper. */
  --ink: #232a26;
  --muted: #5f6a62;
  --line: #d0d4c9;

  /* One accent, carrying the oak-and-sage palette of the room itself. */
  --green: #2f6046;
  --green-soft: #b9d2b9;

  /* Type. DM Sans throughout; IBM Plex Mono only where the content is
   * literally machine output (the shell, the clock, file listings). */
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: clamp(28px, 3.1vw, 38px);
  --display: clamp(38px, 5vw, 70px);

  --leading-display: 1;
  --leading-tight: 1.18;
  --leading-body: 1.62;
  --tracking-display: -0.036em;
  --tracking-tight: -0.014em;

  /* Space. 4px base; the named steps are the only ones layout should reach for. */
  --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;

  /* Radius carries hierarchy: controls are tighter than the surfaces holding them. */
  --radius-sm: 7px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows are tinted with the ink, never neutral grey, so they read as
   * shadows cast in this room's warm light. */
  --shadow-raised: 0 1px 2px rgb(35 42 38 / 5%), 0 8px 22px -10px rgb(35 42 38 / 14%);
  --shadow-panel: 0 2px 5px rgb(35 42 38 / 6%), 0 28px 64px -18px rgb(35 42 38 / 26%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --base: 260ms;
  --slow: 620ms;

  /* Browser UI colour, mirrored into <meta name="theme-color"> by lab.js and
   * scripts/seo-meta.mjs. One value per theme, everywhere. */
  --browser-chrome: #e9e7dd;
}

body[data-light="night"] {
  color-scheme: dark;

  --paper: #1e2825;
  --stage: #141c1a;
  --surface: #27322e;

  --ink: #e6ebe1;
  --muted: #a3b1a6;
  --line: #384740;

  --green: #a8d0a6;
  --green-soft: #3c5a45;

  --shadow-raised: 0 1px 2px rgb(0 0 0 / 24%), 0 8px 22px -10px rgb(0 0 0 / 42%);
  --shadow-panel: 0 2px 5px rgb(0 0 0 / 30%), 0 28px 64px -18px rgb(0 0 0 / 60%);

  --browser-chrome: #1e2825;
}