@misoto22/folio 0.0.0 → 0.17.0

package/dist/themes.css

@@ -0,0 +1,607 @@
+/*
+ * The theming axes.
+ *
+ * Seven of them, each an attribute, each re-pointing tokens that already
+ * exist. No component is touched by any of it, and nothing here introduces a
+ * token — a theme that needed a new token would be a second design system
+ * wearing the first one's name.
+ *
+ * The axes are independent on purpose. A named preset is a combination, not a
+ * block of its own, so "warm surface with sharp corners" is reachable even
+ * though nobody shipped it as a preset.
+ *
+ * Every axis has an unset default: the White Reset is what you get by writing
+ * no attribute at all.
+ */
+
+/* ─── Accent ───────────────────────────────────────────────────────────────
+   The one token every other axis was written to prove could move.
+
+   Law 7 says the accent IS ink, and this does not walk that back — `ink` is
+   the default and it is the system as it ships. What this axis demonstrates is
+   the thing underneath the law: every component reads `--accent`, which points
+   at `--red`, which points at `--clay`. ONE token. A consumer whose brand is
+   not monochrome re-points it and the whole system follows without a component
+   being touched.
+
+   This lived in the documentation site's own stylesheet for four releases,
+   which meant the site could show it and no consumer could have it — and the
+   package meanwhile said in three places that no such attribute existed. It
+   does now, and it is derived from these selectors like every other axis.
+
+   Two values per accent, not one. `--clay` is the MARK — a fill, a rule, a
+   pill — and `--clay-ink` is the same colour set as TEXT, which has to clear
+   AA against paper and therefore cannot always be the same hex. That
+   distinction already existed in the token layer for exactly this reason;
+   these are the first accents to need it.
+
+   Measured with the WCAG 2.x relative-luminance formula, against the White
+   Reset's own grounds (`--paper` #ffffff light, #0d0d0d dark). AA is 4.5:1 for
+   text and 3:1 for a UI mark; the third column is `--clay-ink` over the 10% /
+   14% wash `--accent-on-muted` is printed on.
+
+       accent    light: mark / ink / on wash     dark: mark / ink / on wash
+       ink       19.03   19.03   15.39           17.65   17.65   12.51
+       clay       7.45    8.77    7.51            7.41    9.13    7.51
+       forest     7.59    8.66    7.44            8.91   10.52    8.42
+       cobalt     8.05    9.21    7.86            8.41   10.23    8.27
+       plum       8.49    9.55    8.12            8.74   10.43    8.41
+       moss       5.80    8.30    7.24            8.76   11.32    9.06
+       ember      5.46    6.34    5.47            7.81    8.86    7.31
+
+   `--accent-foreground` resolves to `--paper`, so paper printed ON the accent
+   fill is the mark column read the other way up. */
+
+/* The default, NAMED. "Ink" used to be spelled "write no attribute", which
+   works exactly once, at the root: inside an element that already carries an
+   accent, an unset accent is not ink, it is whatever the ancestor said. */
+[data-accent='ink'] {
+  --clay: var(--ink);
+  --clay-ink: var(--ink);
+  --red-soft: rgba(16, 16, 16, 0.07);
+}
+
+/* The warm editorial red the site carried before the White Reset. */
+[data-accent='clay'] {
+  --clay: #8a3f24;
+  --clay-ink: #7a3720;
+  --red-soft: rgba(138, 63, 36, 0.1);
+}
+/* A cool neutral green — quiet enough to sit under a lot of type. */
+[data-accent='forest'] {
+  --clay: #2f5d42;
+  --clay-ink: #2a5439;
+  --red-soft: rgba(47, 93, 66, 0.1);
+}
+/* The most conventional software blue that still clears AA on paper. */
+[data-accent='cobalt'] {
+  --clay: #2b4c9b;
+  --clay-ink: #27448a;
+  --red-soft: rgba(43, 76, 155, 0.1);
+}
+/* A darker chroma for a brand that wants presence without heat. */
+[data-accent='plum'] {
+  --clay: #6b3a72;
+  --clay-ink: #613468;
+  --red-soft: rgba(107, 58, 114, 0.1);
+}
+/* A green-grey with almost no chroma left in it, for a dense working screen
+   where the accent has to mark a choice without becoming the loudest thing on
+   the page. The lowest-contrast mark of the six on paper, and deliberately so:
+   it is a rule and a fill more often than it is a word. */
+[data-accent='moss'] {
+  --clay: #566b52;
+  --clay-ink: #41533e;
+  --red-soft: rgba(86, 107, 82, 0.1);
+}
+
+/* A burnt orange for the Workbench preset: it marks a link or the current
+   state and nothing else, so it can carry heat without competing with the
+   photographs it sits beside. The lowest-contrast mark after moss; its
+   ink is a step darker so a link on a stone panel still clears AA. */
+[data-accent='ember'] {
+  --clay: #b8430a;
+  --clay-ink: #a83c08;
+  --red-soft: rgba(184, 67, 10, 0.1);
+}
+
+/* Re-derives the chain, on any element that names an accent.
+
+   A `var()` is substituted where it is DECLARED, not where it is read:
+   `--accent: var(--red)` is written on `:root` in `semantic.css`, so it
+   computes THERE — against the root's `--clay` — and what inherits down is the
+   answer, not the question. Re-pointing `--clay` on a descendant therefore
+   changed nothing at all, and every accent swatch, preview and thumbnail on a
+   themes rail painted the accent of the page rather than its own.
+
+   `--on-red` is here for the same reason: it resolves to `--paper`, so an
+   element naming its own surface needs the foreground re-derived against that
+   surface rather than against the document's. */
+[data-accent] {
+  --red: var(--clay);
+  --red-ink: var(--clay);
+  --on-red: var(--paper);
+  --accent: var(--red);
+  --accent-hover: var(--red-ink);
+  --accent-muted: var(--red-soft);
+  --accent-wash: var(--red-soft);
+  --accent-foreground: var(--on-red);
+  --accent-on-dark: var(--red);
+  --accent-on-muted: var(--red-ink);
+  --action: var(--red);
+  --action-foreground: var(--on-red);
+}
+
+/* On the dark ground the same hues have to come UP to clear AA, not down. An
+   accent with only a light value fails contrast the moment someone switches
+   mode — which is why the token layer swaps by value rather than by block. */
+
+[data-mode='dark'][data-accent='ink'],
+[data-mode='dark'] [data-accent='ink'] {
+  --clay: var(--ink);
+  --clay-ink: var(--ink);
+  --red-soft: rgba(244, 244, 242, 0.12);
+}
+
+[data-mode='dark'][data-accent='clay'],
+[data-mode='dark'] [data-accent='clay'] {
+  --clay: #e08a68;
+  --clay-ink: #e8a184;
+  --red-soft: rgba(224, 138, 104, 0.14);
+}
+[data-mode='dark'][data-accent='forest'],
+[data-mode='dark'] [data-accent='forest'] {
+  --clay: #7fbd97;
+  --clay-ink: #98caab;
+  --red-soft: rgba(127, 189, 151, 0.14);
+}
+[data-mode='dark'][data-accent='cobalt'],
+[data-mode='dark'] [data-accent='cobalt'] {
+  --clay: #8aaaf0;
+  --clay-ink: #a3bcf4;
+  --red-soft: rgba(138, 170, 240, 0.14);
+}
+[data-mode='dark'][data-accent='plum'],
+[data-mode='dark'] [data-accent='plum'] {
+  --clay: #cf9dd6;
+  --clay-ink: #dab0e0;
+  --red-soft: rgba(207, 157, 214, 0.14);
+}
+[data-mode='dark'][data-accent='moss'],
+[data-mode='dark'] [data-accent='moss'] {
+  --clay: #9cb597;
+  --clay-ink: #b8cbb3;
+  --red-soft: rgba(156, 181, 151, 0.14);
+}
+[data-mode='dark'][data-accent='ember'],
+[data-mode='dark'] [data-accent='ember'] {
+  --clay: #f08a4b;
+  --clay-ink: #f29a62;
+  --red-soft: rgba(240, 138, 75, 0.14);
+}
+
+/* ─── Action ───────────────────────────────────────────────────────────────
+   What the primary button is filled with. By default it is the accent, which
+   is what law 7 asks for. `ink` takes the primary action back to the page's
+   own ink while the accent keeps marking links and the current state — the
+   Workbench preset's split, where a burnt-orange button would be the loudest
+   thing on a page of photographs. Declared after the accent block so it wins
+   on the same element, and re-derived on it for the same reason that block
+   is: a `var()` resolves where it is written. Ink and paper already swap in
+   dark mode, so this axis needs no dark block of its own. */
+[data-action='accent'] {
+  --action: var(--accent);
+  --action-foreground: var(--accent-foreground);
+}
+[data-action='ink'] {
+  --action: var(--ink);
+  --action-foreground: var(--paper);
+}
+
+/* ─── Surface ──────────────────────────────────────────────────────────────
+   The ground and its two steps. Law 8 still holds — dark is a value swap, so
+   each surface defines both and neither is a separate palette.
+
+   THE RULES ARE PART OF THE SURFACE, and for four releases only half of them
+   swapped. `warm` and `cool` set `--rule` and `--rule-2` unqualified by mode
+   and then restated only the three grounds in dark, so the LIGHT hairline
+   survived onto the dark page: #e8e4da at 14.86:1 against warm's own dark
+   `--paper`, #e4e9ee at 15.82:1 against cool's, where the neutral dark rule
+   sits at 1.42:1. Every border and divider on the page came out near-white —
+   measured in a console on this package at up to 174 such elements on one of
+   33 routes. `glass` restates both and was never affected.
+
+   The dark values are built the way `tokens.css` builds its own: the system's
+   near-white at an alpha over whatever ground is under it, at the SAME alphas,
+   0.14 and 0.26, because the alpha is what a rule's WEIGHT is. Composited on
+   each surface's own dark `--paper` that is 1.45 / 2.19 on warm and
+   1.42 / 2.17 on cool against the root's 1.42 / 2.16, at ΔE 13.5 / 23.9 and
+   13.8 / 24.5 against its 13.8 / 24.6 (OKLab ×100). Same rule, same weight, a
+   differently tinted ground.
+
+   What moves is the near-white. `#f4f4f2` held at its own lightness (L 0.967)
+   and turned onto the surface's dark hue — 84.6° warm and 258.4° cool, the hue
+   `--paper`, `--paper-2` and `--stone` already carry there — at the chroma that
+   surface's LIGHT `--rule` carries (C 0.0141 and 0.0087). Tinting it is not
+   decoration: the light halves ladder chroma UP with rule weight, warm running
+   C 0.0111 at `--stone`, 0.0141 at `--rule` and 0.0185 at `--rule-2`, and the
+   root's neutral ink inverts that on the dark ground — at 26% it washes the
+   ground's tint out, leaving warm's heaviest rule at C 0.0075 over a `--stone`
+   of C 0.0103, the least warm thing on a warm page. Tinted, it lands at
+   C 0.0109, on the ground's own hue.
+
+   Not restated under forced colours, unlike the accent below. `tokens.css`
+   does not collapse `--rule` there because it does not have to: a border is an
+   element's own colour and the browser remaps it, and nothing in the package
+   draws these two into an SVG or a `color-mix()`, which is the gap the accent
+   block exists to close. */
+
+[data-surface='warm'] {
+  --paper: #fdfcf9;
+  --paper-2: #f6f4ee;
+  --stone: #efece4;
+  --rule: #e8e4da;
+  --rule-2: #d8d3c6;
+}
+[data-mode='dark'][data-surface='warm'],
+[data-mode='dark'] [data-surface='warm'] {
+  --paper: #12110f;
+  --paper-2: #1a1814;
+  --stone: #221f1a;
+  /* #f4f4f2 at L 0.967, hue 84.6°, C 0.0143 — warm's own hue at the chroma its
+     light `--rule` carries. */
+  --rule: rgba(248, 243, 233, 0.14);
+  --rule-2: rgba(248, 243, 233, 0.26);
+}
+
+[data-surface='cool'] {
+  --paper: #fcfdfe;
+  --paper-2: #f2f5f8;
+  --stone: #eceff3;
+  --rule: #e4e9ee;
+  --rule-2: #d2d9e1;
+}
+[data-mode='dark'][data-surface='cool'],
+[data-mode='dark'] [data-surface='cool'] {
+  --paper: #0c0e11;
+  --paper-2: #14171b;
+  --stone: #1c2026;
+  /* The same construction on cool's hue, 258.4°, at C 0.0091. */
+  --rule: rgba(240, 244, 250, 0.14);
+  --rule-2: rgba(240, 244, 250, 0.26);
+}
+
+/* Linen, the Workbench ground. Unlike `warm` and `cool` it also moves the
+   three text steps, because the preset's warmth is carried by the ink as much
+   as by the paper: a neutral #101010 on a linen ground reads as a cold page
+   with a tinted background. The text steps keep the root's ladder — ink,
+   a secondary step, and an AA floor — measured on every linen ground:
+   light ink 14.33 / 13.60 / 12.42, --ink-2 8.13 / 7.72 / 7.05, --ink-3-aa
+   6.15 / 5.84 / 5.33 against paper / paper-2 / stone; dark ink 15.57 /
+   14.44 / 13.15, --ink-2 9.67 / 8.96 / 8.16, --ink-3-aa 7.18 / 6.66 / 6.07.
+   Rules are the ink itself at the root's two weights, so a hairline stays
+   the colour of the type it separates. */
+[data-surface='linen'] {
+  --paper: #f7f7f4;
+  --paper-2: #f2f1ed;
+  --stone: #e8e7e2;
+  --rule: rgba(38, 37, 30, 0.1);
+  --rule-2: rgba(38, 37, 30, 0.2);
+  --ink: #26251e;
+  --ink-2: #4d4b44;
+  --ink-3: rgba(38, 37, 30, 0.55);
+  --ink-3-aa: #5f5d55;
+}
+[data-mode='dark'][data-surface='linen'],
+[data-mode='dark'] [data-surface='linen'] {
+  --paper: #14130f;
+  --paper-2: #1c1b17;
+  --stone: #25231e;
+  --rule: rgba(236, 235, 230, 0.14);
+  --rule-2: rgba(236, 235, 230, 0.26);
+  --ink: #ecebe6;
+  --ink-2: #bdbbb3;
+  --ink-3: rgba(236, 235, 230, 0.55);
+  --ink-3-aa: #a3a199;
+}
+
+/* Glass, and the one place this system allows a blur.
+ *
+ * Law 2 says depth is a hairline and never a blur, and this does not break it:
+ * the blur is not UNDER a surface pretending to be a shadow, it is BEHIND one,
+ * which is a different claim. A shadow says "this is raised above the page"; a
+ * frosted panel says "the page is still there, and you are looking through
+ * something at it". The first is a fiction about light the White Reset has no
+ * source for. The second is a material, and it is honest about what it costs:
+ * only surfaces that actually float get it, because a card on the page ground
+ * has nothing behind it and would be blurring its own background.
+ *
+ * The panel's own edge is brighter than the page's rules on purpose. Glass has
+ * a specular edge — it is the one cue that says the surface is a sheet rather
+ * than a hole, and without it a translucent panel reads as a smudge.
+ */
+
+[data-surface='glass'] {
+  --paper: #f7f8fa;
+  --paper-2: #eef0f4;
+  --stone: #e7eaf0;
+  --rule: #e2e5ec;
+  --rule-2: #ced3dd;
+
+  --panel-bg: color-mix(in srgb, #ffffff 62%, transparent);
+  --panel-border: color-mix(in srgb, #ffffff 85%, transparent);
+  /* Saturation as well as blur. A blur alone greys whatever is behind it,
+     because averaging colour is what a blur does; pushing saturation back is
+     what makes the result read as glass rather than as fog. */
+  --panel-filter: blur(20px) saturate(180%);
+}
+[data-mode='dark'][data-surface='glass'],
+[data-mode='dark'] [data-surface='glass'] {
+  --paper: #0e1013;
+  --paper-2: #16191e;
+  --stone: #1d2127;
+  --rule: rgba(244, 244, 242, 0.12);
+  --rule-2: rgba(244, 244, 242, 0.22);
+
+  --panel-bg: color-mix(in srgb, #1b1f26 62%, transparent);
+  --panel-border: color-mix(in srgb, #ffffff 16%, transparent);
+  --panel-filter: blur(20px) saturate(160%);
+}
+
+/* ─── Radius ───────────────────────────────────────────────────────────────
+   One number, not four.
+
+   This axis used to re-type every step, which let the ladder go out of
+   proportion with itself — and a corner nested inside another corner is only
+   ever right when the two are in proportion. The factor scales the whole
+   ladder, the pill included, so `sharp` means square everywhere a corner is a
+   corner: a square theme that left every button a capsule was not a square
+   theme. A true circle is geometry and is not on this axis at all. */
+
+[data-radius='sharp'] {
+  --radius-factor: 0;
+}
+[data-radius='round'] {
+  --radius-factor: 2;
+}
+
+/* ─── Rules ────────────────────────────────────────────────────────────────
+   How much the system draws its own edges. `firm` is the setting for a dense
+   console; `quiet` leans on the surface steps and is what a reading page
+   wants. */
+
+[data-rules='firm'] {
+  --rule: #cfccc4;
+  --rule-2: #a8a49a;
+}
+[data-mode='dark'][data-rules='firm'],
+[data-mode='dark'] [data-rules='firm'] {
+  --rule: rgba(244, 244, 242, 0.28);
+  --rule-2: rgba(244, 244, 242, 0.46);
+}
+
+[data-rules='quiet'] {
+  --rule: #f4f2ee;
+  --rule-2: #e8e5df;
+}
+[data-mode='dark'][data-rules='quiet'],
+[data-mode='dark'] [data-rules='quiet'] {
+  --rule: rgba(244, 244, 242, 0.08);
+  --rule-2: rgba(244, 244, 242, 0.15);
+}
+
+/* ─── Type ─────────────────────────────────────────────────────────────────
+   Which face carries a heading. The ramp itself does not move: the steps are a
+   hierarchy, and a theme that re-sized them would be re-deciding the
+   hierarchy rather than re-dressing it. */
+
+/* The default, named. It restates the two role tokens rather than any face:
+   `index.css` decides what `--sans` and `--serif` are, and this only says which
+   role each one plays — so there is no list of families to drift. */
+[data-type='editorial'] {
+  --font-sans: var(--sans);
+  --font-heading: var(--serif);
+}
+
+[data-type='grotesk'] {
+  --font-heading: var(--sans);
+}
+[data-type='bookish'] {
+  --font-sans: var(--serif);
+  --font-heading: var(--serif);
+}
+
+/* ─── Voice ────────────────────────────────────────────────────────────────
+   How loud the page speaks, which the type axis does not decide: that axis
+   picks a FACE and leaves the ramp alone. `quiet` is the Workbench setting —
+   page titles at roughly two-thirds of the ramp, display type at a regular
+   weight rather than a light one, and labels set as sentence-case sans in
+   place of tracked mono capitals. Body, record and item steps do not move, so
+   a quiet page keeps its hierarchy; only its top two steps come down. */
+[data-voice='display'] {
+  --display-scale: 1;
+  --display-weight: 300;
+  --label-font: var(--font-mono);
+  --label-case: uppercase;
+  --label-tracking-scale: 1;
+}
+[data-voice='quiet'] {
+  --display-scale: 0.62;
+  --display-weight: 400;
+  --label-font: var(--font-sans);
+  --label-case: none;
+  --label-tracking-scale: 0;
+}
+
+/* ─── Motion ───────────────────────────────────────────────────────────────
+   `prefers-reduced-motion` is honoured separately and is not a theme: a
+   reader's stated need is not one of five looks. This axis is taste. */
+
+[data-motion='snappy'] {
+  --fast: 90ms;
+  --mid: 140ms;
+  --slow: 220ms;
+}
+[data-motion='still'] {
+  --fast: 1ms;
+  --mid: 1ms;
+  --slow: 1ms;
+}
+
+/* ─── Chart palette ────────────────────────────────────────────────────────
+   The one axis that adds hue back, and the only sanctioned way to do it.
+
+   The White Reset's default series ramp is neutral (see tokens.css): texture
+   carries identity, lightness supports it. That is right for a console whose
+   whole page is monochrome, and wrong for a chart that has to sit beside a
+   product whose users already read its categories by colour. So rather than
+   leave that consumer hand-picking hexes into a `colors` config — which is
+   where an unvalidated, colour-blind-hostile palette gets born — the system
+   ships one, as an attribute, on the same terms as every other theme here.
+
+   These eight hues are a validated categorical set: adjacent-pair separation
+   ΔE 9.1 light / 8.4 dark under simulated protanopia, ΔE 19.6 / 19.3 with
+   normal vision (OKLab ×100), every step inside its mode's lightness band and
+   above the chroma floor, and every dark step at or above 3:1 on the dark
+   ground. The ORDER is the safety mechanism, not decoration — re-ordering
+   these values re-opens every adjacency and invalidates the numbers above.
+
+   Three light steps (aqua, yellow, magenta) sit below 3:1 on paper. That is a
+   documented relief case rather than a defect: a chart using more than two
+   series must show its legend, and `Chart.Legend` is required above one
+   series for exactly this reason.
+
+   Scoped to any container, like every other axis:
+     <div data-chart-palette="chroma"> */
+
+[data-chart-palette='chroma'] {
+  --series-1: #2a78d6; /* blue */
+  --series-2: #eb6834; /* orange */
+  --series-3: #1baf7a; /* aqua */
+  --series-4: #eda100; /* yellow */
+  --series-5: #e87ba4; /* magenta */
+  --series-6: #008300; /* green */
+  --series-7: #4a3aa7; /* violet */
+  --series-8: #e34948; /* red */
+}
+[data-mode='dark'][data-chart-palette='chroma'],
+[data-mode='dark'] [data-chart-palette='chroma'] {
+  /* The same eight hues re-stepped for the dark ground — not an inversion and
+     not a second palette. Law 8 holds: the names swap, the roles do not. */
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --series-4: #c98500;
+  --series-5: #d55181;
+  --series-6: #008300;
+  --series-7: #9085e9;
+  --series-8: #e66767;
+}
+
+/* The third value, and the one a branded consumer actually asks for.
+ *
+ * `chroma` answers "my users read categories by colour"; this answers a
+ * different question — "our accent is not ink, and a chart that ignores it
+ * looks like someone else's chart". Those are not the same need and one value
+ * could not serve both: eight distinguishable hues are a categorical palette,
+ * and one hue laddered by lightness is a brand mark. This is the second.
+ *
+ * It derives every step from `--clay` rather than listing colours, so it works
+ * for an accent nobody here has seen. Relative colour syntax holds the hue and
+ * chroma and re-states the LIGHTNESS, which is what makes the numbers below
+ * portable: separation and contrast are carried almost entirely by lightness,
+ * so pinning it pins both regardless of which hue arrives. A chroma the
+ * lightness cannot hold is gamut-mapped by the browser, which reduces chroma
+ * and preserves L — so the ladder survives the mapping intact.
+ *
+ * The ladder is eight even steps across L 0.173–0.640 on paper and
+ * L 0.967–0.530 on the dark ground. The top of each band is where it is
+ * because of the weakest hue rather than the prettiest: at maximum chroma the
+ * worst hue on paper (green, ~144°) clears 3:1 up to L 0.640 and fails above
+ * it, and the worst on the dark ground (violet, ~294°) clears it down to
+ * L 0.530. Measured across all 360 hues at maximum chroma: adjacent-pair
+ * separation ΔE 26.7 light / 25.0 dark (OKLab ×100, against a floor of 15),
+ * minimum contrast 3.11 on both grounds.
+ *
+ * The interleave differs from the mono ramp's by one position, and that is the
+ * whole point of the value. `--series-1` sits at L 0.440 — the band the five
+ * shipped accents already occupy — so a one-series chart paints in a colour
+ * within ΔE 2 of the accent itself rather than in the accent's darkest
+ * possible shade. Ink stays available as `--series-2`, which is the pairing a
+ * two-series chart wants anyway. Every adjacent index is four ladder steps
+ * apart, one better than the mono ramp manages.
+ *
+ * What this is NOT is a categorical palette. One hue laddered eight ways is
+ * legible for two or three series and is guesswork at eight; a consumer
+ * plotting eight categories wants `chroma`. Texture and `Chart.Legend` carry
+ * identity here for the same reason they do under `mono`.
+ */
+[data-chart-palette='accent'] {
+  --series-1: oklch(from var(--clay) 0.44 c h);
+  --series-2: oklch(from var(--clay) 0.173 c h);
+  --series-3: oklch(from var(--clay) 0.507 c h);
+  --series-4: oklch(from var(--clay) 0.24 c h);
+  --series-5: oklch(from var(--clay) 0.573 c h);
+  --series-6: oklch(from var(--clay) 0.306 c h);
+  --series-7: oklch(from var(--clay) 0.64 c h);
+  --series-8: oklch(from var(--clay) 0.373 c h);
+}
+[data-mode='dark'][data-chart-palette='accent'],
+[data-mode='dark'] [data-chart-palette='accent'] {
+  /* The band mirrored, not the palette rebuilt — Law 8 again. `--clay` has
+     already swapped to its dark value by the time this reads it, so the only
+     thing restated here is where the ladder sits. */
+  --series-1: oklch(from var(--clay) 0.717 c h);
+  --series-2: oklch(from var(--clay) 0.967 c h);
+  --series-3: oklch(from var(--clay) 0.655 c h);
+  --series-4: oklch(from var(--clay) 0.905 c h);
+  --series-5: oklch(from var(--clay) 0.592 c h);
+  --series-6: oklch(from var(--clay) 0.842 c h);
+  --series-7: oklch(from var(--clay) 0.53 c h);
+  --series-8: oklch(from var(--clay) 0.78 c h);
+}
+
+/* ─── Forced colours, for every axis that carries a hue ────────────────────
+   `tokens.css` collapses the ramp to `CanvasText` when the reader has taken
+   the palette away, and it writes that on `:root` — which a palette attribute
+   then outranks, because an element that matches `[data-chart-palette]`
+   directly beats a value it merely inherits from the root, and beats it on
+   source order even at the root itself. So a reader in Windows High Contrast
+   who was on `chroma` kept getting the eight hues, which is the setting being
+   ignored rather than honoured.
+
+   Restated here, after the palettes, at the specificity the dark blocks use.
+   The values are `tokens.css`'s, unchanged — this only puts them back on top.
+   `--chart-*` is untouched: those declarations are already unopposed. */
+@media (forced-colors: active) {
+  [data-chart-palette],
+  [data-mode][data-chart-palette],
+  [data-mode] [data-chart-palette] {
+    --series-1: CanvasText;
+    --series-2: CanvasText;
+    --series-3: CanvasText;
+    --series-4: CanvasText;
+    --series-5: CanvasText;
+    --series-6: CanvasText;
+    --series-7: CanvasText;
+    --series-8: CanvasText;
+    --series-track: Canvas;
+  }
+
+  /* The accent has the same problem and needs the same answer.
+
+     A browser remaps an HTML element's own colours and does not reach inside
+     an SVG or a `color-mix()`, so a fill drawn from `--clay` survived forced
+     colours as a hue nobody asked for — and `[data-accent='moss']` matches the
+     element directly, which outranks anything the root merely offers. Under
+     forced colours the system owns what a chosen state looks like, so every
+     accent collapses to the reader's own ink. */
+  [data-accent],
+  [data-mode][data-accent],
+  [data-mode] [data-accent] {
+    --clay: CanvasText;
+    --clay-ink: CanvasText;
+    --red-soft: Canvas;
+    --on-red: Canvas;
+  }
+}

package/dist/tokens/brand.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Brand colour mirrors for surfaces that cannot read CSS custom properties —
+ * OpenGraph/Satori cards, build-time scripts, `theme-color` in a web manifest,
+ * a canvas.
+ *
+ * The RUNTIME theme lives in `styles/tokens.css` (`:root` + `[data-mode="dark"]`)
+ * and that is the single place to recolour the system. These literals mirror
+ * specific tokens; `brand.test.ts` parses the CSS and fails if the two drift,
+ * so this file cannot quietly fall behind the thing it mirrors.
+ */
+declare const BRAND: {
+    /** = light --paper. The page ground. */
+    readonly paper: "#ffffff";
+    /** = dark --paper. The dark viewport's `theme-color`. */
+    readonly paperDark: "#0d0d0d";
+    /** = light --paper-2. One step off the ground. */
+    readonly paperElevated: "#f7f7f5";
+    /** = light --ink. The mark. */
+    readonly ink: "#101010";
+    /** = dark --ink. */
+    readonly inkDark: "#f4f4f2";
+    /** = light --ink-2. Body copy that is not the mark. */
+    readonly body: "#4a4a4a";
+    /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */
+    readonly muted: "#5c5c5c";
+    /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */
+    readonly stone: "#f2f1ee";
+    /** = light --rule. Hairline. */
+    readonly rule: "#edebe6";
+    /** = light --rule-2. Edge. */
+    readonly ruleStrong: "#dbdbd6";
+    /** = --feature-surface. The one reversed plate. */
+    readonly feature: "#262626";
+    /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */
+    readonly onDark: "#fbfbfa";
+    /** Byline weight over a photograph. */
+    readonly onDarkMuted: "rgba(251,251,250,0.82)";
+    /** = --photo-scrim, as an "r, g, b" tuple for a gradient. */
+    readonly scrimRgb: "16, 16, 16";
+    /** = light --ok / --warn / --danger. The only chroma in the system. */
+    readonly success: "#3d6b34";
+    readonly warning: "#8a5a00";
+    readonly danger: "#a83214";
+};
+type BrandColor = keyof typeof BRAND;
+
+export { BRAND, type BrandColor };

package/dist/tokens/brand.js

@@ -0,0 +1,38 @@
+const BRAND = {
+  /** = light --paper. The page ground. */
+  paper: "#ffffff",
+  /** = dark --paper. The dark viewport's `theme-color`. */
+  paperDark: "#0d0d0d",
+  /** = light --paper-2. One step off the ground. */
+  paperElevated: "#f7f7f5",
+  /** = light --ink. The mark. */
+  ink: "#101010",
+  /** = dark --ink. */
+  inkDark: "#f4f4f2",
+  /** = light --ink-2. Body copy that is not the mark. */
+  body: "#4a4a4a",
+  /** = light --ink-3-aa. The lightest text step that still clears AA on paper. */
+  muted: "#5c5c5c",
+  /** = light --stone. The fill under a skeleton, a bar, a quiet plate. */
+  stone: "#f2f1ee",
+  /** = light --rule. Hairline. */
+  rule: "#edebe6",
+  /** = light --rule-2. Edge. */
+  ruleStrong: "#dbdbd6",
+  /** = --feature-surface. The one reversed plate. */
+  feature: "#262626",
+  /** = --on-dark. Type over a photograph — a dark ground in BOTH themes. */
+  onDark: "#fbfbfa",
+  /** Byline weight over a photograph. */
+  onDarkMuted: "rgba(251,251,250,0.82)",
+  /** = --photo-scrim, as an "r, g, b" tuple for a gradient. */
+  scrimRgb: "16, 16, 16",
+  /** = light --ok / --warn / --danger. The only chroma in the system. */
+  success: "#3d6b34",
+  warning: "#8a5a00",
+  danger: "#a83214"
+};
+export {
+  BRAND
+};
+//# sourceMappingURL=brand.js.map