/* Illustration theme: the colour palette shared by the article illustrations
   in this folder, light and dark. illustration-theme.js sets html[data-theme]
   from the site; each illustration keeps its own fonts and sizes.
   Dark values follow the site's dark tokens (dist/css/republic.css): the page
   is night (#121212), the plate a step darker so it reads as inset. */

/* .amber-ground: an element with a full peach fill. Peach stays peach in
   dark mode, so what sits on it keeps the light palette: add the class to
   the filled element (or to SVG text drawn over a filled shape). */
:root,
.amber-ground {
    color-scheme: light;

    --page: #ffffff; /* behind the plate: the article background */
    --plate: #fdfdfd;
    --plate-line: #e3e3e3;

    --paper: #ffffff;
    --paper-2: #ffffff; /* inner panel */
    --ink: #2a2a2a; /* near-black */
    --ink-soft: #6e6e6e; /* secondary text */
    --ink-faint: #949494; /* captions / hints */

    --amber: #ffc2b4; /* peach — highlight / hot quadrant fill */
    --amber-soft: #ffd9cf;
    --amber-tint: #ffe7e0;
    --amber-wash: #ffeae7; /* hatched areas */
    --slate: #dad8cd; /* warm stone — structure */
    --slate-deep: #b7b4a6;
    --slate-dark: #908d80;

    --line: #e8e8e8; /* hairline */
    --line-strong: #cbc8be;
    --frame: #2a2a2a; /* plate / matrix frame */
    --gui-stroke: #c2c2c2;
    --gui-fill: #f4f4f2;
    --gui-fill-2: #ededed;
    --gui-chrome: #ededed;
    --ok: #2a2a2a;
    --danger: #e80007;
    --panel: #fcfcfb; /* side panel inside a GUI window */
    --scrim: rgb(42 42 42 / 0.08); /* behind a modal */
}

.amber-ground {
    color: var(--ink);
}

/* The site's iframe-autosize controller sizes the iframe to its content, so
   no scrollbar is ever needed. A classic (non-overlay) scrollbar that appears
   while it settles takes 15px of width, the SVGs reflow shorter, and it stays:
   a visible strip in dark mode. Hide it; the page still scrolls on its own. */
html {
    scrollbar-width: none;
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --page: #121212;
    --plate: #0b0b0b;
    --plate-line: #242424;

    --paper: #1a1a1a;
    --paper-2: #1a1a1a;
    --ink: #f1efe9; /* bone */
    --ink-soft: #b1aea6;
    --ink-faint: #85827b;

    --amber: #ffc2b4; /* stays peach; content on it uses .amber-ground */
    --amber-soft: #6b3f35;
    --amber-tint: #3d2620; /* dark peach: behind text */
    --amber-wash: #2e1d19;
    --slate: #3a3832;
    --slate-deep: #57544b;
    --slate-dark: #807c70;

    --line: #2a2a2a;
    --line-strong: #46443e;
    --frame: #f1efe9;
    --gui-stroke: #4a4a4a;
    --gui-fill: #202020;
    --gui-fill-2: #272727;
    --gui-chrome: #272727;
    --ok: #f1efe9;
    --danger: #ff8286; /* the site's dark accent red */
    --panel: #151515;
    --scrim: rgb(0 0 0 / 0.45);
}