/* AlgeBench shared design tokens — the single source of truth for both themes.
 *
 * Direction: "Slate & Graph Paper" (docs/design/visual-restyle-brief.md).
 * Dark is the default (bare :root) matching the app's history; light overrides
 * under html[data-theme="light"]. Pages opt in by linking this file BEFORE
 * their own stylesheet; theme-init.js (or server-side stamping on /prove and
 * /renderproof) sets data-theme pre-paint.
 *
 * Rules of the system:
 *  - no gradients as panel paint, no backdrop blur — elevation is border +
 *    hard shadow (print, not glow);
 *  - one accent family (ochre); Clay is reserved for errors/destructive;
 *  - every color in page CSS should resolve to one of these tokens.
 */

/* ── Webfonts (self-hosted, OFL; served by /fonts/{file}) ─────────────── */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/zilla-slab-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/zilla-slab-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ── Dark — "Slate Lecture" (default) ─────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Palette: Slate / Board / Chalk / Dust / Ochre / Clay */
  --page-bg: #161c19;
  --panel-bg: #1e2621;
  --text-color: #e8e6da;
  --muted-color: #97a29a;
  --title-fg: #e0ded2;
  --border-color: rgba(232, 230, 218, 0.14);
  --accent-color: #d9a441;
  --accent: var(--accent-color);       /* legacy alias (prove/renderproof CSS) */
  --math-fg: var(--text-color);        /* KaTeX is ink, not decoration */

  --btn-bg: #28322c;
  --btn-fg: var(--text-color);
  --btn-border: rgba(232, 230, 218, 0.18);
  --btn-hover: #2f3a33;

  --err-fg: #c9705f;
  --err-bg: #291a16;
  --err-border: #6e4036;

  --chip-bg: rgba(217, 164, 65, 0.12);
  --scrim: rgba(10, 14, 12, 0.55);
  /* The 3D viewport is a slate board in BOTH themes (scene JSON colors are
     tuned for a dark surface); light mode just lifts it slightly so it reads
     as a deliberate chalkboard against the paper chrome. camera.js reads this. */
  --canvas-bg: #0d1310;

  /* Elevation — print, not glow */
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Type */
  --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space / shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-full: 999px;

  /* Motion */
  --dur-quick: 140ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── Light — "Graph Paper" ────────────────────────────────────────────── */

html[data-theme="light"] {
  color-scheme: light;

  /* Palette: Paper / Card / Ink / Graphite / Ochre / Clay */
  --page-bg: #f3f4ee;
  --panel-bg: #fbfcf8;
  --text-color: #253029;
  --muted-color: #68726b;
  --title-fg: #2c3a33;
  --border-color: rgba(37, 48, 41, 0.16);
  --accent-color: #9a6d1c;

  --btn-bg: #eceee5;
  --btn-fg: var(--text-color);
  --btn-border: rgba(37, 48, 41, 0.22);
  --btn-hover: #e4e7dc;

  --err-fg: #a8503f;
  --err-bg: #f9edea;
  --err-border: #e4c3ba;

  --chip-bg: rgba(154, 109, 28, 0.10);
  --scrim: rgba(37, 48, 41, 0.35);

  --shadow-sm: 0 2px 0 rgba(37, 48, 41, 0.10);
  --shadow-lg: 0 12px 32px rgba(37, 48, 41, 0.16);
  --canvas-bg: #26302a;
}

/* ── EXPERIMENTAL palette variants ────────────────────────────────────────
   Re-map the palette tokens under html[data-palette] while keeping the
   dark/light structure, type, spacing, and elevation identical. theme-init.js
   stamps data-palette from ?palette=<name> (persisted in localStorage;
   ?palette=slate resets to the default). Main app only for now.

   blueprint — drafting room: Prussian blue slate, vellum paper, sanguine
   pencil accent.  sepia — manuscript library: warm umber, cream paper,
   viridian ink accent. */

html[data-palette="blueprint"] {
  --page-bg: #141a21;
  --panel-bg: #1c2530;
  --text-color: #dee6ed;
  --muted-color: #8da0af;
  --title-fg: #d5dee6;
  --border-color: rgba(222, 230, 237, 0.14);
  --accent-color: #dd8148;
  --btn-bg: #253141;
  --btn-border: rgba(222, 230, 237, 0.18);
  --btn-hover: #2c3a4d;
  --err-fg: #c96257;
  --err-bg: #2b1a15;
  --err-border: #6f4136;
  --chip-bg: rgba(221, 129, 72, 0.12);
  --scrim: rgba(8, 12, 17, 0.55);
  --canvas-bg: #0e141b;
}
html[data-palette="blueprint"][data-theme="light"] {
  --page-bg: #f0f3f5;
  --panel-bg: #fafcfd;
  --text-color: #243240;
  --muted-color: #61707e;
  --title-fg: #2b3b4a;
  --border-color: rgba(36, 50, 64, 0.16);
  --accent-color: #b25b2b;
  --btn-bg: #e7ecf0;
  --btn-border: rgba(36, 50, 64, 0.22);
  --btn-hover: #dfe6ec;
  --err-fg: #a34a38;
  --err-bg: #f9ece9;
  --err-border: #e4c1b7;
  --chip-bg: rgba(178, 91, 43, 0.10);
  --scrim: rgba(36, 50, 64, 0.35);
  --canvas-bg: #223040;
  --shadow-sm: 0 2px 0 rgba(36, 50, 64, 0.10);
  --shadow-lg: 0 12px 32px rgba(36, 50, 64, 0.16);
}

