division-ds 0.0.0-stage → 0.1.0

package/public/manifest/tokens.json

@@ -0,0 +1,932 @@
+{
+  "generatedBy": "scripts/build-tokens.mjs",
+  "rule": "Components and screens use semantic and component tokens only, as var(--name). Primitive colour ramps (--color-<ramp>-<stop>) are the raw material the semantic layer is built from, not a palette to pick from.",
+  "tokens": [
+    {
+      "name": "--color-signal-50",
+      "layer": "primitive",
+      "value": "#fef5f0"
+    },
+    {
+      "name": "--color-signal-100",
+      "layer": "primitive",
+      "value": "#fcd5c3"
+    },
+    {
+      "name": "--color-signal-200",
+      "layer": "primitive",
+      "value": "#f9b596"
+    },
+    {
+      "name": "--color-signal-300",
+      "layer": "primitive",
+      "value": "#f79569"
+    },
+    {
+      "name": "--color-signal-400",
+      "layer": "primitive",
+      "value": "#f4753c"
+    },
+    {
+      "name": "--color-signal-500",
+      "layer": "primitive",
+      "value": "#f2550f"
+    },
+    {
+      "name": "--color-signal-600",
+      "layer": "primitive",
+      "value": "#c6440b"
+    },
+    {
+      "name": "--color-signal-700",
+      "layer": "primitive",
+      "value": "#983508"
+    },
+    {
+      "name": "--color-signal-800",
+      "layer": "primitive",
+      "value": "#6a2506"
+    },
+    {
+      "name": "--color-signal-900",
+      "layer": "primitive",
+      "value": "#3c1503"
+    },
+    {
+      "name": "--color-signal-950",
+      "layer": "primitive",
+      "value": "#0f0501"
+    },
+    {
+      "name": "--color-hostile-50",
+      "layer": "primitive",
+      "value": "#fef1f1"
+    },
+    {
+      "name": "--color-hostile-100",
+      "layer": "primitive",
+      "value": "#fccbcb"
+    },
+    {
+      "name": "--color-hostile-200",
+      "layer": "primitive",
+      "value": "#faa6a6"
+    },
+    {
+      "name": "--color-hostile-300",
+      "layer": "primitive",
+      "value": "#f78181"
+    },
+    {
+      "name": "--color-hostile-400",
+      "layer": "primitive",
+      "value": "#f55b5b"
+    },
+    {
+      "name": "--color-hostile-500",
+      "layer": "primitive",
+      "value": "#f33636"
+    },
+    {
+      "name": "--color-hostile-600",
+      "layer": "primitive",
+      "value": "#e30e0e"
+    },
+    {
+      "name": "--color-hostile-700",
+      "layer": "primitive",
+      "value": "#ae0a0a"
+    },
+    {
+      "name": "--color-hostile-800",
+      "layer": "primitive",
+      "value": "#790707"
+    },
+    {
+      "name": "--color-hostile-900",
+      "layer": "primitive",
+      "value": "#440404"
+    },
+    {
+      "name": "--color-hostile-950",
+      "layer": "primitive",
+      "value": "#0e0101"
+    },
+    {
+      "name": "--color-ok-50",
+      "layer": "primitive",
+      "value": "#f3fcf8"
+    },
+    {
+      "name": "--color-ok-100",
+      "layer": "primitive",
+      "value": "#c9f1de"
+    },
+    {
+      "name": "--color-ok-200",
+      "layer": "primitive",
+      "value": "#9ee6c5"
+    },
+    {
+      "name": "--color-ok-300",
+      "layer": "primitive",
+      "value": "#74dbab"
+    },
+    {
+      "name": "--color-ok-400",
+      "layer": "primitive",
+      "value": "#49d092"
+    },
+    {
+      "name": "--color-ok-500",
+      "layer": "primitive",
+      "value": "#2fb577"
+    },
+    {
+      "name": "--color-ok-600",
+      "layer": "primitive",
+      "value": "#269361"
+    },
+    {
+      "name": "--color-ok-700",
+      "layer": "primitive",
+      "value": "#1d714b"
+    },
+    {
+      "name": "--color-ok-800",
+      "layer": "primitive",
+      "value": "#155034"
+    },
+    {
+      "name": "--color-ok-900",
+      "layer": "primitive",
+      "value": "#0c2e1e"
+    },
+    {
+      "name": "--color-ok-950",
+      "layer": "primitive",
+      "value": "#030c08"
+    },
+    {
+      "name": "--color-info-50",
+      "layer": "primitive",
+      "value": "#f0f7ff"
+    },
+    {
+      "name": "--color-info-100",
+      "layer": "primitive",
+      "value": "#d2e7ff"
+    },
+    {
+      "name": "--color-info-200",
+      "layer": "primitive",
+      "value": "#b4d7ff"
+    },
+    {
+      "name": "--color-info-300",
+      "layer": "primitive",
+      "value": "#96c7ff"
+    },
+    {
+      "name": "--color-info-400",
+      "layer": "primitive",
+      "value": "#78b7ff"
+    },
+    {
+      "name": "--color-info-500",
+      "layer": "primitive",
+      "value": "#5aa7ff"
+    },
+    {
+      "name": "--color-info-600",
+      "layer": "primitive",
+      "value": "#1884ff"
+    },
+    {
+      "name": "--color-info-700",
+      "layer": "primitive",
+      "value": "#0063d5"
+    },
+    {
+      "name": "--color-info-800",
+      "layer": "primitive",
+      "value": "#004593"
+    },
+    {
+      "name": "--color-info-900",
+      "layer": "primitive",
+      "value": "#002651"
+    },
+    {
+      "name": "--color-info-950",
+      "layer": "primitive",
+      "value": "#00070f"
+    },
+    {
+      "name": "--color-warning-50",
+      "layer": "primitive",
+      "value": "#fff9f0"
+    },
+    {
+      "name": "--color-warning-100",
+      "layer": "primitive",
+      "value": "#ffeac8"
+    },
+    {
+      "name": "--color-warning-200",
+      "layer": "primitive",
+      "value": "#ffdaa1"
+    },
+    {
+      "name": "--color-warning-300",
+      "layer": "primitive",
+      "value": "#ffcb79"
+    },
+    {
+      "name": "--color-warning-400",
+      "layer": "primitive",
+      "value": "#ffbb52"
+    },
+    {
+      "name": "--color-warning-500",
+      "layer": "primitive",
+      "value": "#ffac2a"
+    },
+    {
+      "name": "--color-warning-600",
+      "layer": "primitive",
+      "value": "#f19300"
+    },
+    {
+      "name": "--color-warning-700",
+      "layer": "primitive",
+      "value": "#b87000"
+    },
+    {
+      "name": "--color-warning-800",
+      "layer": "primitive",
+      "value": "#804e00"
+    },
+    {
+      "name": "--color-warning-900",
+      "layer": "primitive",
+      "value": "#482c00"
+    },
+    {
+      "name": "--color-warning-950",
+      "layer": "primitive",
+      "value": "#0f0900"
+    },
+    {
+      "name": "--color-neutral-50",
+      "layer": "primitive",
+      "value": "#f2f4f8"
+    },
+    {
+      "name": "--color-neutral-100",
+      "layer": "primitive",
+      "value": "#c2cddc"
+    },
+    {
+      "name": "--color-neutral-200",
+      "layer": "primitive",
+      "value": "#92a5c0"
+    },
+    {
+      "name": "--color-neutral-300",
+      "layer": "primitive",
+      "value": "#627da4"
+    },
+    {
+      "name": "--color-neutral-400",
+      "layer": "primitive",
+      "value": "#445875"
+    },
+    {
+      "name": "--color-neutral-500",
+      "layer": "primitive",
+      "value": "#283445"
+    },
+    {
+      "name": "--color-neutral-600",
+      "layer": "primitive",
+      "value": "#212b38"
+    },
+    {
+      "name": "--color-neutral-700",
+      "layer": "primitive",
+      "value": "#19212c"
+    },
+    {
+      "name": "--color-neutral-800",
+      "layer": "primitive",
+      "value": "#12181f"
+    },
+    {
+      "name": "--color-neutral-900",
+      "layer": "primitive",
+      "value": "#0b0e13"
+    },
+    {
+      "name": "--color-neutral-950",
+      "layer": "primitive",
+      "value": "#040506"
+    },
+    {
+      "name": "--spacing-1",
+      "layer": "spacing",
+      "value": "4px",
+      "use": "4px. The gap between an icon and its label, or two tightly bound marks."
+    },
+    {
+      "name": "--spacing-2",
+      "layer": "spacing",
+      "value": "8px",
+      "use": "8px. The gap between related items in a row: chips, a label and its value."
+    },
+    {
+      "name": "--spacing-3",
+      "layer": "spacing",
+      "value": "12px",
+      "use": "12px. The gap between sibling controls, such as two buttons."
+    },
+    {
+      "name": "--spacing-4",
+      "layer": "spacing",
+      "value": "16px",
+      "use": "16px. Default padding inside a control or a compact panel; the gap between fields."
+    },
+    {
+      "name": "--spacing-6",
+      "layer": "spacing",
+      "value": "24px",
+      "use": "24px. Padding inside a Card; the gap between groups in a form."
+    },
+    {
+      "name": "--spacing-8",
+      "layer": "spacing",
+      "value": "32px",
+      "use": "32px. The gap between blocks within a section."
+    },
+    {
+      "name": "--spacing-12",
+      "layer": "spacing",
+      "value": "48px",
+      "use": "48px. The gap between sections of a page."
+    },
+    {
+      "name": "--spacing-16",
+      "layer": "spacing",
+      "value": "64px",
+      "use": "64px. The page gutter from the large breakpoint, and the gap around a hero block."
+    },
+    {
+      "name": "--duration-fast",
+      "layer": "motion",
+      "value": "120ms",
+      "use": "120ms. Hover and press feedback: colour and border changes on a control."
+    },
+    {
+      "name": "--duration-base",
+      "layer": "motion",
+      "value": "180ms",
+      "use": "180ms. The default for anything that is not hover feedback: a menu or tooltip entering, a collapse."
+    },
+    {
+      "name": "--duration-slow",
+      "layer": "motion",
+      "value": "320ms",
+      "use": "320ms. A larger change: a section expanding, a progress bar filling, the Switch thumb settling into shape after it arrives."
+    },
+    {
+      "name": "--duration-stepped",
+      "layer": "motion",
+      "value": "180ms",
+      "use": "180ms, run in steps. The Button's stepped hover arrival. Used by .transition-stepped only."
+    },
+    {
+      "name": "--ease-snap",
+      "layer": "motion",
+      "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+      "use": "The default easing curve: quick out, soft landing. Use it for every transition that is not a physical object changing shape."
+    },
+    {
+      "name": "--ease-accelerate",
+      "layer": "motion",
+      "value": "cubic-bezier(0.4, 0, 1, 1)",
+      "use": "Starts slow, gathers speed and stops at the end. For a small object that travels into a boundary and gives slightly against it (the Switch thumb). Not for anything that should land softly: that is --ease-snap."
+    },
+    {
+      "name": "--color-surface-base",
+      "layer": "semantic",
+      "value": {
+        "dark": "#07080b",
+        "light": "#f2f4f8"
+      },
+      "use": "The page background, and the opaque fill of every form and overlay. Start here: text and control colours are measured against it."
+    },
+    {
+      "name": "--color-surface-sunken",
+      "layer": "semantic",
+      "value": {
+        "dark": "#0d1016",
+        "light": "#c2cddc"
+      },
+      "use": "The opaque fill of a control you type or pick in (Input, Textarea, Select), and of small opaque surfaces: Kbd, Tag, Tooltip, menus, toasts. Not a card."
+    },
+    {
+      "name": "--color-surface-raised",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(40, 52, 69, 0.42)",
+        "light": "rgba(255, 255, 255, 0.6)"
+      },
+      "use": "The translucent fill of a Card or panel sitting on the page. Use the Card component; do not paint it by hand, and avoid nesting raised inside raised."
+    },
+    {
+      "name": "--color-surface-scrim",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(0, 0, 0, 0.6)",
+        "light": "rgba(11, 14, 19, 0.48)"
+      },
+      "use": "The dimming layer behind a Dialog, Sheet or CommandPalette. Those components paint it; nothing else should.",
+      "measured": {
+        "dark": "Dims the page behind a dialog, sheet or the command palette. The dimmed page is inert and hidden from assistive tech and carries no contrast obligation of its own. Toasts render inside the innermost open overlay's own outlet: one raised while it is open, and every one already showing when it opens, which moves in and is announced again. They stay inside the focus trap and visible to assistive tech; the next Escape closes the overlay unless focus is inside the toast.",
+        "light": "Dims the page behind a dialog, sheet or the command palette. The dimmed page is inert and hidden from assistive tech and carries no contrast obligation of its own. Toasts render inside the innermost open overlay's own outlet: one raised while it is open, and every one already showing when it opens, which moves in and is announced again. They stay inside the focus trap and visible to assistive tech; the next Escape closes the overlay unless focus is inside the toast."
+      }
+    },
+    {
+      "name": "--color-border-hairline",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(214, 226, 240, 0.16)",
+        "light": "rgba(11, 14, 19, 0.12)"
+      },
+      "use": "A quiet divider or panel edge that carries no information: row separators, card outlines."
+    },
+    {
+      "name": "--color-border-hairline-strong",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(214, 226, 240, 0.32)",
+        "light": "rgba(11, 14, 19, 0.22)"
+      },
+      "use": "A stronger decorative rule: table header underlines, section rules. Still decorative, never the only sign of a control.",
+      "measured": {
+        "dark": "Decorative only — panel edges and the corner-crosshair chrome. Deliberately subtle; composited over surface.base it reaches 2.39:1, which carries no SC 1.4.11 obligation. Never use it for a form control's boundary; that is border.control.",
+        "light": "Decorative only — panel edges and the corner-crosshair chrome. Deliberately subtle; composited over surface.base it reaches 1.64:1, which carries no SC 1.4.11 obligation. Never use it for a form control's boundary; that is border.control."
+      }
+    },
+    {
+      "name": "--color-border-control",
+      "layer": "semantic",
+      "value": {
+        "dark": "#646b72",
+        "light": "#616874"
+      },
+      "use": "The boundary of an interactive control at rest (Input, Select, secondary Button). The one border that has to be seen to find the control.",
+      "measured": {
+        "dark": "3.53:1 on surface.sunken (the control fill it is painted on) and 3.71:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on.",
+        "light": "3.49:1 on surface.sunken (the control fill it is painted on) and 5.10:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on."
+      }
+    },
+    {
+      "name": "--color-border-selection",
+      "layer": "semantic",
+      "value": {
+        "dark": "#8a939e",
+        "light": "#616874"
+      },
+      "use": "The boundary of the small selection controls at rest: Checkbox, Radio, Switch track.",
+      "measured": {
+        "dark": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. 6.12:1 on surface.sunken. Brighter than border.control (3.53:1) on purpose: a 20px box drawn with the same hairline as a 320px input carries a fraction of the edge length, and at 3.53:1 an unchecked checkbox all but vanished on the dark page. border.control stays the hairline for the large fields.",
+        "light": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. Same value as border.control in this theme (3.49:1 on surface.sunken), which reads clearly on a light page; the token exists in both themes because dark needed its own brighter step."
+      }
+    },
+    {
+      "name": "--color-text-primary",
+      "layer": "semantic",
+      "value": {
+        "dark": "#e9eef4",
+        "light": "#0b0e13"
+      },
+      "use": "Body text, headings, values. The default text colour."
+    },
+    {
+      "name": "--color-text-secondary",
+      "layer": "semantic",
+      "value": {
+        "dark": "#a3adba",
+        "light": "#19212c"
+      },
+      "use": "Supporting text beside primary text: descriptions, help text, metadata. Keep it at 14px or larger."
+    },
+    {
+      "name": "--color-text-muted",
+      "layer": "semantic",
+      "value": {
+        "dark": "#7b8592",
+        "light": "#283445"
+      },
+      "use": "The quietest readable text: captions, timestamps, disabled-looking labels. Not for anything the user must read to act.",
+      "measured": {
+        "dark": "Raised 2026-09-21 from #6f7a88 (4.59:1 on surface.base, but only 4.00:1 on surface.raised composited over surface.base — a real SC 1.4.11 failure once that pair was actually gated). Now 5.35:1 on surface.base and 4.66:1 on surface.raised."
+      }
+    },
+    {
+      "name": "--color-text-placeholder",
+      "layer": "semantic",
+      "value": {
+        "dark": "#747f8d",
+        "light": "#283445"
+      },
+      "use": "Placeholder text inside a control, on surface.sunken. Only there.",
+      "measured": {
+        "dark": "4.68:1 on surface.sunken, which is the control fill placeholder text is actually painted on. text.muted is gated against surface.base and passes there at 4.59:1, but reaches only 4.37:1 on the sunken fill — so placeholder needs its own step.",
+        "light": "7.83:1 on surface.sunken, the control fill it is painted on. Light theme needs no separate step from text.muted — unlike dark, where muted reaches only 4.37:1 there — but the name exists in both themes so the component layer has one alias to point at."
+      }
+    },
+    {
+      "name": "--color-text-label",
+      "layer": "semantic",
+      "value": {
+        "dark": "#6f7a88",
+        "light": "#445875"
+      },
+      "use": "Group labels that head a list of items (the command palette's group titles). Uppercase mono, never body text.",
+      "measured": {
+        "dark": "Group and section labels that must read as a heading over a list, not as another item in it (the sidebar's GUIDELINES / ATOMS). 4.59:1 on surface.base against text.secondary's 8.82:1 for the items beneath: the gap in luminance is the point. Sits just above the AA floor on purpose; gated.",
+        "light": "Group and section labels that must read as a heading over a list, not as another item in it (the sidebar's GUIDELINES / ATOMS). 6.58:1 on surface.base against text.secondary's 14.72:1. Exists because light text.muted (11.44:1) sits too close to text.secondary to separate a label from the links under it. Gated."
+      }
+    },
+    {
+      "name": "--color-accent-signal-fill",
+      "layer": "semantic",
+      "value": "#f2550f",
+      "use": "A solid block in the brand orange: the primary Button, a solid signal Badge. Put accent.signal.ink on it, never text.primary."
+    },
+    {
+      "name": "--color-accent-signal-text",
+      "layer": "semantic",
+      "value": {
+        "dark": "#f2550f",
+        "light": "#983508"
+      },
+      "use": "Orange text or icon on a surface: a current nav item, an emphasised figure, a link accent.",
+      "measured": {
+        "dark": "5.80:1 on surface.base",
+        "light": "6.70:1 on surface.base -- promoted a step from dark theme's 500, because 500 only reaches 3.14:1 on the light base"
+      }
+    },
+    {
+      "name": "--color-accent-signal-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.signal.fill.",
+      "measured": {
+        "dark": "5.85:1 on accent.signal.fill"
+      }
+    },
+    {
+      "name": "--color-accent-signal-wash",
+      "layer": "semantic",
+      "value": "rgba(242, 85, 15, 0.12)",
+      "use": "The faint orange hover wash under a nav item or an inactive tab.",
+      "measured": {
+        "dark": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. The focus ring and a checked control's fill drop under 3:1 on it in light theme, so neither is ever drawn on it.",
+        "light": "Hover wash under a nav item or an inactive tab. Text on it is text.primary and gated. The focus ring and a checked control's fill drop under 3:1 on it in light theme, so neither is ever drawn on it."
+      }
+    },
+    {
+      "name": "--color-accent-signal-glow",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(242, 85, 15, 0.38)",
+        "light": "rgba(242, 85, 15, 0.3)"
+      },
+      "use": "The faint shadow of an interactive Card on hover and focus. Used by the Card component only.",
+      "measured": {
+        "dark": "The colour of the faint shadow an interactive Card casts on hover and on keyboard focus inside it (.card-interactive, src/styles/elevation.css): signal.500 at part strength, on the near-black page a shadow this strong reads as a soft halo. A shadow, never a fill, a border or text: it bounds nothing and carries no state on its own (the border beside it does, in accent.signal.fill), so it owes no ratio and has no pair in the gate.",
+        "light": "The colour of the faint shadow an interactive Card casts on hover and on keyboard focus inside it (.card-interactive, src/styles/elevation.css): signal.500 at part strength, a little weaker than dark: on the pale page the same alpha reads as a stain. A shadow, never a fill, a border or text: it bounds nothing and carries no state on its own (the border beside it does, in accent.signal.fill), so it owes no ratio and has no pair in the gate."
+      }
+    },
+    {
+      "name": "--color-accent-hostile-fill",
+      "layer": "semantic",
+      "value": "#f33636",
+      "use": "A solid block for danger or failure: the danger Button, a solid hostile Badge. Put accent.hostile.ink on it."
+    },
+    {
+      "name": "--color-accent-hostile-text",
+      "layer": "semantic",
+      "value": {
+        "dark": "#f55b5b",
+        "light": "#ae0a0a"
+      },
+      "use": "Error and destructive text or icon on a surface: field errors, an invalid border, a failed status.",
+      "measured": {
+        "dark": "6.23:1 on surface.base, 5.42:1 on surface.raised, 4.80:1 on raised nested in raised, 5.92:1 on surface.sunken. hostile.500 measured 4.48:1 on surface.raised, under 4.5:1.",
+        "light": "6.70:1 on surface.base"
+      }
+    },
+    {
+      "name": "--color-accent-hostile-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.hostile.fill.",
+      "measured": {
+        "dark": "5.19:1 on accent.hostile.fill",
+        "light": "5.19:1 on accent.hostile.fill"
+      }
+    },
+    {
+      "name": "--color-accent-ok-fill",
+      "layer": "semantic",
+      "value": "#2fb577",
+      "use": "A solid block for success or a healthy state. Put accent.ok.ink on it."
+    },
+    {
+      "name": "--color-accent-ok-text",
+      "layer": "semantic",
+      "value": {
+        "dark": "#2fb577",
+        "light": "#1d714b"
+      },
+      "use": "Success text or icon on a surface: a positive delta, an in-stock status.",
+      "measured": {
+        "dark": "7.63:1 on surface.base",
+        "light": "5.42:1 on surface.base"
+      }
+    },
+    {
+      "name": "--color-accent-ok-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.ok.fill.",
+      "measured": {
+        "dark": "7.69:1 on accent.ok.fill",
+        "light": "7.69:1 on accent.ok.fill"
+      }
+    },
+    {
+      "name": "--color-accent-info-fill",
+      "layer": "semantic",
+      "value": "#5aa7ff",
+      "use": "A solid block for neutral information. Put accent.info.ink on it."
+    },
+    {
+      "name": "--color-accent-info-text",
+      "layer": "semantic",
+      "value": {
+        "dark": "#5aa7ff",
+        "light": "#0063d5"
+      },
+      "use": "Informational text or icon on a surface: an in-progress status, a note.",
+      "measured": {
+        "dark": "8.02:1 on surface.base",
+        "light": "5.09:1 on surface.base"
+      }
+    },
+    {
+      "name": "--color-accent-info-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.info.fill.",
+      "measured": {
+        "dark": "8.08:1 on accent.info.fill",
+        "light": "8.08:1 on accent.info.fill"
+      }
+    },
+    {
+      "name": "--color-accent-warning-fill",
+      "layer": "semantic",
+      "value": "#ffac2a",
+      "use": "A solid block for a warning or a degraded state. Put accent.warning.ink on it."
+    },
+    {
+      "name": "--color-accent-warning-text",
+      "layer": "semantic",
+      "value": {
+        "dark": "#ffac2a",
+        "light": "#804e00"
+      },
+      "use": "Warning text or icon on a surface: a pending or degraded status.",
+      "measured": {
+        "dark": "10.67:1 on surface.base",
+        "light": "6.34:1 on surface.base -- needs two steps, not one; 700 only reaches 3.56:1"
+      }
+    },
+    {
+      "name": "--color-accent-warning-ink",
+      "layer": "semantic",
+      "value": "#0a0602",
+      "use": "Text and icons on accent.warning.fill.",
+      "measured": {
+        "dark": "10.76:1 on accent.warning.fill",
+        "light": "10.76:1 on accent.warning.fill"
+      }
+    },
+    {
+      "name": "--color-numeral-pad",
+      "layer": "semantic",
+      "value": {
+        "dark": "#7b8592",
+        "light": "#627da4"
+      },
+      "use": "The dimmed leading zeros of a hero numeral. Decorative; never text that has to be read.",
+      "measured": {
+        "dark": "The dimmed leading-zero pad on a hero numeral (Overview, Progress readout, docs section index). Decorative and aria-hidden: it is a column width, never a value, so no SC 1.4.3 obligation attaches to it. 5.35:1 on surface.base, which is 31% of text.primary's 17.17:1 there -- that share, not the absolute ratio, is what makes it read as padding rather than as a digit. Holds the same value text.muted holds in this theme and is deliberately NOT an alias of it: text.muted is real secondary text with an AA floor, and the two move for different reasons.",
+        "light": "The dimmed leading-zero pad. 3.82:1 on surface.base, 22% of text.primary's 17.55:1 there, against the dark theme's 31%. Light theme needs a LIGHTER step than text.muted for the same role: muted aliases neutral.500 and measures 11.44:1 here, 65% of ink, which does not read as dimmed and out-shouts the signal.fill numeral it is padding (3.14:1 on this surface). neutral.400 would land at 6.58:1 and 38% of ink, closer to dark's share but more than twice the contrast of the digits beside it, so neutral.300 is the step that keeps the pad quieter than what it pads."
+      }
+    },
+    {
+      "name": "--color-focus-ring",
+      "layer": "semantic",
+      "value": "#f2550f",
+      "use": "The keyboard focus outline. Use it only in focus-visible:outline-[var(--color-focus-ring)], with a 2px outline and a 2px offset."
+    },
+    {
+      "name": "--color-chart-series-1",
+      "layer": "semantic",
+      "value": {
+        "dark": "#f2550f",
+        "light": "#c6440b"
+      },
+      "use": "The first data series in a chart. A graphic colour, never text. ChartPanel applies it.",
+      "measured": {
+        "dark": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 5.80:1 on surface.base, 5.05:1 on surface.raised, 4.47:1 nested. Never text.",
+        "light": "First chart series: a line, a bar, a legend swatch. A graphic, 3:1: 4.51:1 on surface.base, 4.79:1 on surface.raised, 4.88:1 nested. Never text."
+      }
+    },
+    {
+      "name": "--color-chart-series-2",
+      "layer": "semantic",
+      "value": {
+        "dark": "#1884ff",
+        "light": "#0063d5"
+      },
+      "use": "The second data series in a chart. A graphic colour, never text. There is no third: split the chart.",
+      "measured": {
+        "dark": "Second chart series. 5.52:1 on surface.base, 4.80:1 on surface.raised, 4.25:1 nested. Never text. There is no third: the other hues are status colours.",
+        "light": "Second chart series. 5.09:1 on surface.base, 5.41:1 on surface.raised, 5.52:1 nested. Never text. There is no third: the other hues are status colours."
+      }
+    },
+    {
+      "name": "--component-control-height-sm",
+      "layer": "component",
+      "value": "32px",
+      "use": "Height of a small control (32px): a compact Button, an Input in a dense row."
+    },
+    {
+      "name": "--component-control-height-md",
+      "layer": "component",
+      "value": "40px",
+      "use": "Height of a default control (40px). What Button, Input and Select use unless told otherwise."
+    },
+    {
+      "name": "--component-control-height-lg",
+      "layer": "component",
+      "value": "48px",
+      "use": "Height of a large control (48px): the main action of a page or a touch-first form."
+    },
+    {
+      "name": "--component-control-border-rest",
+      "layer": "component",
+      "value": "var(--color-border-control)",
+      "use": "A text control's border at rest. Set by Input, Textarea and Select."
+    },
+    {
+      "name": "--component-control-border-hover",
+      "layer": "component",
+      "value": "var(--color-text-muted)",
+      "use": "A text control's border under the pointer."
+    },
+    {
+      "name": "--component-control-border-invalid",
+      "layer": "component",
+      "value": "var(--color-accent-hostile-text)",
+      "use": "A control's border when its field has an error. Set through the invalid prop, which FormField passes."
+    },
+    {
+      "name": "--component-control-border-selection",
+      "layer": "component",
+      "value": "var(--color-border-selection)",
+      "use": "The border of Checkbox, Radio and Switch at rest."
+    },
+    {
+      "name": "--component-control-border-selection-hover",
+      "layer": "component",
+      "value": "var(--color-text-secondary)",
+      "use": "The border of Checkbox, Radio and Switch under the pointer."
+    },
+    {
+      "name": "--component-control-border-disabled",
+      "layer": "component",
+      "value": "var(--color-border-control)",
+      "use": "A disabled control's border."
+    },
+    {
+      "name": "--component-control-indicator-checked",
+      "layer": "component",
+      "value": "var(--color-accent-signal-text)",
+      "use": "The colour of a selection control in its chosen state: a checked Checkbox, a selected Radio, an on Switch."
+    },
+    {
+      "name": "--component-control-progress-fill-ok",
+      "layer": "component",
+      "value": "var(--color-accent-ok-text)",
+      "use": "A Progress bar's fill at tone ok."
+    },
+    {
+      "name": "--component-control-progress-fill-warning",
+      "layer": "component",
+      "value": "var(--color-accent-warning-text)",
+      "use": "A Progress bar's fill at tone warning."
+    },
+    {
+      "name": "--component-control-progress-fill-hostile",
+      "layer": "component",
+      "value": "var(--color-accent-hostile-text)",
+      "use": "A Progress bar's fill at tone hostile."
+    },
+    {
+      "name": "--component-control-fill-rest",
+      "layer": "component",
+      "value": "var(--color-surface-sunken)",
+      "use": "A text control's fill."
+    },
+    {
+      "name": "--component-control-fill-disabled",
+      "layer": "component",
+      "value": "var(--color-surface-raised)",
+      "use": "A disabled control's fill."
+    },
+    {
+      "name": "--component-control-text-rest",
+      "layer": "component",
+      "value": "var(--color-text-primary)",
+      "use": "The text typed into a control."
+    },
+    {
+      "name": "--component-control-text-placeholder",
+      "layer": "component",
+      "value": "var(--color-text-placeholder)",
+      "use": "A control's placeholder text."
+    },
+    {
+      "name": "--component-control-text-disabled",
+      "layer": "component",
+      "value": "var(--color-text-muted)",
+      "use": "A disabled control's text."
+    },
+    {
+      "name": "--component-button-primary-fill",
+      "layer": "component",
+      "value": "var(--color-accent-signal-fill)",
+      "use": "The primary Button's fill. Use the Button; do not rebuild it."
+    },
+    {
+      "name": "--component-button-primary-text",
+      "layer": "component",
+      "value": "var(--color-accent-signal-ink)",
+      "use": "The primary Button's label."
+    },
+    {
+      "name": "--component-button-danger-fill",
+      "layer": "component",
+      "value": "var(--color-accent-hostile-fill)",
+      "use": "The danger Button's fill."
+    },
+    {
+      "name": "--component-button-danger-text",
+      "layer": "component",
+      "value": "var(--color-accent-hostile-ink)",
+      "use": "The danger Button's label."
+    },
+    {
+      "name": "--component-button-secondary-border",
+      "layer": "component",
+      "value": "var(--color-border-control)",
+      "use": "The secondary Button's border."
+    },
+    {
+      "name": "--component-button-secondary-text",
+      "layer": "component",
+      "value": "var(--color-text-primary)",
+      "use": "The secondary Button's label."
+    },
+    {
+      "name": "--component-button-ghost-text",
+      "layer": "component",
+      "value": "var(--color-text-secondary)",
+      "use": "The ghost Button's label at rest."
+    },
+    {
+      "name": "--component-button-ghost-text-hover",
+      "layer": "component",
+      "value": "var(--color-text-primary)",
+      "use": "The ghost Button's label under the pointer."
+    }
+  ]
+}