/* The design tokens of every page of gh-graph: the viewer (viewer/), the site (rg.maiastra.xyz, built from viewer/src/site),
   and the audit page (audit.page() puts this file inline, the page loading nothing).

   echoes.paris paper design (notion-tools/lib/super/echoes.paris.css + shared.css): warm paper, IBM Plex where it is
   installed or loaded, hairlines instead of shadows, square corners. Light by default, dark with the system, and
   data-theme on <html> overrides both (the viewer sets it; its canvas colours are in its THEMES). */
:root {
  --sans: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
  --page-bg: #F3F0E8; /* paper: page background */
  --page-text: #1B1A18; /* ink: default text */
  --text-dim: #6E695F; /* muted: labels, secondary text */
  --text-faint: #706B61; /* tertiary text (paths, hints) */
  --surface: rgba(243,240,232,0.94); /* translucent bars and panels over a graph */
  --surface-solid: #ECE8DD; /* opaque inputs, dropdowns, cards */
  --border: #D8D2C5; /* rule: outlines */
  --border-strong: #B9B2A3; /* rule-strong: buttons, hovered inputs; an earlier value */
  --accent: #2F4B9A; /* focus, selection, active controls; a current value */
  --on-accent: #F3F0E8; /* text on an accent fill */
  --accent-soft: rgba(47,75,154,0.10); /* selected row: accent as a tint */
  --accent-soft-hover: rgba(47,75,154,0.18);
  --cell-used-edge: rgba(0, 0, 0, 0.3); /* outline of a filled cell of a Grasshopper panel */
  --row-hover: #E2DDCF; /* hovered row; the empty part of a track */
  --tooltip-bg: rgba(243,240,232,0.97);
  --warn: #c2410c; /* a regression, a fault */
  --warn-soft: rgba(194,65,12,0.12); /* a fault as a tint */
  --good: #3f7d5a; /* a plugin shipped with Rhino, a level reached */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #151412; --page-text: #ECE7DC; --text-dim: #A09A8F; --text-faint: #858074;
    --surface: rgba(21,20,18,0.94); --surface-solid: #1D1B18; --border: #2F2C27; --border-strong: #4A463F;
    --accent: #93A9E8; --on-accent: #151412; --accent-soft: rgba(147,169,232,0.14); --accent-soft-hover: rgba(147,169,232,0.25);
    --row-hover: #26231F; --tooltip-bg: rgba(21,20,18,0.96); --warn: #f59e0b; --warn-soft: rgba(245,158,11,0.16); --good: #7fb89f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #151412; --page-text: #ECE7DC; --text-dim: #A09A8F; --text-faint: #858074;
  --surface: rgba(21,20,18,0.94); --surface-solid: #1D1B18; --border: #2F2C27; --border-strong: #4A463F;
  --accent: #93A9E8; --on-accent: #151412; --accent-soft: rgba(147,169,232,0.14); --accent-soft-hover: rgba(147,169,232,0.25);
  --row-hover: #26231F; --tooltip-bg: rgba(21,20,18,0.96); --warn: #f59e0b; --warn-soft: rgba(245,158,11,0.16); --good: #7fb89f;
}