html[data-palette="sepia"] {
  --page-bg: #1d1915;
  --panel-bg: #272119;
  --text-color: #eae2d3;
  --muted-color: #a4978a;
  --title-fg: #e2d9c9;
  --border-color: rgba(234, 226, 211, 0.14);
  --accent-color: #55a68e;
  --btn-bg: #322a20;
  --btn-border: rgba(234, 226, 211, 0.18);
  --btn-hover: #3a3126;
  --err-fg: #c9705f;
  --err-bg: #291a16;
  --err-border: #6e4036;
  --chip-bg: rgba(85, 166, 142, 0.12);
  --scrim: rgba(16, 13, 10, 0.55);
  --canvas-bg: #14110d;
}
html[data-palette="sepia"][data-theme="light"] {
  --page-bg: #f5f1e8;
  --panel-bg: #fcfaf4;
  --text-color: #2e2820;
  --muted-color: #6f675c;
  --title-fg: #3a3227;
  --border-color: rgba(46, 40, 32, 0.16);
  --accent-color: #2e7a66;
  --btn-bg: #ede8db;
  --btn-border: rgba(46, 40, 32, 0.22);
  --btn-hover: #e5dfd0;
  --err-fg: #a8503f;
  --err-bg: #f9ede8;
  --err-border: #e4c3b7;
  --chip-bg: rgba(46, 122, 102, 0.10);
  --scrim: rgba(46, 40, 32, 0.35);
  --canvas-bg: #2a2620;
  --shadow-sm: 0 2px 0 rgba(46, 40, 32, 0.10);
  --shadow-lg: 0 12px 32px rgba(46, 40, 32, 0.16);
}

/* plum — ink & orchid: aubergine charcoal / lavender-grey paper, wisteria
   accent.  cerulean — observatory: deep space blue, cool paper, cerulean
   accent.  graphite — pencil monochrome: pure greys, the accent is contrast
   itself. */

html[data-palette="plum"] {
  --page-bg: #18151e;
  --panel-bg: #211d29;
  --text-color: #e7e3ee;
  --muted-color: #9d94ac;
  --title-fg: #ded8e8;
  --border-color: rgba(231, 227, 238, 0.14);
  --accent-color: #a98fd6;
  --btn-bg: #2b2537;
  --btn-border: rgba(231, 227, 238, 0.18);
  --btn-hover: #332c41;
  --err-fg: #c96b64;
  --err-bg: #2a1917;
  --err-border: #6e4036;
  --chip-bg: rgba(169, 143, 214, 0.14);
  --scrim: rgba(12, 10, 16, 0.55);
  --canvas-bg: #100d15;
}
html[data-palette="plum"][data-theme="light"] {
  --page-bg: #f3f1f6;
  --panel-bg: #fbfafd;
  --text-color: #292336;
  --muted-color: #6e6880;
  --title-fg: #332c45;
  --border-color: rgba(41, 35, 54, 0.16);
  --accent-color: #6d4fa8;
  --btn-bg: #eae7f0;
  --btn-border: rgba(41, 35, 54, 0.22);
  --btn-hover: #e2dee9;
  --err-fg: #a8503f;
  --err-bg: #f9edea;
  --err-border: #e4c3ba;
  --chip-bg: rgba(109, 79, 168, 0.10);
  --scrim: rgba(41, 35, 54, 0.35);
  --canvas-bg: #2a2438;
  --shadow-sm: 0 2px 0 rgba(41, 35, 54, 0.10);
  --shadow-lg: 0 12px 32px rgba(41, 35, 54, 0.16);
}

