/* The roles every colour of the site plays (Maxim, 28 October 2026: dark mode). One layer of tokens, declared here first
   and read by every later sheet: the surfaces in tiers (page, card, panel head and popover, sidebar), the ink and the muted
   text, the lines, the shadows, the chart series and the mixing bases the house style's shades are made with. The light
   values are those calm-ui.css had; the dark set is a warm ink one tier away from the sidebar, nothing pure black or
   pure white. :root[data-theme=dark] (0,2,0) beats every plain :root block of the later sheets, so sheet order no
   longer matters; the device's preference paints dark before any script runs; print pins light at the end so it beats
   both dark blocks. .theme-light and .theme-dark put a block in the other theme (Huisstijl's sample, shown twice).
   scripts/theme-literals.mjs keeps every other sheet free of new colour literals. */
:root,.theme-light{color-scheme:light;
 --surface:#f7f8fa;--surface-2:#fff;--surface-3:#f1f3f5;--surface-nav:#f1f3f5;
 --ink:#27313a;--muted:#626c75;--line:#e1e5e9;--line-strong:#b9c0c7;--on-ink:#f7f8fa;--on-ink-muted:#c3cad0;
 --shadow:#18111330;--shadow-light:#18111312;--backdrop:#26152066;--thumb-bg:#fff;--tour-dim:#1811139e;
 --good:#0e6656;--good-bg:#e0f2ed;--good-line:#b9dccb;--amber:#7a5410;--amber-bg:#fbf3e3;--amber-line:#efdfb9;--violet:#553066;--img-dim:1;--atmosphere:#20131f;--on-atmosphere:#d9d1d3;--hero-ink:#574e50;
 --chart-1:#ef2535;--chart-2:#272129;--chart-3:#84747b;--chart-4:#b75560;--chart-5:#c9949d;--chart-6:#604956;
 --chart-7:#aaa2a5;--chart-8:#d9c6ca;--chart-pv:#d18a00;--chart-load:#2563eb;--chart-grid:#8750ba;--chart-battery:#008568;--chart-ev:#6b4ad6;--chart-gain:#188a54;--chart-loss:#cf3943;
 --tone-n3-bg:#a50f15;--tone-n3-fg:#ffffff;--tone-n2-bg:#ef8a7a;--tone-n2-fg:#181113;--tone-n1-bg:#fbd5cc;--tone-n1-fg:#181113;--tone-zero-bg:#fbe6a2;--tone-zero-fg:#181113;--tone-p1-bg:#cfe9dc;--tone-p1-fg:#181113;--tone-p2-bg:#6fbf9f;--tone-p2-fg:#181113;--tone-p3-bg:#0b6e55;--tone-p3-fg:#ffffff;--tone-base-bg:#f6f4f4;--tone-base-fg:#181113;--tone-off-bg:#e4e1e2;--tone-off-fg:#4a4245;
 --mix-base:#fff;--mix-deep:#14080b;--mix-hover:#000}
/* The dark set, twice: once for the choice, once for the device (the two blocks are kept identical by tests/theme.test.js).
   The eight house-style tokens too, as brand-colours.js colourRoles computes them for the default red on the third
   tier (the lightest dark surface), so an installer with the default colours is right before /api/branding answers. */
:root[data-theme=dark],.theme-dark{color-scheme:dark;
 --surface:#151316;--surface-2:#1e1b1f;--surface-3:#27232a;--surface-nav:#1a171b;
 --ink:#ebe6e8;--muted:#a69ca1;--line:#332d33;--line-strong:#766d77;--on-ink:#151316;--on-ink-muted:#5c555f;
 --shadow:#00000080;--shadow-light:#00000040;--backdrop:#000000a6;--thumb-bg:#e7e3e5;--tour-dim:#000000b3;
 --good:#5fcf9f;--good-bg:#17302a;--good-line:#2f5a49;--amber:#e3b45a;--amber-bg:#332a16;--amber-line:#5a4a22;--violet:#c9a3df;--img-dim:.92;--atmosphere:#110c11;--on-atmosphere:#d9d1d3;--hero-ink:#574e50;
 --chart-1:#ef2535;--chart-2:#d9cfd4;--chart-3:#a8979f;--chart-4:#e07a86;--chart-5:#c9949d;--chart-6:#b89aae;
 --chart-7:#9c9298;--chart-8:#8a6f78;--chart-pv:#f0b03a;--chart-load:#6ea0ff;--chart-grid:#b58ae0;--chart-battery:#3fc39a;--chart-ev:#a48cf0;--chart-gain:#4fc98a;--chart-loss:#f0776f;
 --tone-n3-bg:#cf3f37;--tone-n3-fg:#ffffff;--tone-n2-bg:#8a3a37;--tone-n2-fg:#ffffff;--tone-n1-bg:#4a2a2c;--tone-n1-fg:#ebe6e8;--tone-zero-bg:#4a4426;--tone-zero-fg:#ebe6e8;--tone-p1-bg:#22403a;--tone-p1-fg:#ebe6e8;--tone-p2-bg:#2b6b58;--tone-p2-fg:#ffffff;--tone-p3-bg:#3fc39a;--tone-p3-fg:#111111;--tone-base-bg:#27232a;--tone-base-fg:#ebe6e8;--tone-off-bg:#332d33;--tone-off-fg:#a69ca1;
 --mix-base:var(--surface-2);--mix-deep:#fff;--mix-hover:#fff;
 --brand-primary:#c93730;--brand-on-primary:#fff;--brand-primary-fill:#ca3b34;--brand-primary-text:#d76b66;--brand-secondary:#c93730;--brand-on-secondary:#fff;--brand-secondary-fill:#ca3b34;--brand-secondary-text:#d76b66}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
 --surface:#151316;--surface-2:#1e1b1f;--surface-3:#27232a;--surface-nav:#1a171b;
 --ink:#ebe6e8;--muted:#a69ca1;--line:#332d33;--line-strong:#766d77;--on-ink:#151316;--on-ink-muted:#5c555f;
 --shadow:#00000080;--shadow-light:#00000040;--backdrop:#000000a6;--thumb-bg:#e7e3e5;--tour-dim:#000000b3;
 --good:#5fcf9f;--good-bg:#17302a;--good-line:#2f5a49;--amber:#e3b45a;--amber-bg:#332a16;--amber-line:#5a4a22;--violet:#c9a3df;--img-dim:.92;--atmosphere:#110c11;--on-atmosphere:#d9d1d3;--hero-ink:#574e50;
 --chart-1:#ef2535;--chart-2:#d9cfd4;--chart-3:#a8979f;--chart-4:#e07a86;--chart-5:#c9949d;--chart-6:#b89aae;
 --chart-7:#9c9298;--chart-8:#8a6f78;--chart-pv:#f0b03a;--chart-load:#6ea0ff;--chart-grid:#b58ae0;--chart-battery:#3fc39a;--chart-ev:#a48cf0;--chart-gain:#4fc98a;--chart-loss:#f0776f;
 --tone-n3-bg:#cf3f37;--tone-n3-fg:#ffffff;--tone-n2-bg:#8a3a37;--tone-n2-fg:#ffffff;--tone-n1-bg:#4a2a2c;--tone-n1-fg:#ebe6e8;--tone-zero-bg:#4a4426;--tone-zero-fg:#ebe6e8;--tone-p1-bg:#22403a;--tone-p1-fg:#ebe6e8;--tone-p2-bg:#2b6b58;--tone-p2-fg:#ffffff;--tone-p3-bg:#3fc39a;--tone-p3-fg:#111111;--tone-base-bg:#27232a;--tone-base-fg:#ebe6e8;--tone-off-bg:#332d33;--tone-off-fg:#a69ca1;
 --mix-base:var(--surface-2);--mix-deep:#fff;--mix-hover:#fff;
 --brand-primary:#c93730;--brand-on-primary:#fff;--brand-primary-fill:#ca3b34;--brand-primary-text:#d76b66;--brand-secondary:#c93730;--brand-on-secondary:#fff;--brand-secondary-fill:#ca3b34;--brand-secondary-text:#d76b66}}
/* Dark-only names (28 October 2026, Maxim: "You did not have to change colors in light mode"). Light keeps the colours it
   had before dark mode: the sheets as they were, each rule followed by its dark copy; a chart's colour as the fallback of
   var(--d-<token>,<old colour>) (interactive-charts.js resolveTokens); an SVG mark as its old attribute with a .d-* class.
   These names and classes exist in the dark alone. */
:root[data-theme=dark],.theme-dark{--d-chart-1:var(--chart-1);--d-chart-2:var(--chart-2);--d-chart-3:var(--chart-3);--d-chart-4:var(--chart-4);--d-chart-loss:var(--chart-loss);--d-chart-gain:var(--chart-gain);--d-muted:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--d-chart-1:var(--chart-1);--d-chart-2:var(--chart-2);--d-chart-3:var(--chart-3);--d-chart-4:var(--chart-4);--d-chart-loss:var(--chart-loss);--d-chart-gain:var(--chart-gain);--d-muted:var(--muted)}}
.theme-light{--d-chart-1:initial;--d-chart-2:initial;--d-chart-3:initial;--d-chart-4:initial;--d-chart-loss:initial;--d-chart-gain:initial;--d-muted:initial}
:where(:root[data-theme=dark]) .d-stroke-line:not(:where(.theme-light *)),:where(.theme-dark) .d-stroke-line{stroke:var(--line)}:where(:root[data-theme=dark]) .d-stroke-line-strong:not(:where(.theme-light *)),:where(.theme-dark) .d-stroke-line-strong{stroke:var(--line-strong)}:where(:root[data-theme=dark]) .d-stroke-ink:not(:where(.theme-light *)),:where(.theme-dark) .d-stroke-ink{stroke:var(--ink)}:where(:root[data-theme=dark]) .d-stroke-chart-5:not(:where(.theme-light *)),:where(.theme-dark) .d-stroke-chart-5{stroke:var(--chart-5)}:where(:root[data-theme=dark]) .d-fill-muted:not(:where(.theme-light *)),:where(.theme-dark) .d-fill-muted{fill:var(--muted)}:where(:root[data-theme=dark]) .d-fill-good:not(:where(.theme-light *)),:where(.theme-dark) .d-fill-good{fill:var(--good)}:where(:root[data-theme=dark]) .d-stroke-good:not(:where(.theme-light *)),:where(.theme-dark) .d-stroke-good{stroke:var(--good)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .d-stroke-line:not(:where(.theme-light *)){stroke:var(--line)}:where(:root:not([data-theme=light])) .d-stroke-line-strong:not(:where(.theme-light *)){stroke:var(--line-strong)}:where(:root:not([data-theme=light])) .d-stroke-ink:not(:where(.theme-light *)){stroke:var(--ink)}:where(:root:not([data-theme=light])) .d-stroke-chart-5:not(:where(.theme-light *)){stroke:var(--chart-5)}:where(:root:not([data-theme=light])) .d-fill-muted:not(:where(.theme-light *)){fill:var(--muted)}:where(:root:not([data-theme=light])) .d-fill-good:not(:where(.theme-light *)){fill:var(--good)}:where(:root:not([data-theme=light])) .d-stroke-good:not(:where(.theme-light *)){stroke:var(--good)}}
/* A block in the other theme (.theme-light, .theme-dark): the aliases the older sheets declare on :root (--teal, --brand-ink,
   --reading-ink...) resolve where they are declared, against the root's tokens, so they are declared again here against
   the block's own. */
.theme-light,.theme-dark{--teal:var(--ink);--brand-ink:var(--ink);--brand-muted:var(--muted);--brand-line:var(--line);--brand-surface:var(--surface);--reading-ink:var(--ink);--reading-muted:var(--muted);--reading-line:var(--line);--reading-surface:var(--surface);background:var(--surface);color:var(--ink)}
/* Blocks that are dark in both themes (the docs and overview heroes, a plum running into the house style's red): the
   shades as the light theme mixes them, declared on the block so they resolve there, whatever the theme mixes with. */
.docs-hero,.overview-hero{--brand-primary-hover:color-mix(in srgb,var(--brand-primary-fill) 84%,#000);--brand-primary-deep:color-mix(in srgb,var(--brand-primary) 45%,#14080b);--brand-primary-light:color-mix(in srgb,var(--brand-primary) 62%,#fff);--brand-secondary-hover:color-mix(in srgb,var(--brand-secondary-fill) 84%,#000);--brand-secondary-deep:color-mix(in srgb,var(--brand-secondary) 45%,#14080b)}
/* Paper is light (plan 2.7): the light set again, last, so it beats both dark blocks; dist/theme.js pins data-theme=light
   around printing for what JS colours (the charts, the house style's roles). */
@media print{:root,:root[data-theme=dark]{color-scheme:light;
 --d-chart-1:initial;--d-chart-2:initial;--d-chart-3:initial;--d-chart-4:initial;--d-chart-loss:initial;--d-chart-gain:initial;--d-muted:initial;
 --surface:#fff;--surface-2:#fff;--surface-3:#f1f3f5;--surface-nav:#f1f3f5;
 --ink:#27313a;--muted:#626c75;--line:#e1e5e9;--line-strong:#b9c0c7;--on-ink:#f7f8fa;--on-ink-muted:#c3cad0;
 --shadow:#18111330;--shadow-light:#18111312;--backdrop:#26152066;--thumb-bg:#fff;--tour-dim:#1811139e;
 --good:#0e6656;--good-bg:#e0f2ed;--good-line:#b9dccb;--amber:#7a5410;--amber-bg:#fbf3e3;--amber-line:#efdfb9;--violet:#553066;--img-dim:1;--atmosphere:#20131f;--on-atmosphere:#d9d1d3;--hero-ink:#574e50;
 --chart-1:#ef2535;--chart-2:#272129;--chart-3:#84747b;--chart-4:#b75560;--chart-5:#c9949d;--chart-6:#604956;
 --chart-7:#aaa2a5;--chart-8:#d9c6ca;--chart-pv:#d18a00;--chart-load:#2563eb;--chart-grid:#8750ba;--chart-battery:#008568;--chart-ev:#6b4ad6;--chart-gain:#188a54;--chart-loss:#cf3943;
 --tone-n3-bg:#a50f15;--tone-n3-fg:#ffffff;--tone-n2-bg:#ef8a7a;--tone-n2-fg:#181113;--tone-n1-bg:#fbd5cc;--tone-n1-fg:#181113;--tone-zero-bg:#fbe6a2;--tone-zero-fg:#181113;--tone-p1-bg:#cfe9dc;--tone-p1-fg:#181113;--tone-p2-bg:#6fbf9f;--tone-p2-fg:#181113;--tone-p3-bg:#0b6e55;--tone-p3-fg:#ffffff;--tone-base-bg:#f6f4f4;--tone-base-fg:#181113;--tone-off-bg:#e4e1e2;--tone-off-fg:#4a4245;
 --mix-base:#fff;--mix-deep:#14080b;--mix-hover:#000;
 --brand-primary:#c93730;--brand-on-primary:#fff;--brand-primary-fill:#c93730;--brand-primary-text:#c93730;--brand-secondary:#c93730;--brand-on-secondary:#fff;--brand-secondary-fill:#c93730;--brand-secondary-text:#c93730}}