@misoto22/folio 0.0.0 → 0.16.0

package/dist/tokens.json

@@ -0,0 +1,1019 @@
+{
+  "paper": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#ffffff",
+    "dark": "#0d0d0d"
+  },
+  "paper-2": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#f7f7f5",
+    "dark": "#161616"
+  },
+  "bar": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--stone)",
+    "dark": "var(--stone)"
+  },
+  "bar-2": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--stone)",
+    "dark": "var(--stone)"
+  },
+  "ink": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#101010",
+    "comment": "Two text steps and nothing lighter. --ink-3-aa is the floor — it clears AA on white at 6.7:1, and every step above it is darker. --ink-3 is the same weight expressed as alpha, for rules and washes that must sit over a photograph as well as over paper.",
+    "dark": "#f4f4f2"
+  },
+  "ink-2": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#4a4a4a",
+    "dark": "#b4b4b0"
+  },
+  "ink-3": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "rgba(16, 16, 16, 0.55)",
+    "dark": "rgba(244, 244, 242, 0.55)"
+  },
+  "ink-3-aa": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#5c5c5c",
+    "dark": "#9a9a96"
+  },
+  "forest": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#3a3a3a",
+    "comment": "The second editorial voice is not a hue — it is one more neutral step, sitting between --ink and --ink-2, so a byline separates from body copy without introducing colour.",
+    "dark": "#c9c9c5"
+  },
+  "mist": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--stone)",
+    "dark": "var(--stone)"
+  },
+  "stone": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#f2f1ee",
+    "dark": "#1f1f1f"
+  },
+  "clay": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--ink)",
+    "comment": "Monochrome collapses the pointer onto the mark: the accent IS ink. What used to be carried by hue is now carried by weight, rule and reversal — an ink pill, an ink underline, an ink-filled plate.",
+    "dark": "var(--ink)"
+  },
+  "clay-ink": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--clay)",
+    "dark": "var(--clay)"
+  },
+  "feature-surface": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#262626",
+    "comment": "The one reversed plate, and the one place the ramp needs a tenth step. Set to var(--ink) it was the page's darkest possible mark used as a field, which on a white page reads as a hole punched through it rather than as a panel. Two steps lighter keeps the reversal — 15.1:1 for paper-white type on it — and matches the dark side.",
+    "dark": "#1a1a1a"
+  },
+  "on-feature": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--paper)",
+    "dark": "var(--ink)"
+  },
+  "focus-on-feature": {
+    "layer": "tokens",
+    "category": "focus",
+    "light": "var(--on-feature)",
+    "dark": "var(--on-feature)"
+  },
+  "on-photo": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--paper)",
+    "dark": "#fbfbfa"
+  },
+  "photo-caption-surface": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--ink)",
+    "dark": "var(--paper)"
+  },
+  "photo-shadow": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "0 1px 6px rgb(0 0 0 / 0.72)",
+    "dark": "0 1px 6px rgb(0 0 0 / 0.72)"
+  },
+  "rule": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#edebe6",
+    "comment": "Three rule weights, because a monochrome page has no colour left to separate one band from the next: hairline, edge, and hard.",
+    "dark": "rgba(244, 244, 242, 0.14)"
+  },
+  "rule-2": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#dbdbd6",
+    "dark": "rgba(244, 244, 242, 0.26)"
+  },
+  "rule-hard": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--ink)",
+    "dark": "var(--ink)"
+  },
+  "red": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--clay)",
+    "comment": "Historic role names, kept so a consumer written against the previous palette keeps resolving. Their hue is now ink; the role remains \"the single editorial pointer\".",
+    "dark": "var(--clay)"
+  },
+  "red-ink": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--clay)",
+    "dark": "var(--clay)"
+  },
+  "red-soft": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "rgba(16, 16, 16, 0.07)",
+    "dark": "rgba(244, 244, 242, 0.12)"
+  },
+  "on-red": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "var(--paper)",
+    "dark": "var(--paper)"
+  },
+  "shadow-offset": {
+    "layer": "tokens",
+    "category": "depth",
+    "light": "var(--clay)",
+    "dark": "var(--clay)"
+  },
+  "series-1": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#101010",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds — or `\"accent\"`, which ladders the same eight names out of `--clay` when what the charts have to carry is a brand rather than eight categories.",
+    "dark": "CanvasText"
+  },
+  "series-2": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#565656",
+    "dark": "CanvasText"
+  },
+  "series-3": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#202020",
+    "dark": "CanvasText"
+  },
+  "series-4": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#6a6a6a",
+    "dark": "CanvasText"
+  },
+  "series-5": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#313131",
+    "dark": "CanvasText"
+  },
+  "series-6": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#7e7e7e",
+    "dark": "CanvasText"
+  },
+  "series-7": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#434343",
+    "dark": "CanvasText"
+  },
+  "series-8": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#939393",
+    "dark": "CanvasText"
+  },
+  "series-track": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#eeece7",
+    "comment": "The empty ground a part-of-whole mark is drawn against — the unfilled remainder of a radial bar, the track behind a gauge. Not --rule: a track is a field, and a field that reads as a hairline disappears at radius.",
+    "dark": "Canvas"
+  },
+  "chart-fill": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.14",
+    "comment": "How solid a translucent mark is, and the one pair of tokens in the file that is NOT the same number on both grounds. A wash is `ink at N% over the page`. On paper, ink at 14% lands around #e3e3e3 — a legible, recessive band. Run the same 14% the other way and paper-white over near-black lands around #2c2c2c, which on a #0d0d0d ground is not a band, it is nothing. Perceived lightness is not linear and the two directions do not meet in the middle, so a single number cannot serve both: the dark side needs roughly twice the alpha to read as the same weight of mark. Every area fill, texture and flow band in the chart package reads these rather than carrying its own literal.",
+    "dark": "0.45"
+  },
+  "chart-texture": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.42",
+    "dark": "1"
+  },
+  "sans": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "var(--font-hanken, 'Hanken Grotesk'), var(--cjk-sans), 'Helvetica Neue', Arial, sans-serif",
+    "comment": "─── Type ─────────────────────────────────────────────────────────────── Three faces and their CJK companions. EVERY `var()` here carries a fallback, and that is load-bearing rather than tidy. A `var(--font-hanken)` with no fallback, in a host that does not define `--font-hanken`, is invalid at computed-value time — and IACVT does not skip the one term, it discards the WHOLE declaration. So the entire stack collapsed to nothing and every surface rendered in the platform's system font. It worked inside the site, where next/font defines those names, and failed everywhere else: for a package whose whole purpose is to render the same on both sides, that is the worst possible bug. With the fallback, a host that loads the faces itself (next/font, a CDN) sets `--font-*` and wins; a host that does not falls through to the literal family name, which is exactly the name `fonts.css` declares its vendored @font-face rules under. The CJK stacks deliberately end WITHOUT a generic family. They are spliced into the middle of the three stacks above, and a generic in the middle terminates a font stack — everything listed after it is unreachable."
+  },
+  "serif": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "var(--font-newsreader, 'Newsreader'), var(--cjk-serif), Georgia, serif"
+  },
+  "mono": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "var(--font-plex-mono, 'IBM Plex Mono'), var(--cjk-sans), ui-monospace, SFMono-Regular, Menlo,\n    monospace"
+  },
+  "cjk-serif": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "var(--font-noto-serif-sc, 'Noto Serif SC'), 'Source Han Serif SC', 'Songti SC', STSong,\n    SimSun"
+  },
+  "cjk-sans": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "var(--font-noto-sans-sc, 'Noto Sans SC'), 'PingFang SC', 'Hiragino Sans GB',\n    'Microsoft YaHei'"
+  },
+  "lh-cjk": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "1.8"
+  },
+  "ls-cjk": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "0"
+  },
+  "fluid": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "1vw",
+    "comment": "─── The fluid base ────────────────────────────────────────────────────── Every fluid step below is one percent of THIS, not of the viewport. The default is `1vw`, which is what a page wants. A bounded frame — a device preview, a documentation canvas, an embedded console — overrides it to `1cqi` and declares itself a `container`, and the whole ramp re-bases onto the frame's width. Without the seam a 390px preview inside a 1440px window renders 54px headings and 64px gutters, which is not what a 390px screen looks like and is exactly the bug this replaces. The ramp itself is declared once, below, for BOTH `:root` and a frame — rather than composed here and inherited. A custom property substitutes `var()` where it is DECLARED, so a ramp written only on `:root` bakes in `1vw` and a deeper `--fluid` never reaches it."
+  },
+  "maxw": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "1288px"
+  },
+  "col": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "8.3333%"
+  },
+  "row": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "52px"
+  },
+  "fs-title": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
+  },
+  "fs-lead": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
+    "comment": "band heading 30 → 42px"
+  },
+  "fs-heading": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
+    "comment": "record title 24 → 29px"
+  },
+  "fs-sub": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
+    "comment": "card sub-head 21 → 25px"
+  },
+  "fs-item": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
+    "comment": "in-card title 18 → 20px"
+  },
+  "pad": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
+  },
+  "sec": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "clamp(54px, calc(7 * var(--fluid)), 96px)"
+  },
+  "sec-tight": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "clamp(40px, calc(5 * var(--fluid)), 68px)"
+  },
+  "radius-factor": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "1"
+  },
+  "radius-gate": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "min(1, var(--radius-factor))",
+    "comment": "Clamps the factor at 1 for the ADDING direction only. A frame's air is a fixed number of pixels, so `--radius-lg + 16px` would leave a rounded frame around a square panel the moment the theme went square; gated, it collapses to nothing along with everything else."
+  },
+  "radius-xs": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(4px * var(--radius-factor))",
+    "comment": "a mark inside a tight box"
+  },
+  "radius-sm": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(6px * var(--radius-factor))",
+    "comment": "chips, keys, list rows"
+  },
+  "radius": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(8px * var(--radius-factor))",
+    "comment": "inputs, code, small plates"
+  },
+  "radius-lg": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(12px * var(--radius-factor))",
+    "comment": "cards, dialogs, menu panels"
+  },
+  "radius-pill": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(999px * var(--radius-factor))",
+    "comment": "capsules and counters"
+  },
+  "radius-row": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
+    "comment": "a row in a 6px-padded panel"
+  },
+  "radius-frame": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
+    "comment": "a frame 16px outside a panel"
+  },
+  "control-h-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "2.25rem",
+    "comment": "36px"
+  },
+  "control-h-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
+  },
+  "control-h-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "3rem",
+    "comment": "48px"
+  },
+  "control-px-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1rem"
+  },
+  "control-px-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.5rem"
+  },
+  "control-px-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.75rem"
+  },
+  "control-py-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
+  },
+  "control-py-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.75rem"
+  },
+  "control-py-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.75rem"
+  },
+  "control-lh": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.2",
+    "comment": "And so is the LEADING, which is the term that guard was missing. `min-height` is a floor, and what has to stay under it is the whole box: the line, the padding and the border. The padding was scaled and the line was left inheriting the body's 1.6 — so `sm` measured 20.8 + 16 + 2 = 38.8 against a 36px token, `md` 46 against 44 and `lg` 50 against 48. Every text button in the system was two to three pixels taller than the number documenting it, and the floor never bound because the box had already cleared it. One value on both densities: the font sizes do not move with density, only the padding and the heights do, so this does not have to. It is not a reading leading — a control's label is one line, and 1.2 leaves every size at every density inside its own height with room to spare. The test in `tokens.test.ts` is what keeps that true."
+  },
+  "control-gap": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.625rem"
+  },
+  "field-px": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
+  },
+  "field-py": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.625rem"
+  },
+  "table-pad-y": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
+  },
+  "table-pad-x": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0px",
+    "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
+  },
+  "sidebar-w": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "16rem",
+    "comment": "─── Sidebar ──────────────────────────────────────────────────────────── The two widths a navigation rail has, and the reason they are tokens rather than numbers inside the component: an application shell has to reserve exactly this much beside its content, and a shell that hard-codes 17rem while the rail believes something else is a gap or an overlap that appears only at one window size. Both sides read the same name. `--sidebar-w-icon` is what is left when the rail collapses to icons. It is `--control-h-md` plus the rail's own padding, so a 44px pointer target still fits inside it at comfortable density — a collapsed rail whose rows are too small to hit is a rail nobody can use in the state it spends most of its life in."
+  },
+  "sidebar-w-icon": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "3.5rem"
+  },
+  "bar-h": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "calc(var(--control-h-md) + 0.75rem)"
+  },
+  "panel-bg": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Floating surfaces ────────────────────────────────────────────────── What a panel that FLOATS fills with, and what it does to whatever is behind it. A dialog, a menu, a popover, a palette — the surfaces that sit OVER the page rather than in it, and therefore the only ones with anything behind them to treat. Both default to the plain surface and cost nothing. `--panel-filter: none` matters more than it looks: a `backdrop-filter` of any value, `blur(0px)` included, promotes its element to its own compositing layer and makes it a containing block for fixed descendants. Paid on every menu in the system, for a theme most readers will never turn on. `none` is not a blur of zero; it is no filter at all. A card is deliberately NOT on this list. It sits on the page ground, so there is nothing behind it to see through, and a card that blurs its own background is drawing an effect rather than an object."
+  },
+  "panel-border": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "panel-filter": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "none"
+  },
+  "panel-lift": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule)",
+    "comment": "The offset under a floating panel, and it does not break Law 2: the law says a box-shadow is never BLURRED, not that there is never one. This is the same hard-offset idiom as `--lift`, in the rule colour rather than the accent — every menu in the system wearing a clay drop shadow would be a louder claim than \"this sits above the page\". Two steps, because one reads as a second border: a firm edge just below the panel and a softer one below that is a stack seen from the front, which is the flattest way to say depth without drawing light."
+  },
+  "ease": {
+    "layer": "tokens",
+    "category": "motion",
+    "light": "cubic-bezier(0.2, 0.7, 0.3, 1)",
+    "comment": "─── Motion ───"
+  },
+  "fast": {
+    "layer": "tokens",
+    "category": "motion",
+    "light": "0.13s"
+  },
+  "mid": {
+    "layer": "tokens",
+    "category": "motion",
+    "light": "0.22s"
+  },
+  "slow": {
+    "layer": "tokens",
+    "category": "motion",
+    "light": "0.34s"
+  },
+  "z-rule": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "1",
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
+  },
+  "z-sticky": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "10"
+  },
+  "z-drawer": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "100"
+  },
+  "z-scrim": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "200"
+  },
+  "z-modal": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "210"
+  },
+  "z-anchored": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "220"
+  },
+  "z-toast": {
+    "layer": "tokens",
+    "category": "layer",
+    "light": "300"
+  },
+  "focus": {
+    "layer": "tokens",
+    "category": "focus",
+    "light": "var(--red)",
+    "comment": "─── Focus ───"
+  },
+  "focus-w": {
+    "layer": "tokens",
+    "category": "focus",
+    "light": "2px"
+  },
+  "focus-off": {
+    "layer": "tokens",
+    "category": "focus",
+    "light": "3px"
+  },
+  "ico-s": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "14px",
+    "comment": "─── Icons ─── three sizes, and no weight: a Remix Icon glyph is a filled path."
+  },
+  "ico-m": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "16px"
+  },
+  "ico-l": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "20px"
+  },
+  "ok": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#3d6b34",
+    "comment": "─── Status ─── the only chroma in the system, and it is bound to state.",
+    "dark": "#84b47b"
+  },
+  "ok-soft": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "rgba(61, 107, 52, 0.13)",
+    "dark": "rgba(132, 180, 123, 0.16)"
+  },
+  "warn": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#8a5a00",
+    "dark": "#d9a55d"
+  },
+  "warn-soft": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "rgba(138, 90, 0, 0.13)",
+    "dark": "rgba(217, 165, 93, 0.16)"
+  },
+  "danger": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "#a83214",
+    "dark": "#ee8b68"
+  },
+  "danger-soft": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "rgba(168, 50, 20, 0.14)",
+    "dark": "rgba(238, 139, 104, 0.16)"
+  },
+  "scrim": {
+    "layer": "tokens",
+    "category": "colour",
+    "light": "color-mix(in srgb, var(--ink) 62%, transparent)",
+    "dark": "color-mix(in srgb, #000 72%, transparent)"
+  },
+  "background": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--paper)",
+    "comment": "─── Surfaces ───────────────────────────────────────────────────────────"
+  },
+  "background-elevated": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--paper-2)"
+  },
+  "code-background": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--bar)"
+  },
+  "nav-background": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--paper)"
+  },
+  "card-background": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--paper)",
+    "comment": "Kept as an alias rather than removed: the White Reset retired the card surface, so an elevated variant has nothing left to point at. Consumers written against it keep resolving, on paper."
+  },
+  "foreground": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink)",
+    "comment": "─── Text ───────────────────────────────────────────────────────────────"
+  },
+  "foreground-muted": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-2)"
+  },
+  "secondary-text": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "var(--ink-3-aa)"
+  },
+  "on-dark": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "#fbfbfa",
+    "comment": "Text sitting on a PHOTOGRAPH — a hero, a lightbox, a scrim. A photograph is a dark ground in BOTH themes, so this must not follow the paper/ink swap: as var(--paper) it inverted to near-black in dark mode, which is how headings disappeared into their own images. A literal, not var(--ink)."
+  },
+  "brand-plate": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "#ffffff",
+    "comment": "The ground under a THIRD-PARTY brand mark, and for the same reason: a foreign logo is drawn against one fixed backdrop and shipped flat, with no light-ink sibling. A plate that followed the swap erased it in dark mode. Not for our own marks, which are authored against the theme."
+  },
+  "border-color": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--rule-2)",
+    "comment": "─── Lines ──────────────────────────────────────────────────────────────"
+  },
+  "border-subtle": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--rule)"
+  },
+  "accent": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red)",
+    "comment": "─── Accent ───────────────────────────────────────────────────────────── One pointer, and in a monochrome system it points at ink — law 7. Every surface that marks a CHOICE reads from here rather than from --ink directly: a primary button, a checked box, the active tab, the current page, a slider's filled range, the selected day. That distinction is the whole point of having a pointer at all. While the accent IS ink the two render identically, which is why it went unnoticed that half the system was reading the primitive — and why re-pointing this one token now re-skins the system without a component being touched."
+  },
+  "accent-hover": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red-ink)"
+  },
+  "accent-muted": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red-soft)"
+  },
+  "accent-wash": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red-soft)"
+  },
+  "accent-foreground": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--on-red)"
+  },
+  "accent-on-dark": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red)"
+  },
+  "accent-on-muted": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red-ink)",
+    "comment": "Accent text sitting on an accent-muted panel, which --accent cannot do: it clears AA on paper by 4.58:1, and any tint of itself underneath pushes it below 4.5. This names the situation so the choice is not left to whoever writes the next panel."
+  },
+  "success": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ok)",
+    "comment": "─── Status ─── bound to state, never to brand. ─────────────────────────"
+  },
+  "success-wash": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ok-soft)"
+  },
+  "warning": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--warn)"
+  },
+  "warning-wash": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--warn-soft)"
+  },
+  "danger-wash": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--danger-soft)"
+  },
+  "info": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-2)"
+  },
+  "info-wash": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--red-soft)"
+  },
+  "photo-scrim": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "#101010",
+    "comment": "The photo scrim is always dark by design, so it takes the ink literal rather than the semantic token (which inverts)."
+  },
+  "chart-surface": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--paper)",
+    "comment": "─── Data ───────────────────────────────────────────────────────────── What a chart is allowed to read. The series ramp itself stays a primitive — a chart names a SERIES by index, and an index has no role to alias — but everything around the marks does have one, and naming it here is what keeps a chart from reaching for --rule or --ink directly. --chart-cursor is deliberately heavier than --chart-grid: the crosshair has to be findable against the grid it crosses, and at hairline weight on a dashed grid it was not."
+  },
+  "chart-grid": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)"
+  },
+  "chart-cursor": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule-2)"
+  },
+  "chart-axis": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--ink-3-aa)"
+  },
+  "chart-track": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--series-track)"
+  },
+  "chart-pattern": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)",
+    "comment": "The decorative plate behind the plot — a dot field, a hatch, a grid of plus marks. One step quieter than the grid, because it sits BEHIND data and must never compete with it for the same read."
+  },
+  "shadow-color": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "transparent",
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
+  },
+  "shadow-sm": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "none"
+  },
+  "shadow": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "none"
+  },
+  "shadow-lg": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "none"
+  },
+  "lift": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "3px 3px 0 0 var(--shadow-offset)",
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
+  },
+  "lift-sm": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "2px 2px 0 0 var(--shadow-offset)"
+  },
+  "ring": {
+    "layer": "semantic",
+    "category": "focus",
+    "light": "var(--focus)",
+    "comment": "─── Focus + motion ─── the site's long-lived names onto the primitives."
+  },
+  "ring-offset": {
+    "layer": "semantic",
+    "category": "focus",
+    "light": "var(--focus-off)"
+  },
+  "ease-out-expo": {
+    "layer": "semantic",
+    "category": "motion",
+    "light": "var(--ease)"
+  },
+  "duration-fast": {
+    "layer": "semantic",
+    "category": "motion",
+    "light": "var(--fast)"
+  },
+  "duration-base": {
+    "layer": "semantic",
+    "category": "motion",
+    "light": "var(--mid)"
+  },
+  "duration-slow": {
+    "layer": "semantic",
+    "category": "motion",
+    "light": "var(--slow)"
+  },
+  "overlay": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--scrim)"
+  },
+  "disabled-opacity": {
+    "layer": "semantic",
+    "category": "depth",
+    "light": "0.5"
+  },
+  "z-dropdown": {
+    "layer": "semantic",
+    "category": "layer",
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
+  },
+  "z-overlay": {
+    "layer": "semantic",
+    "category": "layer",
+    "light": "var(--z-scrim)"
+  },
+  "diagram-surface": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Diagrams ─────────────────────────────────────────────────────────── The figures in `@misoto22/folio/diagrams`, which draw in SVG and therefore cannot read a custom property from a presentation attribute — every one of these reaches a mark through a style rule. Named separately from the page's own rules rather than pointed straight at --rule-2 because a figure is a PICTURE inside a document: its hairline has to hold up against a 1200-wide raster export and a greyscale print, where the page's own hairline is chosen to disappear. Keeping the two apart is what lets a figure be tuned without touching a table. Nothing here is a hue. The seven kinds of node are separated by drawn sigils, and the only colour a figure spends is --success / --danger on a terminal lifecycle state — the same two the rest of the system reserves for state and refuses to spend on brand."
+  },
+  "diagram-node": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper)"
+  },
+  "diagram-node-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-band": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--stone)"
+  },
+  "diagram-chip": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--paper-2)"
+  },
+  "diagram-rule": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "diagram-rule-hard": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-line": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-line-strong": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-line-soft": {
+    "layer": "semantic",
+    "category": "colour",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-sigil": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink)"
+  },
+  "diagram-ink-2": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-2)"
+  },
+  "diagram-ink-3": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--ink-3-aa)"
+  },
+  "diagram-plate": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent)",
+    "comment": "The reversed plate, and its type. A figure gets ONE of these — the node the diagram is about — for the same reason a page gets one Card variant=\"plate\"."
+  },
+  "diagram-plate-ink": {
+    "layer": "semantic",
+    "category": "other",
+    "light": "var(--accent-foreground)"
+  },
+  "page-pad": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "var(--pad)",
+    "comment": "─── Layout ─────────────────────────────────────────────────────────────"
+  },
+  "w-page": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "var(--maxw)"
+  },
+  "w-reading": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "46rem",
+    "comment": "Caps the prose track only, which is what a 73ch measure is for."
+  },
+  "measure-record": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "66ch",
+    "comment": "The cap on a listed record's description — a row, a card, a CV entry. In `ch` rather than px so it tracks the type it is set in, and one token rather than the six hand-picked widths surfaces had drifted into. A ceiling, not a width: a narrower column still wins."
+  },
+  "scroll-offset": {
+    "layer": "semantic",
+    "category": "space",
+    "light": "calc(var(--bar-h) + 1.5rem)",
+    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air. Both halves are now named: the masthead is `--bar-h`, so a bar that moves takes its anchors with it, where `88px` was a number somebody derived once by hand and nothing kept in step."
+  }
+}