/* The palette and the type, for every page on the site — the presentation * pages and the documentation alike. Values come from digline's own report * stylesheet (src/digline/report/render.py), so the site, the HTML report and * `digline view` are visibly one product. System faces only: nothing here is * fetched from anywhere. * * Three states, in this order: * * 1. light, the ground state; * 2. dark, when the system asks for it and the reader has not said otherwise; * 3. the reader's own choice, which wins over both. * * The choice lands in `data-md-color-scheme` — Material puts it on and * so does the toggle in the top bar, so one rule set serves both halves. */ :root { color-scheme: light dark; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── 1. light ─────────────────────────────────────────────────────────── */ :root { --bg: #ffffff; --ink: #16181d; --muted: #5b6270; --faint: #7a828f; --rule: #d8dce3; --rule-soft: #e6e9ee; --surface: #f5f6f8; --worse: #8a1c1c; /* a check that got worse */ --fine: #17552e; /* one that did not */ --link: #2f4f7a; --btn-bg: #ffffff; --btn-rule: #c3c9d3; /* The band at the foot of every page is dark in both states — only how dark changes, so that it still parts from the page behind it. */ --band-bg: #16181d; --band-ink: #e6e9ee; --band-muted: #98a0ad; --band-rule: #2c313a; } /* ── 2. dark, by system preference ────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-md-color-scheme="default"]), body:not([data-md-color-scheme="default"]) { --bg: #16181d; --ink: #e6e9ee; --muted: #98a0ad; --faint: #7a828f; --rule: #2c313a; --rule-soft: #23272f; --surface: #1c2027; --worse: #e29a9a; --fine: #8fc7a6; --link: #93b4dd; --btn-bg: #1c2027; --btn-rule: #3a414c; --band-bg: #0f1115; --band-ink: #e6e9ee; --band-muted: #98a0ad; --band-rule: #23272f; } } /* ── 3. dark, by choice ───────────────────────────────────────────────── */ [data-md-color-scheme="slate"] { color-scheme: dark; --bg: #16181d; --ink: #e6e9ee; --muted: #98a0ad; --faint: #7a828f; --rule: #2c313a; --rule-soft: #23272f; --surface: #1c2027; --worse: #e29a9a; --fine: #8fc7a6; --link: #93b4dd; --btn-bg: #1c2027; --btn-rule: #3a414c; --band-bg: #0f1115; --band-ink: #e6e9ee; --band-muted: #98a0ad; --band-rule: #23272f; } /* ── 3b. light, by choice ─────────────────────────────────────────────── */ [data-md-color-scheme="default"] { color-scheme: light; --bg: #ffffff; --ink: #16181d; --muted: #5b6270; --faint: #7a828f; --rule: #d8dce3; --rule-soft: #e6e9ee; --surface: #f5f6f8; --worse: #8a1c1c; --fine: #17552e; --link: #2f4f7a; --btn-bg: #ffffff; --btn-rule: #c3c9d3; --band-bg: #16181d; --band-ink: #e6e9ee; --band-muted: #98a0ad; --band-rule: #2c313a; }