html[data-palette="cerulean"] {
  --page-bg: #101820;
  --panel-bg: #17222c;
  --text-color: #dde8f0;
  --muted-color: #8aa0b0;
  --title-fg: #d3e1ea;
  --border-color: rgba(221, 232, 240, 0.14);
  --accent-color: #57b1d4;
  --btn-bg: #20303d;
  --btn-border: rgba(221, 232, 240, 0.18);
  --btn-hover: #273a4a;
  --err-fg: #c9705f;
  --err-bg: #291a16;
  --err-border: #6e4036;
  --chip-bg: rgba(87, 177, 212, 0.14);
  --scrim: rgba(6, 11, 15, 0.55);
  --canvas-bg: #0a1219;
}
html[data-palette="cerulean"][data-theme="light"] {
  --page-bg: #eff4f7;
  --panel-bg: #fafcfd;
  --text-color: #1e3240;
  --muted-color: #5a7181;
  --title-fg: #274050;
  --border-color: rgba(30, 50, 64, 0.16);
  --accent-color: #22759c;
  --btn-bg: #e4edf2;
  --btn-border: rgba(30, 50, 64, 0.22);
  --btn-hover: #dbe7ee;
  --err-fg: #a8503f;
  --err-bg: #f9edea;
  --err-border: #e4c3ba;
  --chip-bg: rgba(34, 117, 156, 0.10);
  --scrim: rgba(30, 50, 64, 0.35);
  --canvas-bg: #1c2f3d;
  --shadow-sm: 0 2px 0 rgba(30, 50, 64, 0.10);
  --shadow-lg: 0 12px 32px rgba(30, 50, 64, 0.16);
}

html[data-palette="graphite"] {
  --page-bg: #161616;
  --panel-bg: #1f1f1f;
  --text-color: #e9e8e4;
  --muted-color: #9c9b96;
  --title-fg: #e0dfda;
  --border-color: rgba(233, 232, 228, 0.14);
  --accent-color: #cfcecb;
  --btn-bg: #2a2a2a;
  --btn-border: rgba(233, 232, 228, 0.18);
  --btn-hover: #333333;
  --err-fg: #c9705f;
  --err-bg: #291a16;
  --err-border: #6e4036;
  --chip-bg: rgba(233, 232, 228, 0.10);
  --scrim: rgba(0, 0, 0, 0.55);
  --canvas-bg: #0e0e0e;
}
html[data-palette="graphite"][data-theme="light"] {
  --page-bg: #f4f4f2;
  --panel-bg: #fcfcfb;
  --text-color: #232322;
  --muted-color: #6d6d69;
  --title-fg: #2c2c2a;
  --border-color: rgba(35, 35, 34, 0.16);
  --accent-color: #3a3a38;
  --btn-bg: #ebebe8;
  --btn-border: rgba(35, 35, 34, 0.22);
  --btn-hover: #e3e3df;
  --err-fg: #a8503f;
  --err-bg: #f9edea;
  --err-border: #e4c3ba;
  --chip-bg: rgba(58, 58, 56, 0.08);
  --scrim: rgba(35, 35, 34, 0.35);
  --canvas-bg: #262626;
  --shadow-sm: 0 2px 0 rgba(35, 35, 34, 0.10);
  --shadow-lg: 0 12px 32px rgba(35, 35, 34, 0.16);
}

/* contrast — accessibility-first high contrast: true black/white surfaces,
   strong borders, luminance-driven yellow/amber accent (readable under every
   color-vision deficiency; distinction never relies on hue alone). */

html[data-palette="contrast"] {
  --page-bg: #000000;
  --panel-bg: #0d0d0d;
  --text-color: #ffffff;
  --muted-color: #c9c9c9;
  --title-fg: #ffffff;
  --border-color: rgba(255, 255, 255, 0.38);
  --accent-color: #ffd23e;
  --btn-bg: #1a1a1a;
  --btn-border: rgba(255, 255, 255, 0.55);
  --btn-hover: #292929;
  --err-fg: #ff9a80;
  --err-bg: #38130a;
  --err-border: #a85a44;
  --chip-bg: rgba(255, 210, 62, 0.18);
  --scrim: rgba(0, 0, 0, 0.72);
  --canvas-bg: #000000;
}
html[data-palette="contrast"][data-theme="light"] {
  --page-bg: #ffffff;
  --panel-bg: #ffffff;
  --text-color: #000000;
  --muted-color: #3d3d3d;
  --title-fg: #000000;
  --border-color: rgba(0, 0, 0, 0.48);
  /* Dark blue, not amber: amber's luminance collides with the error red
     under deuteranopia; blue stays separable under every CVD type. */
  --accent-color: #00509e;
  --btn-bg: #f0f0f0;
  --btn-border: rgba(0, 0, 0, 0.60);
  --btn-hover: #e3e3e3;
  --err-fg: #8a1f00;
  --err-bg: #ffe9e2;
  --err-border: #c07a5e;
  --chip-bg: rgba(107, 68, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.5);
  --canvas-bg: #111111;
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.30);
}

/* ── Global reduced-motion floor ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-slow: 0ms;
  }
}