@misoto22/design 0.3.1

package/dist/tokens.js

@@ -0,0 +1,766 @@
+/* GENERATED by scripts/emit-tokens.mjs — do not edit. */
+export const TOKENS = {
+  "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)"
+  },
+  "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)"
+  },
+  "fs-lead": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
+    "comment": "page h1 40 → 54px"
+  },
+  "fs-heading": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
+    "comment": "band heading 30 → 42px"
+  },
+  "fs-sub": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
+    "comment": "record title 24 → 29px"
+  },
+  "fs-item": {
+    "layer": "tokens",
+    "category": "type",
+    "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
+    "comment": "card sub-head 21 → 25px"
+  },
+  "pad": {
+    "layer": "tokens",
+    "category": "space",
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
+    "comment": "in-card title 18 → 20px"
+  },
+  "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-sm": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "6px",
+    "comment": "─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was \"0 everywhere\"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here."
+  },
+  "radius": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "8px",
+    "comment": "images, thumbnails, media frames"
+  },
+  "radius-lg": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "14px",
+    "comment": "inputs, buttons, small plates"
+  },
+  "radius-pill": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "999px",
+    "comment": "feature panels, dark plates"
+  },
+  "control-h-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.875rem"
+  },
+  "control-h-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "2.25rem",
+    "comment": "30px"
+  },
+  "control-h-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "2.5rem",
+    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+  },
+  "control-px-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.75rem",
+    "comment": "40px"
+  },
+  "control-px-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1rem"
+  },
+  "control-px-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "1.25rem"
+  },
+  "control-py-sm": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.25rem"
+  },
+  "control-py-md": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.375rem"
+  },
+  "control-py-lg": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.5rem"
+  },
+  "control-gap": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.5rem"
+  },
+  "field-px": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.625rem"
+  },
+  "field-py": {
+    "layer": "tokens",
+    "category": "density",
+    "light": "0.375rem"
+  },
+  "table-pad-y": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0.5rem"
+  },
+  "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."
+  },
+  "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."
+  },
+  "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-palette": {
+    "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 ─── one stroke weight, three sizes."
+  },
+  "ico-m": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "16px"
+  },
+  "ico-l": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "20px"
+  },
+  "ico-stroke": {
+    "layer": "tokens",
+    "category": "icon",
+    "light": "1.5"
+  },
+  "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)."
+  },
+  "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. Reach for --lift instead, which is the offset idiom expressed once."
+  },
+  "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. Used by a plate that must read as sitting above the page."
+  },
+  "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-drawer)",
+    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+  },
+  "z-overlay": {
+    "layer": "semantic",
+    "category": "layer",
+    "light": "var(--z-scrim)"
+  },
+  "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": "88px",
+    "comment": "How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air."
+  }
+}