@faqir-ui/core 1.0.0 → 1.1.1

package/dist/faqir.slate.css

@@ -131,6 +131,18 @@
   --font-mono:   ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;
   --font-serif:  'Georgia', 'Times New Roman', serif;
 
+  /* ── Font Roles (task 1.1A-01) ──
+     The three families above are the PALETTE; these three are the ROLES that
+     components actually read. A theme re-points a role once and every heading,
+     every paragraph and every control follows — "serif headings on a sans body"
+     is one declaration rather than sixty-four stylesheet edits. Components never
+     read --font-sans / --font-serif directly (gated by
+     tests/tokens/role-tokens.test.ts); --font-mono stays readable by name,
+     because "this is code" is a semantic choice, not a stylistic one. */
+  --font-heading: var(--font-sans);   /* h1–h6, hero headline, card/dialog titles, stat values, doc headings */
+  --font-body:    var(--font-sans);   /* prose, text, document body, descriptions */
+  --font-ui:      var(--font-sans);   /* controls: button, input, select, badge, chip, tabs, menus */
+
   /* ── Font Sizes ── */
   --text-xs:     0.75rem;    /* 12px */
   --text-sm:     0.875rem;   /* 14px */
@@ -153,10 +165,29 @@
   --weight-medium:   500;
   --weight-semibold: 600;
   --weight-bold:     700;
+
+  /* ── Heading Voice (task 1.1A-01) ──
+     What makes a heading sound like the theme rather than like the body text one
+     size up: how heavy it is, how tightly the letters sit, whether it shouts, and
+     how close its own lines run. The defaults reproduce today's primary heading
+     exactly, so a project that sets none of them renders unchanged. A heading
+     that deliberately steps DOWN from the primary voice (prose h2–h4, a semibold
+     step below h1) keeps its own weight and leading and takes family, tracking
+     and case from the voice — the step is the design, not a value to re-derive. */
+  --heading-weight:    var(--weight-bold);
+  --heading-tracking:  0em;           /* letter-spacing — carries a unit so it
+                                         composes inside calc() where a heading
+                                         already has its own optical tightening */
+  --heading-transform: none;          /* text-transform */
+  --heading-caps:      normal;        /* font-variant-caps — small caps are a
+                                         variant, not a transform (1.1A-25), so
+                                         they get a knob of their own that sits
+                                         beside --heading-transform */
+  --heading-leading:   var(--leading-tight);
 }
 
 /* === tokens/effects.css === */
-/* @ui:tokens effects — radii, shadows, z-index */
+/* @ui:tokens effects — radii, shape, shadows, focus, z-index */
 
 :root {
   /* ── Radii ── */
@@ -168,12 +199,49 @@
   --radius-2xl:  1rem;       /* 16px */
   --radius-full: 9999px;
 
-  /* ── Shadows ── */
-  --shadow-xs:  0 1px 2px oklch(0 0 0 / 0.04);
-  --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
-  --shadow-md:  0 4px 6px oklch(0 0 0 / 0.05), 0 2px 4px oklch(0 0 0 / 0.04);
-  --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.06), 0 4px 6px oklch(0 0 0 / 0.04);
-  --shadow-xl:  0 20px 25px oklch(0 0 0 / 0.08), 0 8px 10px oklch(0 0 0 / 0.04);
+  /* ── Shape ── */
+  /* The weight of an edge. A component names the ROLE (--border-width, or
+     --border-width-strong where the design leans on a thicker rule), never a
+     step, so a theme re-points every edge it ships with one declaration. */
+  --border-width-sm: 1px;
+  --border-width-md: 2px;
+  --border-width-lg: 3px;
+  --border-width:        var(--border-width-sm);   /* the default component border */
+  --border-width-strong: var(--border-width-md);   /* emphasis: keycap, thick rule, active tab */
+  /* Progressive: CSS Borders 4. A browser without the property ignores it; a
+     value it does not know resolves to `round`, which is today's rendering. */
+  --corner-shape: round;                           /* bevel | scoop | notch where supported */
+
+  /* ── Depth ── */
+  /* The colour every shadow is cast in, as BARE OKLCH channels (L C H, no
+     `oklch()` around them) so each step can still set its own alpha:
+     `oklch(var(--shadow-color) / 0.06)`. A theme tints its depth warm, or
+     removes it entirely, with one declaration instead of rewriting five
+     multi-layer values. `0 0 0` is black — today's rendering, exactly. */
+  --shadow-color: 0 0 0;
+
+  --shadow-xs:  0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm:  0 1px 3px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-md:  0 4px 6px oklch(var(--shadow-color) / 0.05), 0 2px 4px oklch(var(--shadow-color) / 0.04);
+  --shadow-lg:  0 10px 15px oklch(var(--shadow-color) / 0.06), 0 4px 6px oklch(var(--shadow-color) / 0.04);
+  --shadow-xl:  0 20px 25px oklch(var(--shadow-color) / 0.08), 0 8px 10px oklch(var(--shadow-color) / 0.04);
+
+  /* What an elevated surface does to whatever shows through it. Every surface
+     that can float — card, surface[data-variant="overlay"] and the seven
+     floating recipes — declares `backdrop-filter: var(--surface-backdrop)`
+     inside the same `@supports` guard, so a frosted theme is a token rather
+     than a stylesheet that reaches into seven components by selector.
+     `none` is the initial value of the property: no-op until a theme speaks. */
+  --surface-backdrop: none;
+
+  /* ── Focus ── */
+  /* base/reset.css owns the default ring and reads only these. Every control
+     that draws its own ring reads them too, so a theme changes focus once. */
+  --focus-ring-width:  2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-style:  solid;
+  --focus-ring-color:  var(--color-ring);
+  --focus-shadow:      none;                       /* a glow theme puts a shadow behind the ring */
 
   /* ── Z-Index ── */
   --z-base:     0;
@@ -186,8 +254,74 @@
   --z-max:      9999;
 }
 
+/* ── Scheme islands ── */
+/* The ring colour, restated where a scheme can change below the root: declared
+   on `:root` alone it resolves `--color-ring` once, from the page, and a nested
+   `data-theme="dark"` region would draw the light ring. See the same block in
+   tokens/aliases.css. `--focus-shadow` is deliberately NOT restated — it is a
+   depth value a theme owns, and restating it would replace the theme's glow
+   with `none` inside every island. */
+[data-theme],
+[data-skin] {
+  --focus-ring-color:  var(--color-ring);
+}
+
+/* === tokens/textures.css === */
+/* @ui:tokens textures — named surface materials (SVG data URIs) */
+
+/* ══════════════════════════════════════════════════════════════════════════
+   The material palette.
+   ══════════════════════════════════════════════════════════════════════════
+   Six named textures, each a self-contained `url("data:image/svg+xml,…")` that
+   tiles. Nothing here is consumed directly: components read the two ROLE tokens
+   in `aliases.css` — `--texture-page` (body, document) and `--texture-surface`
+   (surface, card, hero) — both `none` by default, so the registry renders
+   exactly as it did before this file existed. A theme opts in with one
+   declaration:
+
+     --texture-page: var(--texture-grain);
+
+   This file is deliberately OUTSIDE the themeable surface (see
+   `NON_SURFACE_TOKEN_FILES` in `src/theme-manifest.ts`): a theme re-points the
+   two role tokens, it does not inherit six data URIs into its manifest.
+
+   On `currentColor`: the tint is written as `currentColor` so the markup states
+   its intent and a theme can re-point the whole token, but a data-URI SVG used
+   as `background-image` is its own document — `currentColor` there resolves to
+   that document's initial colour (black), not to the host element's `color`.
+   That IS the intended neutral for grain and paper, which are meant to darken a
+   surface slightly; the alpha in each texture, not the hue, is what carries the
+   effect. A theme wanting a different tint ships its own URI.
+
+   Every texture keeps its alpha low enough to survive on both schemes, and each
+   `<svg>` carries explicit `width`/`height` so the tile size is the token's,
+   not the browser's default 300×150.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  /* Film grain — fractal noise masking a flat currentColor fill. The mask is
+     what makes this a tint rather than the turbulence's own rainbow. */
+  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/mask%3E%3Crect width='160' height='160' fill='currentColor' mask='url(%23m)' opacity='0.14'/%3E%3C/svg%3E");
+
+  /* Paper fibre — lower frequency, more octaves, softer than grain. */
+  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/mask%3E%3Crect width='200' height='200' fill='currentColor' mask='url(%23m)' opacity='0.1'/%3E%3C/svg%3E");
+
+  /* Dot field — one dot per 16px cell. */
+  --texture-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='currentColor' opacity='0.18'/%3E%3C/svg%3E");
+
+  /* Graph-paper grid — hairlines on a 24px cell. */
+  --texture-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='currentColor' stroke-width='1' opacity='0.12'/%3E%3C/svg%3E");
+
+  /* Diagonal hatching — 45°, 8px pitch. */
+  --texture-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2 2-2M0 8 8 0M6 10l4-4' stroke='currentColor' stroke-width='1' opacity='0.12'/%3E%3C/svg%3E");
+
+  /* Soft gradient mesh — three offset radial blooms, the only non-tiling
+     texture here (it is sized to cover, not to repeat). */
+  --texture-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3CradialGradient id='a' cx='20%25' cy='20%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='currentColor' stop-opacity='0.18'/%3E%3Cstop offset='100%25' stop-color='currentColor' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='80%25' cy='30%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='currentColor' stop-opacity='0.14'/%3E%3Cstop offset='100%25' stop-color='currentColor' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='50%25' cy='90%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='currentColor' stop-opacity='0.12'/%3E%3Cstop offset='100%25' stop-color='currentColor' stop-opacity='0'/%3E%3C/radialGradient%3E%3Crect width='640' height='640' fill='url(%23a)'/%3E%3Crect width='640' height='640' fill='url(%23b)'/%3E%3Crect width='640' height='640' fill='url(%23c)'/%3E%3C/svg%3E");
+}
+
 /* === tokens/motion.css === */
-/* @ui:tokens motion — easings and durations */
+/* @ui:tokens motion — easings, durations and motion personality */
 
 :root {
   /* ── Easings ── */
@@ -216,6 +350,35 @@
   /* Preset geometry */
   --motion-slide-distance: 0.5rem;  /* slide-up travel */
   --motion-scale-from:     0.95;    /* scale start/end factor */
+
+  /* ── Personality (1.1A-05 · §5.2 `motion`) ── */
+  /* The easing PALETTE gained a spring. Like --ease-bounce it has no consumer
+     of its own: a theme that wants everything to overshoot re-points
+     --ease-default at it, exactly as a serif theme re-points --font-body.
+     The declaration here is the cubic-bezier APPROXIMATION, because a custom
+     property stores whatever tokens it is given — a browser without `linear()`
+     would accept the spring happily and then drop every `transition` that used
+     it, landing on the initial easing rather than on a fallback. The @supports
+     block below is what makes the upgrade conditional. The approximation is
+     the bounce curve, deliberately: an overshoot-and-settle cubic-bezier is the
+     closest a browser without `linear()` can come to a spring. */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* How far an interactive surface rises under the pointer. A `translate`
+     VALUE, not a length: `none` is the initial value of that property, so the
+     default registry computes exactly what it computed before this token
+     existed, and a theme states the lift as `0 -1px`. `translate` rather than
+     `transform` so a component's own transform is never clobbered. */
+  --motion-hover-lift: none;
+}
+
+/* The real spring, where `linear()` is understood (Chrome 113+, Safari 17.2+,
+   Firefox 112+). Declared second so it wins; guarded so it is never declared at
+   all where it would be meaningless. */
+@supports (animation-timing-function: linear(0, 1)) {
+  :root {
+    --ease-spring: linear(0, 0.3 6%, 0.7 13%, 0.95 20%, 1.03 27%, 1 40%, 1);
+  }
 }
 
 /* === tokens/semantic.css === */
@@ -307,27 +470,123 @@
   --section-gap-lg:  var(--space-32);  /* 8rem  — spacious, one idea per screen */
   --content-gutter:  var(--space-6);   /* 1.5rem — page padding-inline */
 
+  /* ── Material ── */
+  /* The two textures a theme actually points at. Components never name a
+     texture from `tokens/textures.css` directly — they read one of these, so a
+     theme re-points two tokens rather than every surface in the registry.
+     `--texture-page` dresses the page itself (body, document);
+     `--texture-surface` dresses the things that sit ON it (surface, card,
+     hero). Both `none`: the initial value of `background-image`, so the
+     default registry renders exactly as it did before they existed. */
+  --texture-page:    none;
+  --texture-surface: none;
+
+  /* ── Decoration (1.1A-05 · §5.2 `decoration`) ── */
+  /* The marks a theme draws that are not edges, fills or type: how a link is
+     underlined, how a divider is dashed, what selected text looks like, what
+     colour a list bullet is. Every default is the value the registry already
+     rendered, so this section is a set of handles, not a restyle.
+     `--marker-color` is `currentColor` — the initial value of `::marker`'s
+     colour — rather than the accent, so a list only changes when a theme says
+     it should. */
+  --link-decoration:       underline;
+  --link-underline-offset: 0.2em;
+  --link-thickness:        1px;
+  --divider-style:         solid;
+  /* The divider's own width, following the edge by default (1.1A-26). A theme
+     that asks for a `double` divider raises it to at least 3px: a double rule
+     only splits into two lines from 3px, and the family's 1px hairline would
+     paint it as one. */
+  --divider-width:         var(--border-width);
+  /* The zebra, so a theme dials the stripe without restating the four selectors
+     the table's striped variant needs (stamped and nth-child, each with a hover
+     twin). Deliberately NOT `--table-stripe`: `--table-level`,
+     `--table-thead-h` and `--table-pin-offset` are stamped and MEASURED per
+     element by the table controller, so claiming the `--table-*` namespace for
+     a theme token would put runtime state on the themeable surface. */
+  --stripe-bg:             var(--color-bg-subtle);
+  --selection-bg:          var(--color-primary-subtle);
+  --selection-fg:          var(--color-fg);
+  --marker-color:          currentColor;
+  /* How far a disabled control is dimmed. Seventeen rules across the primitives
+     and recipes each spelled `opacity: 0.5`, which left a theme with an opinion
+     about disabled legibility no way to state it except by out-specifying every
+     one of them — which is exactly what `themes/contrast.css` did, with a
+     blanket `:root [data-ui]:disabled` rule, until 1.1A-15 turned it into this
+     one declaration. `0.5` is the value those seventeen rules already held. */
+  --disabled-opacity:      0.5;
+
   /* ── Button ── */
   --button-radius:     var(--radius-md);
   --button-height-sm:  var(--control-height-sm);
   --button-height-md:  var(--control-height-md);
   --button-height-lg:  var(--control-height-lg);
-  --button-font:       var(--font-sans);
+  --button-font:       var(--font-ui);
   --button-weight:     var(--weight-medium);
+  --button-text-transform: none;
 
   /* ── Card ── */
   --card-radius:       var(--radius-lg);
   --card-shadow:       var(--shadow-sm);
   --card-border:       var(--color-surface-1-border);
+  --card-border-width: var(--border-width);
   --card-bg:           var(--color-surface-1);
   --card-padding:      var(--space-6);
 
   /* ── Input ── */
-  --input-radius:      var(--radius-md);
-  --input-height:      var(--control-height-md);
-  --input-border:      var(--color-border);
-  --input-bg:          var(--color-bg);
-  --input-font:        var(--font-sans);
+  /* The text-control silhouette. `--input-border-width` (1.1A-02) is the edge;
+     `--input-fill` is what the control paints, and `input`, `textarea` and
+     `select` all read it, so one declaration fills every text control.
+     `--input-fill` defaults to `--input-bg`, so a project that sets `--input-bg`
+     on `:root` — the 1.0 way to fill every input — still gets it. Set BELOW the
+     root, `--input-bg` no longer reaches the control: `--input-fill` has already
+     resolved it on `:root`, which is where a theme flips the fill, and a
+     per-element `--input-bg` winning over that would need the component to tell
+     "set here" from "inherited", which CSS cannot. To fill one input, or every
+     input in a region, set `--input-fill` there instead. `--input-bg-filled` is
+     the value a "filled" theme points `--input-fill` at — named here so the
+     silhouette is a token a theme flips rather than a colour it has to pick. */
+  --input-radius:       var(--radius-md);
+  --input-height:       var(--control-height-md);
+  --input-border:       var(--color-border);
+  --input-border-width: var(--border-width);
+  --input-bg:           var(--color-bg);
+  --input-bg-filled:    var(--color-bg-subtle);
+  --input-fill:         var(--input-bg);
+  --input-font:         var(--font-ui);
+
+  /* ── Checkbox / Switch ── */
+  /* The two control shapes that do not follow `--radius-md`: a checkbox is a
+     small square with a small radius, a switch is a pill. Both were literal
+     `var(--radius-*)` reads in the components; named here, a theme squares its
+     switches without touching the radius ladder every other surface uses.
+
+     The geometry beside them is not decoration — it is the rest of the
+     namespace. Naming ONE token `--checkbox-radius` makes `--checkbox-*` a
+     token family, and the registry audit then (rightly) reads every other
+     `--checkbox-…`/`--switch-…` the components carried as a token wearing a
+     fallback as a disguise. They were always the default geometry; these are
+     the values the fallbacks already held, said once. */
+  --checkbox-size:      18px;
+  --checkbox-radius:    var(--radius-sm);
+  --switch-width:       44px;
+  --switch-height:      24px;
+  --switch-thumb:       18px;
+  --switch-travel:      20px;
+  --switch-radius:      var(--radius-full);
+  --switch-bg:          var(--color-bg-muted);
+  --switch-thumb-shadow: var(--shadow-xs);
+
+  /* ── Floating panels ── */
+  /* What a panel that floats above the page is filled with: the dialog and
+     sheet panels, the drawer, the popover content (and its arrow), the dropdown
+     menu and the toast. They all painted `var(--color-bg)` directly, which left
+     a theme no way to make a floating surface differ from the page — the frost
+     half of that pairing is `--surface-backdrop` (1.1A-04), and a blur behind an
+     opaque fill renders nothing, so the fill has to be a token too. `card` has
+     had `--card-bg` since 1.0; this is the same handle for the things that have
+     no surface of their own. [1.1A-14] */
+  --panel-bg:          var(--color-bg);
 
   /* ── Dialog ── */
   --dialog-radius:     var(--radius-xl);
@@ -336,7 +595,7 @@
 
   /* ── Badge ── */
   --badge-radius:      var(--radius-full);
-  --badge-font:        var(--font-sans);
+  --badge-font:        var(--font-ui);
 
   /* ── Avatar ── */
   --avatar-radius:     var(--radius-full);
@@ -345,6 +604,39 @@
   --avatar-size-lg:    56px;
 }
 
+/* ── Scheme islands ── */
+/* The colour aliases above, restated wherever a scheme can change below the
+   root. A custom property resolves its var() on the element that DECLARES it,
+   so `--panel-bg: var(--color-bg)` on `:root` is computed once, from the page's
+   colours, and a nested `<div data-theme="dark">` inherits that light value
+   even though its own `--color-bg` is dark — a white dialog on a dark island.
+   Components that read `var(--color-bg)` directly never had the problem; the
+   aliases 1.1 routed them through did. Restating the declaration on
+   `[data-theme]` and `[data-skin]` makes it resolve again there.
+
+   Only colours are restated. Geometry does not change with the scheme, and
+   shadows are the depth axis every theme owns on `:root`: restating either here
+   would replace a theme's own value with the default inside every island. A
+   theme that overrides one of THESE on `:root` and wants it honoured in an
+   island says so on the same selectors.
+
+   The values must match the `:root` declarations above exactly;
+   `tests/tokens/scheme-islands.test.ts` fails if they drift. */
+[data-theme],
+[data-skin] {
+  --stripe-bg:         var(--color-bg-subtle);
+  --selection-bg:      var(--color-primary-subtle);
+  --selection-fg:      var(--color-fg);
+  --card-border:       var(--color-surface-1-border);
+  --card-bg:           var(--color-surface-1);
+  --input-border:      var(--color-border);
+  --input-bg:          var(--color-bg);
+  --input-bg-filled:   var(--color-bg-subtle);
+  --input-fill:        var(--input-bg);
+  --switch-bg:         var(--color-bg-muted);
+  --panel-bg:          var(--color-bg);
+}
+
 /* === tokens/document.css === */
 /* @ui:tokens document — structural tokens for document/print rendering */
 /* These tokens control page geometry, document typography, table density,
@@ -376,10 +668,10 @@
      Separate from the base typography tokens because documents have
      different optimal sizes than screen UIs. 14px body + 12px legal
      is standard for A4 business documents. */
-  --doc-font:               var(--font-sans);
+  --doc-font:               var(--font-body);
   --doc-font-size:          var(--text-sm);           /* 14px — optimal for A4 */
   --doc-line-height:        var(--leading-normal);     /* 1.5 */
-  --doc-heading-font:       var(--font-sans);
+  --doc-heading-font:       var(--font-heading);
   --doc-heading-weight:     var(--weight-bold);
   --doc-heading-size:       var(--text-xl);            /* 20px for doc titles */
   --doc-subheading-size:    var(--text-lg);            /* 18px for section titles */
@@ -430,6 +722,16 @@
   --doc-print-border-color: oklch(0.60 0 0);           /* medium gray borders in print */
 }
 
+/* ── Scheme islands ── */
+/* `--doc-legal-color` is the one document colour screen components read (the
+   key-value label and the image caption), so it is restated where a scheme can
+   change below the root — see the same block in tokens/aliases.css. The rest
+   of this file is print ink, which does not follow the scheme. */
+[data-theme],
+[data-skin] {
+  --doc-legal-color:        var(--color-fg-muted);
+}
+
 /* === tokens/doc-aliases.css === */
 /* @ui:tokens doc-aliases — component-level document tokens */
 /* Maps document-layer tokens to specific primitive/recipe attribute selectors.
@@ -476,7 +778,10 @@
   --field-error-size:       var(--doc-legal-size);
   --field-error-color:      var(--color-destructive);
   --field-validating-color: var(--color-fg-muted);     /* async validation in flight */
-  --field-disabled-opacity: 0.55;                       /* honest disabled affordance */
+  /* The role `--disabled-opacity` sets for every control, nudged 10% lighter:
+     0.55 at the 0.5 default, which is the value this alias always held, and it
+     follows a theme that states the role (1.1A-27). */
+  --field-disabled-opacity: calc(var(--disabled-opacity) * 1.1);
   --field-required-color:   var(--color-destructive);
   --field-required-marker:  ' *';                      /* appended to required labels */
 
@@ -496,15 +801,47 @@
   --stat-change-negative:   var(--color-destructive);
 }
 
+/* ── Scheme islands ── */
+/* The colour aliases above, restated where a scheme can change below the root —
+   a custom property resolves its var() on the element that declares it, so a
+   `:root`-only alias would carry the page's light value into a nested
+   `data-theme="dark"` region. See the same block in tokens/aliases.css; the
+   values must match the `:root` declarations above exactly. */
+[data-theme],
+[data-skin] {
+  --kv-label-color:         var(--doc-legal-color);
+  --kv-value-color:         var(--color-fg);
+  --callout-bg:             var(--color-bg-subtle);
+  --callout-fg:             var(--color-fg);
+  --image-border:           var(--color-border);
+  --image-caption-color:    var(--doc-legal-color);
+  --field-label-color:      var(--color-fg);
+  --field-description-color: var(--color-fg-muted);
+  --field-error-color:      var(--color-destructive);
+  --field-validating-color: var(--color-fg-muted);
+  --field-required-color:   var(--color-destructive);
+  --page-break-screen-color: var(--color-border);
+  --page-break-screen-label-color: var(--color-fg-muted);
+  --stat-label-color:       var(--color-fg-muted);
+  --stat-change-positive:   var(--color-success);
+  --stat-change-negative:   var(--color-destructive);
+}
+
 /* === tokens/density.css === */
-/* @ui:tokens density — [data-density] subtree modifier (task 0.7-11, FAQIR-NEXT §B6)
+/* @ui:tokens density — [data-density] subtree modifier (task 0.7-11, FAQIR-NEXT §B6;
+   `spacious` added 1.1A-09, SPEC-1.0.md §4)
 
    Put `data-density="compact"` on ANY container and its whole subtree renders
    tighter: spacing steps shrink by --density-scale and interactive controls drop
    to a shorter height ramp. `data-density="comfortable"` restores the base scale,
-   so density can be reset on an inner subtree.
+   so density can be reset on an inner subtree. `data-density="spacious"` is the
+   third point on the ladder, above comfortable: spacing grows and the control
+   ramp grows with it, gentler than the spacing multiplier for the same reason
+   compact's ramp shrinks gentler — a usable hit target has a ceiling as well as
+   a floor.
 
      <section data-density="compact">   … dense form / table / toolbar …   </section>
+     <section data-density="spacious">  … roomy landing hero, kiosk UI …   </section>
 
    This is 100% CSS. `data-density` is NOT a sixth protocol attribute: no
    component contract, manifest, controller or audit rule knows about it — CSS
@@ -641,169 +978,284 @@
   --content-gutter:    var(--space-6);
 }
 
+/* The third density: roomier than the base scale, for a landing hero or a kiosk
+   UI meant to be read at arm's length. Control heights grow slower than the
+   spacing multiplier — the same asymmetry compact's ramp has, mirrored. */
+[data-density="spacious"] {
+  --density-scale: 1.25;
+
+  /* ── Spacing scale (× --density-scale) ── */
+  --space-0h:  calc(0.125rem * var(--density-scale));
+  --space-1:   calc(0.25rem  * var(--density-scale));
+  --space-1h:  calc(0.375rem * var(--density-scale));
+  --space-2:   calc(0.5rem   * var(--density-scale));
+  --space-2h:  calc(0.625rem * var(--density-scale));
+  --space-3:   calc(0.75rem  * var(--density-scale));
+  --space-3h:  calc(0.875rem * var(--density-scale));
+  --space-4:   calc(1rem     * var(--density-scale));
+  --space-5:   calc(1.25rem  * var(--density-scale));
+  --space-6:   calc(1.5rem   * var(--density-scale));
+  --space-7:   calc(1.75rem  * var(--density-scale));
+  --space-8:   calc(2rem     * var(--density-scale));
+  --space-10:  calc(2.5rem   * var(--density-scale));
+  --space-12:  calc(3rem     * var(--density-scale));
+  --space-16:  calc(4rem     * var(--density-scale));
+  --space-20:  calc(5rem     * var(--density-scale));
+  --space-24:  calc(6rem     * var(--density-scale));
+  --space-32:  calc(8rem     * var(--density-scale));
+  --space-40:  calc(10rem    * var(--density-scale));
+  --space-48:  calc(12rem    * var(--density-scale));
+  --space-64:  calc(16rem    * var(--density-scale));
+
+  /* ── Control height ramp ── */
+  --control-height-sm: 36px;
+  --control-height-md: 44px;
+  --control-height-lg: 52px;
+
+  /* ── Aliases re-substituted in this scope (values identical to the base) ── */
+  --button-height-sm:  var(--control-height-sm);
+  --button-height-md:  var(--control-height-md);
+  --button-height-lg:  var(--control-height-lg);
+  --input-height:      var(--control-height-md);
+  --card-padding:      var(--space-6);
+  --kv-pair-gap:       var(--space-3);
+  --kv-grid-gap:       var(--space-4);
+  --callout-padding-y: var(--space-3);
+  --callout-padding-x: var(--space-4);
+  --field-gap:         var(--space-1h);
+  --section-gap-sm:    var(--space-12);
+  --section-gap-md:    var(--space-20);
+  --section-gap-lg:    var(--space-32);
+  --content-gutter:    var(--space-6);
+}
+
 /* === themes/slate.css === */
 /* @ui:theme slate — conservative enterprise blue-gray; safe for banks */
+/* @ui:density compact — the density this theme was designed at.
+
+   Density is the one axis with no token to declare: `tokens/density.css` states
+   each ramp inside a `[data-density]` subtree SCOPE, and a `:root` block cannot
+   override a subtree scope, so a theme states its intended density in this
+   header directive instead (`axesFromCss` reads it; `faqir theme generate`
+   emits the same line for a `compact` seed). A project adopting this theme sets
+   `data-density="compact"` on its root element — the sanctioned modifier — and
+   the shipped preview stamps it, so the gallery renders slate at the ramp it was
+   drawn for rather than at the comfortable one. [1.1A-15] */
 
 /* ── Light Mode Overrides ── */
-/* Cool blue-gray neutrals with a restrained steel-blue primary */
+/* Steel-blue neutrals — a dense data surface, not a luminous white page */
 :root {
-  /* ── Surfaces ── */
-  --color-bg:              oklch(0.985 0.003 240);   /* cool near-white */
-  --color-bg-subtle:       oklch(0.95 0.006 240);    /* elevation step 1 */
-  --color-bg-muted:        oklch(0.915 0.009 240);   /* elevation step 2 */
+  /* ── Surfaces ──
+     Deliberately deeper and more tinted than 1.0's near-white: at
+     `oklch(0.985 0.003 240)` this theme's page was a colourway of `glass`'s
+     (the two sat 0.0282 mean OKLab ΔE apart, under the 0.03 the framework
+     demands between a CARD and the page it lies on — see
+     tests/themes/distinctiveness.test.ts). The fix is not a new hue but the
+     theme's own claim, finally honoured: "cool blue-gray neutrals" reads as
+     steel card stock under dense tables, which is also why `--color-bg` now
+     carries enough chroma for the `neutral` axis to derive `cool` instead of
+     contradicting the line at the top of this file. */
+  --color-bg:              oklch(0.965 0.014 245);   /* steel page */
+  --color-bg-subtle:       oklch(0.925 0.018 245);   /* elevation step 1 */
+  --color-bg-muted:        oklch(0.878 0.022 245);   /* elevation step 2 */
   --color-surface-1:        var(--color-bg-subtle);
   --color-surface-2:        var(--color-bg-muted);
   --color-surface-1-border: var(--color-border);
   --color-surface-2-border: var(--color-border-strong);
-  --color-fg:              oklch(0.21 0.03 250);     /* deep slate */
-  --color-fg-muted:        oklch(0.45 0.025 245);    /* muted slate */
-  --color-fg-subtle:       oklch(0.57 0.02 245);     /* subtle slate */
+  --color-fg:              oklch(0.20 0.032 250);    /* deep slate */
+  --color-fg-muted:        oklch(0.43 0.028 245);    /* muted slate */
+  --color-fg-subtle:       oklch(0.54 0.024 245);    /* subtle slate */
 
   /* ── Interactive: Primary (steel blue) ── */
   --color-primary:         oklch(0.45 0.09 245);     /* steel blue */
   --color-primary-hover:   oklch(0.40 0.09 245);
   --color-primary-active:  oklch(0.36 0.08 245);
   --color-primary-fg:      white;
-  --color-primary-subtle:  oklch(0.93 0.03 245);
+  --color-primary-subtle:  oklch(0.91 0.038 245);
 
   /* ── Interactive: Secondary ── */
-  --color-secondary:       oklch(0.93 0.01 240);
-  --color-secondary-hover: oklch(0.89 0.014 240);
-  --color-secondary-fg:    oklch(0.25 0.03 245);
+  --color-secondary:       oklch(0.905 0.02 245);
+  --color-secondary-hover: oklch(0.862 0.024 245);
+  --color-secondary-fg:    oklch(0.24 0.032 248);
 
   /* ── Interactive: Destructive ── */
   --color-destructive:        oklch(0.52 0.19 25);
   --color-destructive-hover:  oklch(0.47 0.20 25);
   --color-destructive-fg:     white;
-  --color-destructive-subtle: oklch(0.94 0.03 25);
+  --color-destructive-subtle: oklch(0.92 0.038 25);
 
   /* ── Feedback ── */
   --color-success:         oklch(0.49 0.14 155);
-  --color-success-subtle:  oklch(0.94 0.04 155);
+  --color-success-subtle:  oklch(0.92 0.048 155);
   --color-warning:         oklch(0.52 0.13 80);
-  --color-warning-subtle:  oklch(0.95 0.05 80);
+  --color-warning-subtle:  oklch(0.93 0.058 80);
   --color-info:            oklch(0.51 0.13 245);
-  --color-info-subtle:     oklch(0.94 0.03 245);
+  --color-info-subtle:     oklch(0.92 0.038 245);
 
   /* ── Borders ── */
-  --color-border:          oklch(0.89 0.008 240);
-  --color-border-strong:   oklch(0.80 0.012 240);
+  --color-border:          oklch(0.855 0.018 245);
+  --color-border-strong:   oklch(0.755 0.022 245);
   --color-ring:            oklch(0.45 0.09 245);
 
-  /* ── Shadows (restrained, cool gray) ── */
-  --shadow-xs:  0 1px 2px oklch(0.25 0.02 250 / 0.06);
-  --shadow-sm:  0 1px 3px oklch(0.25 0.02 250 / 0.08), 0 1px 2px oklch(0.25 0.02 250 / 0.05);
-  --shadow-md:  0 4px 6px oklch(0.25 0.02 250 / 0.07), 0 2px 4px oklch(0.25 0.02 250 / 0.05);
-  --shadow-lg:  0 10px 15px oklch(0.25 0.02 250 / 0.08), 0 4px 6px oklch(0.25 0.02 250 / 0.05);
-  --shadow-xl:  0 20px 25px oklch(0.25 0.02 250 / 0.10), 0 8px 10px oklch(0.25 0.02 250 / 0.05);
+  /* ══════════════════════════════════════════════════════════════════════
+     The identity, in tokens. "Default, but bluer" is what this theme was;
+     an enterprise console is a different SHAPE, not a different hue. [1.1A-15]
+     ══════════════════════════════════════════════════════════════════════ */
+
+  /* ── Type: a neo-grotesque, in all three roles ──
+     The face an enterprise product is set in: Helvetica/Arial, the grotesque
+     class, rather than whatever the operating system happens to prefer. All
+     three roles move together — a console has one voice — which is what makes
+     `type.pairing` derive `sans-grotesque` instead of `system`. No webfont:
+     every family here is installed on the platforms a bank actually runs. */
+  --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-ui:      'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+  /* ── Shape: crisp ──
+     The whole ladder tightens, so a card, a dialog and a badge agree. 4px at
+     `--radius-md` is the `crisp` band — a corner a dense table can afford,
+     where the base layer's 6px starts to read as consumer-soft. */
+  --radius-sm:   0.125rem;   /* 2px */
+  --radius-md:   0.25rem;    /* 4px */
+  --radius-lg:   0.25rem;    /* 4px */
+  --radius-xl:   0.375rem;   /* 6px */
+  --radius-2xl:  0.5rem;     /* 8px */
+
+  /* ── Depth: flat ──
+     A console is a plane of information, not a stack of floating cards: every
+     step of the ramp is removed and the elevation is carried by the surface
+     colours and the borders above, which is what the three `--color-surface-*`
+     steps are for. Stated in every scheme, because a dark block that omits a
+     shadow token renders with the LIGHT value. */
+  --shadow-xs:  none;
+  --shadow-sm:  none;
+  --shadow-md:  none;
+  --shadow-lg:  none;
+  --shadow-xl:  none;
+
+  /* ── Motion: snappy ──
+     A short duration ON an ease-out curve, which is what `snappy` names; the
+     easing is re-pointed at this theme's own `--ease-out` rather than a
+     literal, so the two move together. Nothing in a trading console should
+     ease in and out of place for a fifth of a second. */
+  --duration-fast:   80ms;
+  --duration-normal: 140ms;
+  --duration-slow:   200ms;
+  --ease-default:    var(--ease-out);
 }
 
 /* ── Dark Mode ── */
-/* Blue-gray slate surfaces, desaturated light-blue primary, quiet shadows */
+/* Deep navy-graphite surfaces, desaturated light-blue primary, no shadows */
 [data-theme="dark"] {
-  /* ── Surfaces (blue-gray slate) ── */
-  --color-bg:              oklch(0.18 0.02 250);     /* deep slate */
-  --color-bg-subtle:       oklch(0.22 0.022 250);    /* dark slate */
-  --color-bg-muted:        oklch(0.26 0.024 250);    /* muted slate */
+  /* ── Surfaces (deep navy graphite) ──
+     Deeper than 1.0's mid slate for the same reason the light page moved: at
+     0.18 it sat one step from `glass`'s 0.17. A night-shift console is nearly
+     black, which is both further from `glass` and easier on the eye it is read
+     by for eight hours. */
+  --color-bg:              oklch(0.145 0.025 250);   /* near-black navy */
+  --color-bg-subtle:       oklch(0.187 0.028 250);   /* elevation step 1 */
+  --color-bg-muted:        oklch(0.235 0.030 250);   /* elevation step 2 */
   --color-surface-1:        var(--color-bg-subtle);
   --color-surface-2:        var(--color-bg-muted);
   --color-surface-1-border: var(--color-border);
   --color-surface-2-border: var(--color-border-strong);
-  --color-fg:              oklch(0.95 0.005 240);    /* near-white, cool */
-  --color-fg-muted:        oklch(0.68 0.02 245);     /* muted cool gray */
-  --color-fg-subtle:       oklch(0.54 0.02 245);     /* subtle cool gray */
+  --color-fg:              oklch(0.93 0.012 245);    /* near-white, cool */
+  --color-fg-muted:        oklch(0.66 0.025 245);    /* muted cool gray */
+  --color-fg-subtle:       oklch(0.52 0.022 245);    /* subtle cool gray */
 
   /* ── Interactive: Primary (light steel blue) ── */
   --color-primary:         oklch(0.68 0.11 245);     /* light steel blue */
   --color-primary-hover:   oklch(0.74 0.10 245);     /* lighter steel */
   --color-primary-active:  oklch(0.79 0.09 245);     /* lightest steel */
-  --color-primary-fg:      oklch(0.16 0.02 250);     /* deep slate for contrast */
-  --color-primary-subtle:  oklch(0.26 0.033 245);
+  --color-primary-fg:      oklch(0.13 0.025 250);    /* near-black navy */
+  --color-primary-subtle:  oklch(0.235 0.038 245);
 
   /* ── Interactive: Secondary ── */
-  --color-secondary:       oklch(0.28 0.02 250);
-  --color-secondary-hover: oklch(0.33 0.022 250);
-  --color-secondary-fg:    oklch(0.92 0.008 240);
+  --color-secondary:       oklch(0.25 0.026 250);
+  --color-secondary-hover: oklch(0.30 0.028 250);
+  --color-secondary-fg:    oklch(0.90 0.012 245);
 
   /* ── Interactive: Destructive ── */
   --color-destructive:        oklch(0.68 0.19 25);
   --color-destructive-hover:  oklch(0.63 0.18 25);
-  --color-destructive-fg:     oklch(0.18 0.02 250);
-  --color-destructive-subtle: oklch(0.26 0.057 25);
+  --color-destructive-fg:     oklch(0.145 0.025 250);
+  --color-destructive-subtle: oklch(0.235 0.060 25);
 
   /* ── Feedback ── */
   --color-success:         oklch(0.72 0.14 155);
-  --color-success-subtle:  oklch(0.26 0.042 155);
+  --color-success-subtle:  oklch(0.235 0.045 155);
   --color-warning:         oklch(0.80 0.13 85);
-  --color-warning-subtle:  oklch(0.26 0.039 85);
+  --color-warning-subtle:  oklch(0.235 0.042 85);
   --color-info:            oklch(0.70 0.12 245);
-  --color-info-subtle:     oklch(0.26 0.036 245);
+  --color-info-subtle:     oklch(0.235 0.038 245);
 
   /* ── Borders ── */
-  --color-border:          oklch(0.30 0.02 250);
-  --color-border-strong:   oklch(0.38 0.022 250);
+  --color-border:          oklch(0.270 0.026 250);
+  --color-border-strong:   oklch(0.360 0.028 250);
   --color-ring:            oklch(0.68 0.11 245);
 
-  /* ── Shadows (quiet, dark neutral) ── */
-  --shadow-xs:  0 1px 3px oklch(0.08 0.01 250 / 0.35);
-  --shadow-sm:  0 2px 6px oklch(0.08 0.01 250 / 0.4);
-  --shadow-md:  0 6px 12px oklch(0.08 0.01 250 / 0.4), 0 2px 4px oklch(0.08 0.01 250 / 0.25);
-  --shadow-lg:  0 12px 24px oklch(0.08 0.01 250 / 0.45), 0 4px 8px oklch(0.08 0.01 250 / 0.25);
-  --shadow-xl:  0 24px 48px oklch(0.08 0.01 250 / 0.5), 0 8px 16px oklch(0.08 0.01 250 / 0.3);
+  /* ── Depth: flat in dark too ── */
+  --shadow-xs:  none;
+  --shadow-sm:  none;
+  --shadow-md:  none;
+  --shadow-lg:  none;
+  --shadow-xl:  none;
 }
 
 /* ── Auto Dark Mode (system preference) ── */
+/* Mirror of the [data-theme="dark"] block above — keep the two in sync. */
 @media (prefers-color-scheme: dark) {
   [data-theme="auto"] {
-    /* ── Surfaces (blue-gray slate) ── */
-    --color-bg:              oklch(0.18 0.02 250);
-    --color-bg-subtle:       oklch(0.22 0.022 250);
-    --color-bg-muted:        oklch(0.26 0.024 250);
+    /* ── Surfaces (deep navy graphite) ── */
+    --color-bg:              oklch(0.145 0.025 250);
+    --color-bg-subtle:       oklch(0.187 0.028 250);
+    --color-bg-muted:        oklch(0.235 0.030 250);
     --color-surface-1:        var(--color-bg-subtle);
     --color-surface-2:        var(--color-bg-muted);
     --color-surface-1-border: var(--color-border);
     --color-surface-2-border: var(--color-border-strong);
-    --color-fg:              oklch(0.95 0.005 240);
-    --color-fg-muted:        oklch(0.68 0.02 245);
-    --color-fg-subtle:       oklch(0.54 0.02 245);
+    --color-fg:              oklch(0.93 0.012 245);
+    --color-fg-muted:        oklch(0.66 0.025 245);
+    --color-fg-subtle:       oklch(0.52 0.022 245);
 
     /* ── Interactive: Primary (light steel blue) ── */
     --color-primary:         oklch(0.68 0.11 245);
     --color-primary-hover:   oklch(0.74 0.10 245);
     --color-primary-active:  oklch(0.79 0.09 245);
-    --color-primary-fg:      oklch(0.16 0.02 250);
-    --color-primary-subtle:  oklch(0.26 0.033 245);
+    --color-primary-fg:      oklch(0.13 0.025 250);
+    --color-primary-subtle:  oklch(0.235 0.038 245);
 
     /* ── Interactive: Secondary ── */
-    --color-secondary:       oklch(0.28 0.02 250);
-    --color-secondary-hover: oklch(0.33 0.022 250);
-    --color-secondary-fg:    oklch(0.92 0.008 240);
+    --color-secondary:       oklch(0.25 0.026 250);
+    --color-secondary-hover: oklch(0.30 0.028 250);
+    --color-secondary-fg:    oklch(0.90 0.012 245);
 
     /* ── Interactive: Destructive ── */
     --color-destructive:        oklch(0.68 0.19 25);
     --color-destructive-hover:  oklch(0.63 0.18 25);
-    --color-destructive-fg:     oklch(0.18 0.02 250);
-    --color-destructive-subtle: oklch(0.26 0.057 25);
+    --color-destructive-fg:     oklch(0.145 0.025 250);
+    --color-destructive-subtle: oklch(0.235 0.060 25);
 
     /* ── Feedback ── */
     --color-success:         oklch(0.72 0.14 155);
-    --color-success-subtle:  oklch(0.26 0.042 155);
+    --color-success-subtle:  oklch(0.235 0.045 155);
     --color-warning:         oklch(0.80 0.13 85);
-    --color-warning-subtle:  oklch(0.26 0.039 85);
+    --color-warning-subtle:  oklch(0.235 0.042 85);
     --color-info:            oklch(0.70 0.12 245);
-    --color-info-subtle:     oklch(0.26 0.036 245);
+    --color-info-subtle:     oklch(0.235 0.038 245);
 
     /* ── Borders ── */
-    --color-border:          oklch(0.30 0.02 250);
-    --color-border-strong:   oklch(0.38 0.022 250);
+    --color-border:          oklch(0.270 0.026 250);
+    --color-border-strong:   oklch(0.360 0.028 250);
     --color-ring:            oklch(0.68 0.11 245);
 
-    /* ── Shadows (quiet, dark neutral) ── */
-    --shadow-xs:  0 1px 3px oklch(0.08 0.01 250 / 0.35);
-    --shadow-sm:  0 2px 6px oklch(0.08 0.01 250 / 0.4);
-    --shadow-md:  0 6px 12px oklch(0.08 0.01 250 / 0.4), 0 2px 4px oklch(0.08 0.01 250 / 0.25);
-    --shadow-lg:  0 12px 24px oklch(0.08 0.01 250 / 0.45), 0 4px 8px oklch(0.08 0.01 250 / 0.25);
-    --shadow-xl:  0 24px 48px oklch(0.08 0.01 250 / 0.5), 0 8px 16px oklch(0.08 0.01 250 / 0.3);
+    /* ── Depth: flat in dark too ── */
+    --shadow-xs:  none;
+    --shadow-sm:  none;
+    --shadow-md:  none;
+    --shadow-lg:  none;
+    --shadow-xl:  none;
   }
 }
 
@@ -821,11 +1273,38 @@
   padding: 0;
 }
 
+/* Colour scheme — the one place `data-theme` is translated into the platform's
+   own scheme signal. `light-dark()` in a theme reads `color-scheme`, not
+   `data-theme`, so a one-block theme [1.1A-06] resolves nothing at all without
+   these three rules; declaring them here (rather than in each theme) is what
+   makes the two authoring forms interchangeable. Nothing else in the registry
+   declares `color-scheme`, so this is purely additive.
+
+   Specificity does the mapping: `:root` is (0,0,1) and each attribute selector
+   is (0,1,0), so `<html data-theme="dark">` takes the dark rule over the root
+   default while a bare `<html>` — and `data-theme="light"` — keeps light. The
+   same rules apply to a NESTED element carrying `data-theme`, which is how a
+   dark island inside a light page has always worked here. */
+:root {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* `auto` hands the choice to the OS: `light dark` means "either, system first",
+   which is exactly what the `@media (prefers-color-scheme: dark)` mirror block
+   does for a theme authored in the three-block form. */
+[data-theme="auto"] {
+  color-scheme: light dark;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
   tab-size: 4;
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   color: var(--color-fg);
@@ -836,6 +1315,11 @@ html {
 
 body {
   min-height: 100dvh;
+  /* The page's material. `none` by default (the initial value), so this is a
+     no-op until a theme points --texture-page at one of tokens/textures.css.
+     `html` keeps the background COLOUR; the texture rides on `body`, which
+     covers the viewport, so the two compose instead of overwriting. */
+  background-image: var(--texture-page);
 }
 
 img,
@@ -905,10 +1389,32 @@ table {
   }
 }
 
-/* Focus visible — default ring */
+/* Text selection — the decoration axis reaching the one surface no component
+   owns. Until 1.1 the highlight was whatever the OS drew, which is the one part
+   of a themed page that never matched the theme. Both values are tokens
+   (tokens/aliases.css § Decoration), so a theme states its selection once. */
+::selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+/* Focus visible — the default ring, and the only place it is spelled out.
+   Every value is a token (tokens/effects.css § Focus), so a theme states its
+   focus once and every element that has not drawn its own ring follows. */
 :focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+/* The glow a theme may put behind the ring, at zero specificity. `box-shadow`
+   is not a property focus owns: an element's resting shadow — a card's depth,
+   an author's own — lives there too, and a (0,1,0) rule here replaced it with
+   `none` (the default) on every keyboard focus. Under `:where()` ANY rule that
+   sets a shadow outranks this one, so it lands only on an element nothing else
+   shadows, and it never takes a shadow away. The controls that draw their own
+   ring read `--focus-shadow` in their own `:focus-visible` rules. */
+:where(:focus-visible) {
+  box-shadow: var(--focus-shadow);
 }
 
 /* Hidden but accessible */
@@ -937,7 +1443,7 @@ table {
 /* @ui:base prose — typography defaults for long-form content */
 
 [data-ui="prose"] {
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
   font-size: var(--text-base);
   line-height: var(--leading-relaxed);
   color: var(--color-fg);
@@ -945,29 +1451,45 @@ table {
 }
 
 [data-ui="prose"] h1 {
+  font-family: var(--font-heading);
   font-size: var(--text-4xl);
-  font-weight: var(--weight-bold);
-  line-height: var(--leading-tight);
+  font-weight: var(--heading-weight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   margin-block: var(--space-8) var(--space-4);
 }
 
 [data-ui="prose"] h2 {
+  font-family: var(--font-heading);
   font-size: var(--text-3xl);
   font-weight: var(--weight-semibold);
-  line-height: var(--leading-tight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   margin-block: var(--space-8) var(--space-3);
 }
 
 [data-ui="prose"] h3 {
+  font-family: var(--font-heading);
   font-size: var(--text-2xl);
   font-weight: var(--weight-semibold);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
   line-height: var(--leading-snug);
   margin-block: var(--space-6) var(--space-3);
 }
 
 [data-ui="prose"] h4 {
+  font-family: var(--font-heading);
   font-size: var(--text-xl);
   font-weight: var(--weight-semibold);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
   line-height: var(--leading-snug);
   margin-block: var(--space-6) var(--space-2);
 }
@@ -978,8 +1500,8 @@ table {
 
 [data-ui="prose"] a {
   color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
+  text-decoration-line: var(--link-decoration);
+  text-underline-offset: var(--link-underline-offset);
 }
 
 [data-ui="prose"] a:hover {
@@ -1016,7 +1538,7 @@ table {
 }
 
 [data-ui="prose"] blockquote {
-  border-inline-start: 3px solid var(--color-border-strong);
+  border-inline-start: var(--border-width-lg) solid var(--color-border-strong);
   padding-inline-start: var(--space-4);
   color: var(--color-fg-muted);
   margin-block: var(--space-4);
@@ -1038,9 +1560,15 @@ table {
   margin-block: var(--space-1);
 }
 
+/* The bullet. `currentColor` by default — the initial value — so a list looks
+   exactly as it did; a theme that wants accented markers sets --marker-color. */
+[data-ui="prose"] li::marker {
+  color: var(--marker-color);
+}
+
 [data-ui="prose"] hr {
   border: none;
-  border-block-start: 1px solid var(--color-border);
+  border-block-start: var(--border-width) solid var(--color-border);
   margin-block: var(--space-8);
 }
 
@@ -1059,12 +1587,12 @@ table {
   font-weight: var(--weight-semibold);
   text-align: start;
   padding: var(--space-2) var(--space-3);
-  border-block-end: 2px solid var(--color-border-strong);
+  border-block-end: var(--border-width-strong) solid var(--color-border-strong);
 }
 
 [data-ui="prose"] td {
   padding: var(--space-2) var(--space-3);
-  border-block-end: 1px solid var(--color-border);
+  border-block-end: var(--border-width) solid var(--color-border);
 }
 
 /* First child no top margin, last child no bottom margin */
@@ -1249,7 +1777,7 @@ table {
 
 /* === primitives/avatar.css === */
 /* @ui:component avatar */
-/* @ui:tokens color-bg-muted color-fg-muted radius-full font-sans text-xs text-sm weight-medium */
+/* @ui:tokens color-bg-muted color-fg-muted radius-full font-ui text-xs text-sm weight-medium */
 
 /* ── Base ── */
 [data-ui="avatar"] {
@@ -1279,7 +1807,7 @@ table {
   height: 100%;
   background: var(--color-bg-muted);
   color: var(--color-fg-muted);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   text-transform: uppercase;
@@ -1304,7 +1832,7 @@ table {
 
 /* === primitives/badge.css === */
 /* @ui:component badge */
-/* @ui:tokens color-bg-muted color-fg color-primary color-primary-fg color-primary-subtle color-secondary color-secondary-fg color-destructive color-destructive-fg color-destructive-subtle color-success color-success-subtle color-warning color-warning-subtle radius-full space-1 space-2 font-sans text-xs text-sm weight-medium */
+/* @ui:tokens color-bg-muted color-fg color-primary color-primary-fg color-primary-subtle color-secondary color-secondary-fg color-destructive color-destructive-fg color-destructive-subtle color-success color-success-subtle color-warning color-warning-subtle radius-full space-1 space-2 font-ui text-xs text-sm weight-medium corner-shape */
 
 /* ── Base ── */
 [data-ui="badge"] {
@@ -1314,9 +1842,10 @@ table {
   gap: var(--space-1);
   padding: 0.125rem var(--space-2);
   border-radius: var(--badge-radius, var(--radius-full));
+  corner-shape: var(--corner-shape);
   background: var(--color-bg-muted);
   color: var(--color-fg);
-  font-family: var(--badge-font, var(--font-sans));
+  font-family: var(--badge-font, var(--font-ui));
   font-size: var(--text-xs);
   font-weight: var(--weight-medium);
   line-height: 1.5;
@@ -1362,11 +1891,11 @@ table {
 
 /* === primitives/breadcrumb.css === */
 /* @ui:component breadcrumb */
-/* @ui:tokens color-fg color-fg-muted color-fg-subtle color-primary-hover color-ring radius-sm space-2 text-xs text-sm text-base font-sans weight-medium duration-fast ease-default */
+/* @ui:tokens color-fg color-fg-muted color-fg-subtle color-primary-hover color-ring radius-sm space-2 text-xs text-sm text-base font-ui weight-medium duration-fast ease-default focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow link-decoration */
 
 /* ── Root ── */
 [data-ui="breadcrumb"] {
-  font-family: var(--breadcrumb-font, var(--font-sans));
+  font-family: var(--breadcrumb-font, var(--font-ui));
   font-size: var(--breadcrumb-size, var(--text-sm));
   color: var(--color-fg-muted);
 }
@@ -1392,12 +1921,13 @@ table {
 
 [data-ui="breadcrumb"] [data-part="item"]:hover {
   color: var(--color-primary-hover);
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
 }
 
 [data-ui="breadcrumb"] [data-part="item"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* ── Separator (presentational) ── */
@@ -1437,7 +1967,7 @@ table {
 
 /* === primitives/button.css === */
 /* @ui:component button */
-/* @ui:tokens color-primary color-primary-hover color-primary-fg color-secondary color-secondary-hover color-secondary-fg color-destructive color-destructive-hover color-destructive-fg color-bg color-bg-muted color-bg-subtle color-fg color-border color-ring radius-md space-2 space-3 space-4 space-6 font-sans text-xs text-sm text-base weight-medium duration-fast ease-default shadow-xs radius-full */
+/* @ui:tokens color-primary color-primary-hover color-primary-fg color-secondary color-secondary-hover color-secondary-fg color-destructive color-destructive-hover color-destructive-fg color-bg color-bg-muted color-bg-subtle color-fg color-border color-ring radius-md space-2 space-3 space-4 space-6 font-ui text-xs text-sm text-base weight-medium duration-fast ease-default shadow-xs radius-full border-width border-width-strong corner-shape focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow button-text-transform motion-hover-lift link-decoration disabled-opacity */
 
 /* ── Base ── */
 [data-ui="button"] {
@@ -1447,18 +1977,21 @@ table {
   gap: var(--space-2);
   height: var(--button-height-md, 40px);
   padding-inline: var(--space-4);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--button-radius, var(--radius-md));
+  corner-shape: var(--corner-shape);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
+  text-transform: var(--button-text-transform);
   line-height: 1;
   cursor: pointer;
   transition: background var(--duration-fast) var(--ease-default),
               border-color var(--duration-fast) var(--ease-default),
               color var(--duration-fast) var(--ease-default),
+              translate var(--duration-fast) var(--ease-default),
               box-shadow var(--duration-fast) var(--ease-default);
   user-select: none;
   white-space: nowrap;
@@ -1467,11 +2000,16 @@ table {
 
 [data-ui="button"]:hover {
   background: var(--color-bg-muted);
+  /* The hover lift. `none` by default — the initial value of `translate` — so
+     this rule computes what the button computed before the token existed; a
+     theme with a springy personality sets `--motion-hover-lift: 0 -1px`. */
+  translate: var(--motion-hover-lift);
 }
 
 [data-ui="button"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* ── Variants ── */
@@ -1527,7 +2065,7 @@ table {
   padding: 0;
 }
 [data-ui="button"][data-variant="link"]:hover {
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
 }
 
 /* ── Sizes ── */
@@ -1546,7 +2084,7 @@ table {
 /* ── States ── */
 [data-ui="button"]:disabled,
 [data-ui="button"][data-state="disabled"] {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -1561,7 +2099,7 @@ table {
   position: absolute;
   width: 1em;
   height: 1em;
-  border: 2px solid currentColor;
+  border: var(--border-width-strong) solid currentColor;
   border-inline-end-color: transparent;
   border-radius: var(--radius-full);
   animation: faqir-spin 0.6s linear infinite;
@@ -1608,7 +2146,7 @@ table {
 
 /* === primitives/callout.css === */
 /* @ui:component callout */
-/* @ui:tokens callout-radius callout-padding-y callout-padding-x callout-border-left-width callout-font-size callout-icon-size callout-fg color-fg color-fg-muted color-info color-info-subtle color-warning color-warning-subtle color-destructive color-destructive-subtle color-success color-success-subtle color-bg-muted color-border color-ring space-1 radius-sm font-sans weight-semibold */
+/* @ui:tokens callout-radius callout-padding-y callout-padding-x callout-border-left-width callout-font-size callout-icon-size callout-fg color-fg color-fg-muted color-info color-info-subtle color-warning color-warning-subtle color-destructive color-destructive-subtle color-success color-success-subtle color-bg-muted color-border color-ring space-1 radius-sm font-heading font-body weight-semibold focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow */
 
 /* ── Base ── */
 [data-ui="callout"] {
@@ -1617,7 +2155,7 @@ table {
   padding: var(--callout-padding-y) var(--callout-padding-x);
   border-radius: var(--callout-radius);
   border-inline-start: var(--callout-border-left-width) solid;
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--callout-font-size);
   line-height: var(--doc-line-height, 1.5);
 }
@@ -1648,6 +2186,7 @@ table {
 /* ── Title ── */
 [data-ui="callout"] [data-part="title"] {
   display: block;
+  font-family: var(--font-heading);
   font-weight: var(--weight-semibold);
   margin-bottom: var(--doc-label-gap, var(--space-1, 0.25rem));
 }
@@ -1674,8 +2213,9 @@ table {
 }
 
 [data-ui="callout"] [data-part="dismiss"]:focus-visible {
-  outline: 2px solid var(--color-ring, var(--color-info));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
   opacity: 1;
 }
 
@@ -1761,17 +2301,36 @@ table {
 
 /* === primitives/card.css === */
 /* @ui:component card */
-/* @ui:tokens color-surface-1 color-surface-2 color-surface-1-border color-surface-2-border color-fg color-fg-muted radius-lg shadow-sm space-4 space-6 font-sans text-sm text-lg text-xl weight-semibold leading-tight */
+/* @ui:tokens color-surface-1 color-surface-2 color-surface-1-border color-surface-2-border color-fg color-fg-muted radius-lg shadow-sm space-4 space-6 font-heading text-sm text-lg text-xl weight-semibold leading-tight border-width corner-shape card-border-width surface-backdrop texture-surface motion-hover-lift duration-fast ease-default */
 
 /* ── Base ── */
 [data-ui="card"] {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--card-border, var(--color-surface-1-border));
+  border: var(--card-border-width) solid var(--card-border, var(--color-surface-1-border));
   border-radius: var(--card-radius, var(--radius-lg));
-  background: var(--card-bg, var(--color-surface-1));
+  corner-shape: var(--corner-shape);
+  /* One shorthand, two layers: the material on top, the fill beneath. The fill
+     is the final layer, so `--card-bg` may be a colour OR a gradient — what 1.0
+     projects set it to — and the texture (`none` by default) never clobbers it. */
+  background: var(--texture-surface), var(--card-bg, var(--color-surface-1));
   box-shadow: var(--card-shadow, var(--shadow-sm));
   overflow: hidden;
+  transition: translate var(--duration-fast) var(--ease-default);
+}
+
+/* The hover lift, the same axis `button` reads. `none` by default (the initial
+   value of `translate`), so a card sits exactly where it always sat until a
+   theme says surfaces rise under the pointer. */
+[data-ui="card"]:hover {
+  translate: var(--motion-hover-lift);
+}
+
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="card"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
 }
 
 /* ── Variants ── */
@@ -1780,7 +2339,7 @@ table {
 }
 
 [data-ui="card"][data-variant="filled"] {
-  background: var(--color-surface-2);
+  background: var(--texture-surface), var(--color-surface-2);
   border-color: var(--color-surface-2-border);
   box-shadow: none;
 }
@@ -1795,7 +2354,7 @@ table {
 }
 
 [data-ui="card"] > [data-part="header"] > [data-part="title"] {
-  font-family: var(--font-sans);
+  font-family: var(--font-heading);
   font-size: var(--text-lg);
   font-weight: var(--weight-semibold);
   line-height: var(--leading-tight);
@@ -1836,9 +2395,19 @@ table {
   padding-top: 0;
 }
 
+/* ── Motion ── */
+/* The hover lift is the only thing a card animates, and it is `none` until a
+   theme states one — but the house rule is that a stylesheet which transitions
+   carries its own opt-out, so a reader never has to check the token first. */
+@media (prefers-reduced-motion: reduce) {
+  [data-ui="card"] {
+    transition: none;
+  }
+}
+
 /* === primitives/checkbox.css === */
 /* @ui:component checkbox */
-/* @ui:tokens color-bg color-fg color-primary color-primary-fg color-border color-border-strong color-ring radius-sm space-1 space-2 duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-primary color-primary-fg color-border color-border-strong color-ring space-1 space-2 duration-fast ease-default border-width focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow checkbox-radius checkbox-size disabled-opacity */
 
 /* -- Label wrapper -- */
 [data-ui="checkbox-label"] {
@@ -1850,7 +2419,7 @@ table {
 
 [data-ui="checkbox-label"]:has([data-ui="checkbox"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -1862,8 +2431,8 @@ table {
   width: var(--checkbox-size, 18px);
   height: var(--checkbox-size, 18px);
   flex-shrink: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--checkbox-radius, var(--radius-sm));
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--checkbox-radius);
   background: var(--color-bg);
   cursor: pointer;
   transition: background var(--duration-fast) var(--ease-default),
@@ -1876,8 +2445,9 @@ table {
 }
 
 [data-ui="checkbox"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* -- Checked -- */
@@ -1968,7 +2538,7 @@ table {
    The mask has to opt out of the substitution to stay readable. [W3-3] */
 @media (forced-colors: active) {
   [data-ui="checkbox"] {
-    border: 1px solid ButtonText;
+    border: var(--border-width) solid ButtonText;
   }
 
   [data-ui="checkbox"]:checked,
@@ -1992,7 +2562,7 @@ table {
 
 /* === primitives/chip.css === */
 /* @ui:component chip */
-/* @ui:tokens color-bg-muted color-fg color-fg-muted color-primary color-primary-subtle color-destructive color-destructive-subtle color-border color-ring radius-full space-1 space-2 space-3 font-sans text-xs text-sm weight-medium */
+/* @ui:tokens color-bg-muted color-fg color-fg-muted color-primary color-primary-subtle color-destructive color-destructive-subtle color-border color-ring radius-full space-1 space-2 space-3 font-ui text-xs text-sm weight-medium border-width focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow */
 
 /* ── Base ── */
 [data-ui="chip"] {
@@ -2000,11 +2570,11 @@ table {
   align-items: center;
   gap: var(--space-1);
   padding: var(--space-1) var(--space-2);
-  border: 1px solid transparent;
+  border: var(--border-width) solid transparent;
   border-radius: var(--chip-radius, var(--radius-full));
   background: var(--color-bg-muted);
   color: var(--color-fg);
-  font-family: var(--chip-font, var(--font-sans));
+  font-family: var(--chip-font, var(--font-ui));
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1.2;
@@ -2040,8 +2610,11 @@ table {
 }
 
 [data-ui="chip"] [data-part="dismiss"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 1px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  /* Half the default gap — the dismiss target is small, and the full ring
+     would collide with the chip's own edge. */
+  outline-offset: calc(var(--focus-ring-offset) / 2);
+  box-shadow: var(--focus-shadow);
 }
 
 /* ── Variants ── */
@@ -2264,12 +2837,12 @@ table {
 
 /* === primitives/collapsible.css === */
 /* @ui:component collapsible */
-/* @ui:tokens color-fg color-fg-muted color-bg-subtle color-border color-ring radius-md space-2 space-3 text-sm text-base font-sans weight-medium duration-fast duration-normal ease-default */
+/* @ui:tokens color-fg color-fg-muted color-bg-subtle color-border color-ring radius-md space-2 space-3 text-sm text-base font-ui weight-medium duration-fast duration-normal ease-default border-width border-width-strong focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow */
 
 /* ── Root — native <details>, so it opens/closes with zero JavaScript ── */
 [data-ui="collapsible"] {
   border-radius: var(--collapsible-radius, var(--radius-md));
-  font-family: var(--collapsible-font, var(--font-sans));
+  font-family: var(--collapsible-font, var(--font-ui));
   color: var(--color-fg);
 }
 
@@ -2299,8 +2872,9 @@ table {
 }
 
 [data-ui="collapsible"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* Chevron indicator — rotates when open, CSS-only */
@@ -2309,8 +2883,8 @@ table {
   flex: none;
   width: 0.5em;
   height: 0.5em;
-  border-inline-end: 2px solid var(--color-fg-muted);
-  border-block-end: 2px solid var(--color-fg-muted);
+  border-inline-end: var(--border-width-strong) solid var(--color-fg-muted);
+  border-block-end: var(--border-width-strong) solid var(--color-fg-muted);
   transform: rotate(45deg);
   transition: transform var(--duration-normal) var(--ease-default);
 }
@@ -2329,7 +2903,7 @@ table {
 
 /* ── Bordered variant ── */
 [data-ui="collapsible"][data-variant="bordered"] {
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
 }
 
 /* ── Open/close animation via ::details-content, where supported ── */
@@ -2462,13 +3036,13 @@ table {
 
 /* === primitives/description-list.css === */
 /* @ui:component description-list */
-/* @ui:tokens color-fg color-fg-muted color-border doc-font doc-line-height space-1 space-2 space-3 space-4 space-6 text-xs text-sm text-base font-sans weight-semibold */
+/* @ui:tokens color-fg color-fg-muted color-border doc-font doc-line-height space-1 space-2 space-3 space-4 space-6 text-xs text-sm text-base font-body weight-semibold border-width */
 
 /* ── Base ── */
 [data-ui="description-list"] {
   margin: 0;
   padding: 0;
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
 }
 
 /* ── Term ── */
@@ -2524,7 +3098,7 @@ table {
 [data-ui="description-list"][data-divided][data-variant="vertical"] [data-part="details"],
 [data-ui="description-list"][data-divided]:not([data-variant]) [data-part="details"] {
   padding-bottom: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="description-list"][data-divided][data-variant="vertical"] [data-part="details"]:last-child,
@@ -2536,7 +3110,7 @@ table {
 [data-ui="description-list"][data-divided][data-variant="horizontal"] [data-part="term"],
 [data-ui="description-list"][data-divided][data-variant="horizontal"] [data-part="details"] {
   padding-bottom: var(--space-3);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 /* ── Size: Small ── */
@@ -2574,7 +3148,7 @@ table {
 
 /* === primitives/empty-state.css === */
 /* @ui:component empty-state */
-/* @ui:tokens color-fg-muted color-fg-subtle space-3 space-4 space-6 space-8 text-sm text-lg text-3xl */
+/* @ui:tokens color-fg-muted color-fg-subtle space-3 space-4 space-6 space-8 text-sm text-lg text-3xl font-heading */
 
 /* ── Base ── */
 [data-ui="empty-state"] {
@@ -2595,6 +3169,7 @@ table {
 
 /* ── Title ── */
 [data-ui="empty-state"] [data-part="title"] {
+  font-family: var(--font-heading);
   font-size: var(--text-lg);
   font-weight: var(--weight-medium);
   color: var(--color-fg);
@@ -2642,7 +3217,7 @@ table {
 
 /* === primitives/field-group.css === */
 /* @ui:component field-group */
-/* @ui:tokens field-label-size field-label-weight field-label-color field-description-size field-description-color field-error-size field-error-color field-required-color field-required-marker field-validating-color field-disabled-opacity color-destructive color-success space-1 space-2 space-3 space-4 text-xs text-sm font-sans */
+/* @ui:tokens field-label-size field-label-weight field-label-color field-description-size field-description-color field-error-size field-error-color field-required-color field-required-marker field-validating-color field-disabled-opacity color-destructive color-success space-1 space-2 space-3 space-4 text-xs text-sm font-body border-width */
 
 /* ── Base / spacing ownership ──
    A field-group owns only its tight, density-aware intra-field step: label →
@@ -2654,7 +3229,7 @@ table {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
 }
 
 /* ── Label ── */
@@ -2724,7 +3299,7 @@ table {
 [data-ui="field-group"][data-state="invalid"] [data-ui="textarea"],
 [data-ui="field-group"][data-state="invalid"] [data-ui="select"] {
   border-color: var(--field-error-color);
-  box-shadow: 0 0 0 1px var(--field-error-color);
+  box-shadow: 0 0 0 var(--border-width) var(--field-error-color);
 }
 
 /* ── State: Validating ──
@@ -2734,7 +3309,7 @@ table {
 [data-ui="field-group"][data-state="validating"] [data-ui="textarea"],
 [data-ui="field-group"][data-state="validating"] [data-ui="select"] {
   border-color: var(--field-validating-color);
-  box-shadow: 0 0 0 1px var(--field-validating-color);
+  box-shadow: 0 0 0 var(--border-width) var(--field-validating-color);
 }
 
 /* ── State: Disabled ──
@@ -2753,8 +3328,8 @@ table {
 [data-ui="field-group"][data-state="valid"] [data-ui="input"],
 [data-ui="field-group"][data-state="valid"] [data-ui="textarea"],
 [data-ui="field-group"][data-state="valid"] [data-ui="select"] {
-  border-color: var(--color-success, oklch(0.62 0.19 145));
-  box-shadow: 0 0 0 1px var(--color-success, oklch(0.62 0.19 145));
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 var(--border-width) var(--color-success);
 }
 
 /* ── Variant: Horizontal ── */
@@ -3059,7 +3634,7 @@ table {
 
 /* === primitives/image.css === */
 /* @ui:component image */
-/* @ui:tokens image-radius image-border image-border-width image-caption-size image-caption-color color-bg-muted font-sans */
+/* @ui:tokens image-radius image-border image-border-width image-caption-size image-caption-color color-bg-muted font-body */
 
 /* ── Base ── */
 [data-ui="image"] {
@@ -3083,7 +3658,7 @@ table {
 [data-ui="image"] [data-part="caption"] {
   display: block;
   margin-top: var(--space-2);
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--image-caption-size);
   color: var(--image-caption-color);
   line-height: 1.4;
@@ -3180,7 +3755,7 @@ table {
 
 /* === primitives/input.css === */
 /* @ui:component input */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-sans text-xs text-sm text-base duration-fast ease-default */
+/* @ui:tokens color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-ui text-xs text-sm text-base duration-fast ease-default border-width corner-shape focus-ring-width focus-ring-style focus-ring-color focus-shadow input-border-width input-fill disabled-opacity */
 
 /* ── Base ── */
 [data-ui="input"] {
@@ -3188,11 +3763,18 @@ table {
   width: 100%;
   height: var(--input-height, 40px);
   padding-inline: var(--space-3);
-  border: 1px solid var(--color-border);
+  /* Longhands, not the `border:` shorthand: the shorthand's width slot takes
+     ONE value, and `controls.input: underline` (1.1A-10) states the silhouette
+     as a four-value box — `0 0 var(--border-width) 0` — so only a bottom rule
+     is drawn. Identical to the shorthand at every other value of the token. */
+  border-style: solid;
+  border-color: var(--color-border);
+  border-width: var(--input-border-width);
   border-radius: var(--input-radius, var(--radius-md));
-  background: var(--input-bg, var(--color-bg));
+  corner-shape: var(--corner-shape);
+  background: var(--input-fill);
   color: var(--color-fg);
-  font-family: var(--input-font, var(--font-sans));
+  font-family: var(--input-font, var(--font-ui));
   font-size: var(--text-sm);
   line-height: 1;
   transition: border-color var(--duration-fast) var(--ease-default),
@@ -3208,8 +3790,11 @@ table {
 }
 
 [data-ui="input"]:focus {
-  outline: 2px solid var(--color-ring);
-  outline-offset: -1px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  /* The ring replaces the border rather than sitting outside it: inset by
+     exactly the edge it covers, so a heavier shape theme stays aligned. */
+  outline-offset: calc(-1 * var(--input-border-width));
+  box-shadow: var(--focus-shadow);
   border-color: transparent;
 }
 
@@ -3237,7 +3822,7 @@ table {
 }
 
 [data-ui="input"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -3300,7 +3885,7 @@ table {
 
 /* === primitives/kbd.css === */
 /* @ui:component kbd */
-/* @ui:tokens color-bg-subtle color-fg color-border radius-sm space-1h font-mono text-xs */
+/* @ui:tokens color-bg-subtle color-fg color-border radius-sm space-1h font-mono text-xs border-width border-width-strong */
 
 /* ── Base ── */
 [data-ui="kbd"] {
@@ -3310,8 +3895,8 @@ table {
   height: 20px;
   min-width: 20px;
   padding-inline: var(--space-1h);
-  border: 1px solid var(--color-border);
-  border-bottom-width: 2px;
+  border: var(--border-width) solid var(--color-border);
+  border-bottom-width: var(--border-width-strong);
   border-radius: var(--radius-sm);
   background: var(--color-bg-subtle);
   color: var(--color-fg);
@@ -3324,7 +3909,7 @@ table {
 
 /* === primitives/key-value.css === */
 /* @ui:component key-value */
-/* @ui:tokens kv-label-color kv-label-weight kv-label-size kv-value-color kv-value-size kv-value-weight kv-gap kv-pair-gap kv-grid-gap text-xs text-sm text-base font-sans */
+/* @ui:tokens kv-label-color kv-label-weight kv-label-size kv-value-color kv-value-size kv-value-weight kv-gap kv-pair-gap kv-grid-gap text-xs text-sm text-base font-body */
 
 /* ── Base ── */
 [data-ui="key-value"] {
@@ -3333,7 +3918,7 @@ table {
   gap: var(--kv-pair-gap);
   margin: 0;
   padding: 0;
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
 }
 
 /* ── Label ── */
@@ -3463,12 +4048,12 @@ table {
 
 /* === primitives/label.css === */
 /* @ui:component label */
-/* @ui:tokens color-fg color-fg-muted color-destructive font-sans text-xs text-sm text-base weight-medium */
+/* @ui:tokens color-fg color-fg-muted color-destructive font-ui text-xs text-sm text-base weight-medium disabled-opacity */
 
 /* ── Base ── */
 [data-ui="label"] {
   display: block;
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   color: var(--color-fg);
@@ -3501,21 +4086,21 @@ table {
 
 /* ── States ── */
 [data-ui="label"][data-state="disabled"] {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
 /* === primitives/link.css === */
 /* @ui:component link */
-/* @ui:tokens color-primary color-primary-hover color-primary-active color-fg color-fg-muted color-ring radius-sm space-1 */
+/* @ui:tokens color-primary color-primary-hover color-primary-active color-fg color-fg-muted color-ring radius-sm space-1 focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow link-decoration link-thickness link-underline-offset */
 
 /* ── Base ── */
 [data-ui="link"] {
   color: var(--color-primary);
   font-family: inherit;
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.2em;
+  text-decoration-line: var(--link-decoration);
+  text-decoration-thickness: var(--link-thickness);
+  text-underline-offset: var(--link-underline-offset);
   border-radius: var(--radius-sm);
   cursor: pointer;
 }
@@ -3529,8 +4114,9 @@ table {
 }
 
 [data-ui="link"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* ── Variants ── */
@@ -3554,7 +4140,7 @@ table {
 
 /* === primitives/nav.css === */
 /* @ui:component nav */
-/* @ui:tokens color-fg color-fg-muted color-primary color-primary-subtle color-bg-subtle color-border text-sm weight-medium radius-md space-1 space-2 space-3 space-4 duration-fast ease-default */
+/* @ui:tokens color-fg color-fg-muted color-primary color-primary-subtle color-bg-subtle color-border text-sm weight-medium radius-md space-1 space-2 space-3 space-4 duration-fast ease-default border-width border-width-strong */
 
 /* ── Base ── */
 [data-ui="nav"] {
@@ -3604,14 +4190,14 @@ table {
 
 /* ── Underline variant ── */
 [data-ui="nav"][data-variant="underline"] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   gap: 0;
 }
 
 [data-ui="nav"][data-variant="underline"] [data-part="link"] {
   border-radius: 0;
   padding: var(--space-2) var(--space-4);
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--border-width-strong) solid transparent;
   margin-bottom: -1px;
 }
 
@@ -3667,7 +4253,7 @@ table {
 
 /* === primitives/page-break.css === */
 /* @ui:component page-break */
-/* @ui:tokens page-break-screen-color page-break-screen-style page-break-screen-label-color page-break-screen-label-size doc-font font-sans space-4 space-6 */
+/* @ui:tokens page-break-screen-color page-break-screen-style page-break-screen-label-color page-break-screen-label-size doc-font font-body space-4 space-6 border-width */
 
 /* ── Base (Screen) ── */
 [data-ui="page-break"] {
@@ -3682,12 +4268,12 @@ table {
 [data-ui="page-break"]::after {
   content: "";
   flex: 1;
-  border-top: 1px var(--page-break-screen-style) var(--page-break-screen-color);
+  border-top: var(--border-width) var(--page-break-screen-style) var(--page-break-screen-color);
 }
 
 /* ── Label (Screen) ── */
 [data-ui="page-break"] {
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--page-break-screen-label-size);
   color: var(--page-break-screen-label-color);
   letter-spacing: 0.05em;
@@ -3729,7 +4315,7 @@ table {
 
 /* === primitives/progress.css === */
 /* @ui:component progress */
-/* @ui:tokens color-primary color-bg-muted color-success color-warning color-destructive radius-full radius-md space-1 duration-normal ease-default */
+/* @ui:tokens color-primary color-bg-muted color-success color-warning color-destructive radius-full radius-md space-1 duration-normal ease-default border-width */
 
 /* ── Base ── */
 [data-ui="progress"] {
@@ -3804,7 +4390,7 @@ table {
    substitution and paints `Highlight`; the track keeps a visible boundary. [W3-3] */
 @media (forced-colors: active) {
   [data-ui="progress"] [data-part="track"] {
-    border: 1px solid ButtonText;
+    border: var(--border-width) solid ButtonText;
   }
 
   [data-ui="progress"] [data-part="fill"],
@@ -3818,7 +4404,7 @@ table {
 
 /* === primitives/radio.css === */
 /* @ui:component radio */
-/* @ui:tokens color-bg color-fg color-primary color-primary-fg color-border color-border-strong color-ring radius-full space-1 space-2 duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-primary color-primary-fg color-border color-border-strong color-ring radius-full space-1 space-2 duration-fast ease-default border-width focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow disabled-opacity */
 
 /* -- Radio group -- */
 [data-ui="radio-group"] {
@@ -3840,7 +4426,7 @@ table {
 
 [data-ui="radio-label"]:has([data-ui="radio"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -3852,7 +4438,7 @@ table {
   width: var(--radio-size, 18px);
   height: var(--radio-size, 18px);
   flex-shrink: 0;
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-full);
   background: var(--color-bg);
   cursor: pointer;
@@ -3866,8 +4452,9 @@ table {
 }
 
 [data-ui="radio"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* -- Checked -- */
@@ -3920,7 +4507,7 @@ table {
    inside a `--color-primary` circle, and the OS collapses both to one colour. [W3-3] */
 @media (forced-colors: active) {
   [data-ui="radio"] {
-    border: 1px solid ButtonText;
+    border: var(--border-width) solid ButtonText;
   }
 
   [data-ui="radio"]:checked {
@@ -3940,7 +4527,7 @@ table {
 
 /* === primitives/select.css === */
 /* @ui:component select */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-sans text-xs text-sm text-base duration-fast ease-default */
+/* @ui:tokens color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-ui text-xs text-sm text-base duration-fast ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-shadow input-border-width input-fill disabled-opacity */
 
 /* -- Base -- */
 [data-ui="select"] {
@@ -3949,11 +4536,17 @@ table {
   height: var(--select-height, 40px);
   padding-inline: var(--space-3);
   padding-inline-end: var(--space-8, 2rem);
-  border: 1px solid var(--color-border);
+  /* Longhands, not the `border:` shorthand: the shorthand's width slot takes
+     ONE value, and `controls.input: underline` (1.1A-10) states the silhouette
+     as a four-value box — `0 0 var(--border-width) 0` — so only a bottom rule
+     is drawn. Identical to the shorthand at every other value of the token. */
+  border-style: solid;
+  border-color: var(--color-border);
+  border-width: var(--input-border-width);
   border-radius: var(--select-radius, var(--radius-md));
-  background: var(--select-bg, var(--color-bg));
+  background: var(--select-bg, var(--input-fill));
   color: var(--color-fg);
-  font-family: var(--select-font, var(--font-sans));
+  font-family: var(--select-font, var(--font-ui));
   font-size: var(--text-sm);
   line-height: 1;
   cursor: pointer;
@@ -3983,8 +4576,11 @@ table {
 }
 
 [data-ui="select"]:focus {
-  outline: 2px solid var(--color-ring);
-  outline-offset: -1px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  /* The ring replaces the border rather than sitting outside it: inset by
+     exactly the edge it covers, so a heavier shape theme stays aligned. */
+  outline-offset: calc(-1 * var(--input-border-width));
+  box-shadow: var(--focus-shadow);
   border-color: transparent;
 }
 
@@ -4017,7 +4613,7 @@ table {
 }
 
 [data-ui="select"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -4030,12 +4626,12 @@ table {
 
 /* === primitives/separator.css === */
 /* @ui:component separator */
-/* @ui:tokens color-border space-4 text-xs color-fg-muted font-sans */
+/* @ui:tokens color-border space-4 text-xs color-fg-muted font-ui border-width-strong divider-width divider-style */
 
 /* ── Base (horizontal) ── */
 [data-ui="separator"] {
   border: none;
-  border-top: 1px solid var(--color-border);
+  border-top: var(--divider-width) var(--divider-style) var(--color-border);
   margin: 0;
   width: 100%;
 }
@@ -4043,7 +4639,7 @@ table {
 /* ── Vertical ── */
 [data-ui="separator"][data-variant="vertical"] {
   border-top: none;
-  border-inline-start: 1px solid var(--color-border);
+  border-inline-start: var(--divider-width) var(--divider-style) var(--color-border);
   width: auto;
   height: 100%;
   align-self: stretch;
@@ -4061,11 +4657,11 @@ div[data-ui="separator"]::before,
 div[data-ui="separator"]::after {
   content: "";
   flex: 1;
-  border-top: 1px solid var(--color-border);
+  border-top: var(--divider-width) var(--divider-style) var(--color-border);
 }
 
 [data-ui="separator"] [data-part="label"] {
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-xs);
   color: var(--color-fg-muted);
   white-space: nowrap;
@@ -4103,17 +4699,17 @@ div[data-ui="separator"][data-style="dotted"]::after {
 
 /* ── Style: Thick ── */
 [data-ui="separator"][data-style="thick"] {
-  border-top-width: 2px;
+  border-top-width: var(--border-width-strong);
 }
 
 [data-ui="separator"][data-style="thick"][data-variant="vertical"] {
   border-top-width: 0;
-  border-inline-start-width: 2px;
+  border-inline-start-width: var(--border-width-strong);
 }
 
 div[data-ui="separator"][data-style="thick"]::before,
 div[data-ui="separator"][data-style="thick"]::after {
-  border-top-width: 2px;
+  border-top-width: var(--border-width-strong);
 }
 
 /* ── Vertical Sizes ── */
@@ -4131,20 +4727,20 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/signature.css === */
 /* @ui:component signature */
-/* @ui:tokens doc-signature-width doc-signature-gap doc-signature-line-color doc-signature-label-size doc-signature-label-color doc-font font-sans space-2 space-12 */
+/* @ui:tokens doc-signature-width doc-signature-gap doc-signature-line-color doc-signature-label-size doc-signature-label-color doc-font font-body space-2 space-12 border-width */
 
 /* ── Base ── */
 [data-ui="signature"] {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   margin-top: var(--doc-signature-gap);
 }
 
 /* ── Line ── */
 [data-ui="signature"] [data-part="line"] {
-  border-top: 1px solid var(--doc-signature-line-color);
+  border-top: var(--border-width) solid var(--doc-signature-line-color);
   min-height: 1px;
 }
 
@@ -4247,14 +4843,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/spinner.css === */
 /* @ui:component spinner */
-/* @ui:tokens color-border color-primary radius-full duration-normal ease-default */
+/* @ui:tokens color-border color-primary radius-full duration-normal ease-default border-width-strong border-width-lg */
 
 /* ── Base ── */
 [data-ui="spinner"] {
   display: inline-block;
   width: 24px;
   height: 24px;
-  border: 2px solid var(--color-border);
+  border: var(--border-width-strong) solid var(--color-border);
   border-top-color: var(--color-primary);
   border-radius: var(--radius-full);
   animation: faqir-spin 0.75s linear infinite;
@@ -4270,13 +4866,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="spinner"][data-size="lg"] {
   width: 32px;
   height: 32px;
-  border-width: 3px;
+  border-width: var(--border-width-lg);
 }
 
 [data-ui="spinner"][data-size="xl"] {
   width: 48px;
   height: 48px;
-  border-width: 3px;
+  border-width: var(--border-width-lg);
 }
 
 /* ── Motion ── */
@@ -4858,14 +5454,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/stat.css === */
 /* @ui:component stat */
-/* @ui:tokens stat-value-size stat-value-weight stat-value-num-font stat-label-size stat-label-color stat-change-positive stat-change-negative color-fg color-fg-muted color-bg color-border space-1 space-2 space-4 radius-md shadow-sm font-sans text-xs text-sm text-lg text-3xl weight-semibold */
+/* @ui:tokens stat-value-size stat-value-weight stat-value-num-font stat-label-size stat-label-color stat-change-positive stat-change-negative color-fg color-fg-muted color-bg color-border space-1 space-2 space-4 radius-md shadow-sm font-heading font-body text-xs text-sm text-lg text-3xl weight-semibold border-width */
 
 /* ── Base ── */
 [data-ui="stat"] {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
 }
 
 /* ── Label ── */
@@ -4879,6 +5475,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Value ── */
 [data-ui="stat"] [data-part="value"] {
+  font-family: var(--font-heading);
   font-size: var(--stat-value-size);
   font-weight: var(--stat-value-weight);
   color: var(--color-fg);
@@ -4937,10 +5534,10 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Variant: Card ── */
 [data-ui="stat"][data-variant="card"] {
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md, 0.375rem);
   background: var(--color-bg);
-  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  box-shadow: var(--shadow-sm);
 }
 
 /* ── Value + Change Inline ── */
@@ -4952,7 +5549,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 @media print {
   [data-ui="stat"][data-variant="card"] {
     box-shadow: none;
-    border: 1px solid var(--doc-print-border-color, var(--color-border, #ccc));
+    border: var(--border-width) solid var(--doc-print-border-color, var(--color-border, #ccc));
   }
 
   [data-ui="stat"] {
@@ -4962,7 +5559,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/stepper.css === */
 /* @ui:component stepper */
-/* @ui:tokens color-primary color-primary-fg color-bg-muted color-fg-muted color-success color-success-subtle color-border text-sm text-xs weight-medium radius-full space-2 space-3 space-1 */
+/* @ui:tokens color-primary color-primary-fg color-bg-muted color-fg-muted color-success color-success-subtle color-border text-sm text-xs weight-medium radius-full space-2 space-3 space-1 border-width-strong */
 
 /* ── Base ── */
 [data-ui="stepper"] {
@@ -5041,7 +5638,7 @@ div[data-ui="separator"][data-style="thick"]::after {
    The tight phone metrics are the base; the roomier ones arrive at `sm`. */
 [data-ui="stepper"] [data-part="connector"] {
   flex: 1;
-  height: 2px;
+  height: var(--border-width-strong);
   background: var(--color-border);
   margin: 0 var(--space-1);
   min-width: var(--space-2);
@@ -5109,18 +5706,20 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/surface.css === */
 /* @ui:component surface */
-/* @ui:tokens color-bg color-surface-1 color-surface-2 color-surface-1-border color-surface-2-border measure-content measure-narrow measure-prose measure-wide radius-lg shadow-sm shadow-md shadow-lg space-3 space-4 space-6 */
+/* @ui:tokens color-bg color-surface-1 color-surface-2 color-surface-1-border color-surface-2-border measure-content measure-narrow measure-prose measure-wide radius-lg shadow-sm shadow-md shadow-lg space-3 space-4 space-6 border-width corner-shape surface-backdrop texture-surface */
 
 /* ── Base ── */
 [data-ui="surface"] {
-  background: var(--color-surface-1);
+  background-color: var(--color-surface-1);
+  background-image: var(--texture-surface);
   border-radius: var(--radius-lg);
-  border: 1px solid var(--color-surface-1-border);
+  corner-shape: var(--corner-shape);
+  border: var(--border-width) solid var(--color-surface-1-border);
 }
 
 /* ── Elevation Variants ── */
 [data-ui="surface"][data-variant="flat"] {
-  background: var(--color-bg);
+  background-color: var(--color-bg);
   border: none;
   box-shadow: none;
 }
@@ -5130,11 +5729,22 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="surface"][data-variant="overlay"] {
-  background: var(--color-surface-2);
+  background-color: var(--color-surface-2);
   box-shadow: var(--shadow-lg);
   border-color: var(--color-surface-2-border);
 }
 
+/* An overlay is the one surface variant that floats over other content, so it
+   is the one that can be frosted. Guarded exactly as themes/glass.css guards
+   its own: a browser without backdrop-filter renders the solid surface above
+   and never sees this rule. */
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="surface"][data-variant="overlay"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 /* ── Padding Sizes ── */
 [data-ui="surface"][data-size="sm"] {
   padding: var(--space-3);
@@ -5190,7 +5800,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/switch.css === */
 /* @ui:component switch */
-/* @ui:tokens color-bg-muted color-primary color-primary-fg color-border color-ring shadow-xs radius-full space-0h space-1 duration-fast ease-default */
+/* @ui:tokens color-bg-muted color-primary color-primary-fg color-border color-ring shadow-xs space-0h space-1 duration-fast ease-default border-width focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow switch-radius switch-width switch-height switch-thumb switch-travel switch-bg switch-thumb-shadow disabled-opacity */
 
 /* -- Label wrapper -- */
 [data-ui="switch-label"] {
@@ -5202,7 +5812,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="switch-label"]:has([data-ui="switch"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base (track) -- */
@@ -5230,8 +5840,8 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: var(--switch-width, 44px);
   height: var(--switch-height, 24px);
   padding: var(--space-0h, 2px);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-full);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--switch-radius);
   background: var(--switch-bg, var(--color-bg-muted));
   cursor: pointer;
   position: relative;
@@ -5241,8 +5851,9 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="switch"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* -- Thumb (pseudo-element for <input>, child for custom markup) -- */
@@ -5251,7 +5862,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: block;
   width: var(--switch-thumb, 18px);
   height: var(--switch-thumb, 18px);
-  border-radius: var(--radius-full);
+  border-radius: var(--switch-radius);
   background: var(--color-primary-fg);
   box-shadow: var(--switch-thumb-shadow, var(--shadow-xs));
   transition: transform var(--duration-fast) var(--ease-default);
@@ -5263,7 +5874,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: block;
   width: var(--switch-thumb, 18px);
   height: var(--switch-thumb, 18px);
-  border-radius: var(--radius-full);
+  border-radius: var(--switch-radius);
   background: var(--color-primary-fg);
   box-shadow: var(--switch-thumb-shadow, var(--shadow-xs));
   transition: transform var(--duration-fast) var(--ease-default);
@@ -5345,7 +5956,7 @@ div[data-ui="separator"][data-style="thick"]::after {
    the track's border is always visible, and ON fills it with `Highlight`. [W3-3] */
 @media (forced-colors: active) {
   [data-ui="switch"] {
-    border: 1px solid ButtonText;
+    border: var(--border-width) solid ButtonText;
     background: ButtonFace;
   }
 
@@ -5502,25 +6113,31 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/text.css === */
 /* @ui:component text */
-/* @ui:tokens color-fg color-fg-muted color-primary text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl weight-normal weight-medium weight-semibold weight-bold leading-tight leading-snug leading-normal leading-relaxed font-sans font-mono */
+/* @ui:tokens color-fg color-fg-muted color-primary text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl weight-normal weight-medium weight-semibold weight-bold leading-tight leading-snug leading-normal leading-relaxed font-heading font-body heading-weight heading-tracking heading-transform heading-caps heading-leading font-mono */
 
 /* ── Heading ── */
 [data-ui="heading"] {
-  font-family: var(--font-sans);
-  font-weight: var(--weight-bold);
+  font-family: var(--font-heading);
+  font-weight: var(--heading-weight);
   color: var(--color-fg);
-  line-height: var(--leading-tight);
-  letter-spacing: -0.01em;
+  line-height: var(--heading-leading);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  /* The optical tightening a large heading needs, PLUS whatever tracking the
+     theme's voice asks for on top of it — so a theme that wants wide-tracked
+     headings sets --heading-tracking once and every size follows, instead of
+     each size having to re-derive its own number. */
+  letter-spacing: calc(-0.01em + var(--heading-tracking));
 }
 
 [data-ui="heading"][data-size="1"] {
   font-size: var(--text-4xl);
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.02em + var(--heading-tracking));
 }
 
 [data-ui="heading"][data-size="2"] {
   font-size: var(--text-3xl);
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.02em + var(--heading-tracking));
 }
 
 [data-ui="heading"][data-size="3"] {
@@ -5544,7 +6161,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Text ── */
 [data-ui="text"] {
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
   color: var(--color-fg);
 }
 
@@ -5622,7 +6239,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/textarea.css === */
 /* @ui:component textarea */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-sans text-xs text-sm text-base duration-fast ease-default */
+/* @ui:tokens color-fg color-fg-muted color-border color-border-strong color-ring color-destructive radius-md space-2 space-3 space-4 font-ui text-xs text-sm text-base duration-fast ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-shadow input-border-width input-fill disabled-opacity */
 
 /* -- Base -- */
 [data-ui="textarea"] {
@@ -5630,11 +6247,17 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 100%;
   min-height: var(--textarea-min-height, 80px);
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
+  /* Longhands, not the `border:` shorthand: the shorthand's width slot takes
+     ONE value, and `controls.input: underline` (1.1A-10) states the silhouette
+     as a four-value box — `0 0 var(--border-width) 0` — so only a bottom rule
+     is drawn. Identical to the shorthand at every other value of the token. */
+  border-style: solid;
+  border-color: var(--color-border);
+  border-width: var(--input-border-width);
   border-radius: var(--textarea-radius, var(--radius-md));
-  background: var(--textarea-bg, var(--color-bg));
+  background: var(--textarea-bg, var(--input-fill));
   color: var(--color-fg);
-  font-family: var(--textarea-font, var(--font-sans));
+  font-family: var(--textarea-font, var(--font-ui));
   font-size: var(--text-sm);
   line-height: 1.5;
   resize: vertical;
@@ -5651,8 +6274,11 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="textarea"]:focus {
-  outline: 2px solid var(--color-ring);
-  outline-offset: -1px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  /* The ring replaces the border rather than sitting outside it: inset by
+     exactly the edge it covers, so a heavier shape theme stays aligned. */
+  outline-offset: calc(-1 * var(--input-border-width));
+  box-shadow: var(--focus-shadow);
   border-color: transparent;
 }
 
@@ -5680,7 +6306,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="textarea"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   resize: none;
 }
@@ -5694,7 +6320,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/toggle.css === */
 /* @ui:component toggle */
-/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring radius-md space-1 space-1h space-2 space-3 space-4 text-xs text-sm text-base font-sans weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring radius-md space-1 space-1h space-2 space-3 space-4 text-xs text-sm text-base font-ui weight-medium duration-fast ease-default border-width focus-ring-width focus-ring-offset focus-ring-style focus-ring-color focus-shadow disabled-opacity */
 
 /* ── Base (off / unpressed) ── */
 [data-ui="toggle"] {
@@ -5703,11 +6329,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   justify-content: center;
   gap: var(--space-1h);
   padding: var(--toggle-pad-y, var(--space-1h)) var(--toggle-pad-x, var(--space-3));
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--toggle-radius, var(--radius-md));
   background: var(--color-bg);
   color: var(--color-fg-muted);
-  font-family: var(--toggle-font, var(--font-sans));
+  font-family: var(--toggle-font, var(--font-ui));
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1;
@@ -5724,8 +6350,9 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="toggle"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  box-shadow: var(--focus-shadow);
 }
 
 /* ── Pressed / on — styled entirely off aria-pressed, no JS ── */
@@ -5742,7 +6369,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="toggle"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -5766,7 +6393,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === primitives/watermark.css === */
 /* @ui:component watermark */
-/* @ui:tokens color-fg-muted doc-font font-sans text-xl text-2xl text-4xl weight-bold leading-tight space-8 space-20 z-raised */
+/* @ui:tokens color-fg-muted doc-font font-body text-xl text-2xl text-4xl weight-bold leading-tight space-8 space-20 z-raised */
 
 [data-ui="watermark"] {
   position: fixed;
@@ -5785,7 +6412,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="watermark"] > [data-part="mark"] {
   color: var(--color-fg-muted);
-  font-family: var(--doc-font, var(--font-sans));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--text-4xl);
   font-weight: var(--weight-bold);
   line-height: var(--leading-tight);
@@ -5843,7 +6470,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/accordion.css === */
 /* @ui:component accordion */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border space-3 space-4 text-sm text-base weight-medium duration-normal ease-default radius-lg */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border space-3 space-4 text-sm text-base weight-medium duration-normal ease-default radius-lg font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ── */
 [data-ui="accordion"] {
@@ -5852,7 +6479,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Item ── */
 [data-ui="accordion"] [data-part="item"] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="accordion"] [data-part="item"]:last-child {
@@ -5869,7 +6496,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border: none;
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-base);
   font-weight: var(--weight-medium);
   text-align: start;
@@ -5883,8 +6510,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="accordion"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
   border-radius: var(--radius-sm, 0.25rem);
 }
 
@@ -5916,13 +6543,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Bordered Variant ── */
 [data-ui="accordion"][data-bordered="true"] {
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
 [data-ui="accordion"][data-bordered="true"] [data-part="item"] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="accordion"][data-bordered="true"] [data-part="item"]:last-child {
@@ -5939,7 +6566,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/alert-dialog.css === */
 /* @ui:component alert-dialog */
-/* @ui:tokens radius-xl shadow-xl space-2 space-3 space-6 color-bg color-fg color-border color-fg-muted color-destructive duration-normal ease-default ease-out z-overlay z-modal */
+/* @ui:tokens radius-xl shadow-xl space-2 space-3 space-6 color-bg color-fg color-border color-fg-muted color-destructive duration-normal ease-default ease-out z-overlay z-modal font-heading border-width */
 
 /* ── Root ── */
 [data-ui="alert-dialog"] {
@@ -5975,7 +6602,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   max-height: 85vh;
   overflow-y: auto;
   background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--alert-dialog-radius, var(--radius-xl));
   box-shadow: var(--alert-dialog-shadow, var(--shadow-xl));
   opacity: 0;
@@ -6021,6 +6648,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Title ── */
 [data-ui="alert-dialog"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg, 1.125rem);
   font-weight: var(--weight-semibold, 600);
   color: var(--color-fg);
@@ -6060,7 +6688,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/barcode.css === */
 /* @ui:component barcode */
-/* @ui:tokens color-fg color-bg color-fg-muted doc-font doc-legal-color doc-legal-size font-mono font-sans space-2 space-12 space-16 space-20 */
+/* @ui:tokens color-fg color-bg color-fg-muted doc-font doc-legal-color doc-legal-size font-mono font-body space-2 space-12 space-16 space-20 */
 
 [data-ui="barcode"] {
   display: inline-flex;
@@ -6087,7 +6715,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="barcode"] > [data-part="caption"] {
   color: var(--doc-legal-color, var(--color-fg-muted));
-  font-family: var(--font-mono, var(--doc-font, var(--font-sans)));
+  font-family: var(--font-mono, var(--doc-font, var(--font-body)));
   font-size: var(--doc-legal-size);
   line-height: var(--leading-normal);
   text-align: center;
@@ -6107,7 +6735,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/calendar.css === */
 /* @ui:component calendar */
-/* @ui:tokens color-bg color-fg color-fg-muted color-fg-subtle color-border color-primary color-primary-fg color-primary-subtle color-ring radius-md radius-full space-0 space-1 space-2 text-xs text-sm text-base weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-fg-subtle color-border color-primary color-primary-fg color-primary-subtle color-ring radius-md radius-full space-0 space-1 space-2 text-xs text-sm text-base weight-medium duration-fast ease-default font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 /* ── Root ── */
 [data-ui="calendar"] {
@@ -6140,7 +6768,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 28px;
   height: 28px;
   padding: 0;
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
@@ -6156,13 +6784,15 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="calendar"] [data-part="nav-prev"]:focus-visible,
 [data-ui="calendar"] [data-part="nav-next"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="calendar"] [data-part="nav-prev"]:disabled,
 [data-ui="calendar"] [data-part="nav-next"]:disabled {
-  opacity: 0.4;
+  /* Dimmer than a disabled control — 0.4 at the 0.5 default — and it follows a
+     theme's `--disabled-opacity` like every other disabled dim (1.1A-27). */
+  opacity: calc(var(--disabled-opacity) * 0.8);
   cursor: not-allowed;
 }
 
@@ -6197,11 +6827,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 36px;
   height: 36px;
   padding: 0;
-  border: 1px solid transparent;
+  border: var(--border-width) solid transparent;
   border-radius: var(--radius-full);
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   cursor: pointer;
   transition: background var(--duration-fast) var(--ease-default),
@@ -6214,8 +6844,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="calendar"] [data-part="day"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Today ── */
@@ -6250,7 +6880,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Disabled days (aria-disabled keeps them focusable; :disabled for hard-disabled) ── */
 [data-ui="calendar"] [data-part="day"][aria-disabled="true"],
 [data-ui="calendar"] [data-part="day"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   text-decoration: line-through;
 }
@@ -6314,7 +6944,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/carousel.css === */
 /* @ui:component carousel */
-/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-ring radius-md radius-lg space-1 space-2 space-3 space-4 text-sm font-sans duration-fast ease-default */
+/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-ring radius-md radius-lg space-1 space-2 space-3 space-4 text-sm font-ui duration-fast ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 /* The sliding is CSS, not JavaScript: the viewport is a scroll-snap strip and
    every slide is a snap target. Everything below works with no controller
@@ -6328,7 +6958,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   inline-size: 100%;
   min-inline-size: 0;
   max-inline-size: 100%;
-  font-family: var(--carousel-font, var(--font-sans));
+  font-family: var(--carousel-font, var(--font-ui));
 }
 
 /* ── Viewport: the scroll-snap strip ── */
@@ -6354,8 +6984,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="carousel"] [data-part="viewport"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Slide: one full-width snap target ── */
@@ -6363,7 +6993,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex: 0 0 var(--carousel-slide-size, 100%);
   min-inline-size: 0;
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   color: var(--color-fg);
@@ -6392,7 +7022,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   min-inline-size: 2rem;
   min-block-size: 2rem;
   padding: var(--space-1) var(--space-2);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
@@ -6411,14 +7041,15 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="carousel"] [data-part="prev"]:focus-visible,
 [data-ui="carousel"] [data-part="next"]:focus-visible,
 [data-ui="carousel"] [data-part="dot"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Boundary contract "stop" — the controller disables the end button. */
 [data-ui="carousel"] [data-part="prev"]:disabled,
 [data-ui="carousel"] [data-part="next"]:disabled {
-  opacity: 0.4;
+  /* 0.4 at the 0.5 default, and a theme's `--disabled-opacity` moves it (1.1A-27). */
+  opacity: calc(var(--disabled-opacity) * 0.8);
   cursor: not-allowed;
 }
 
@@ -6427,7 +7058,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   inline-size: 0.625rem;
   block-size: 0.625rem;
   padding: 0;
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: 50%;
   background: var(--color-bg-muted);
   cursor: pointer;
@@ -6463,7 +7094,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/combobox.css === */
 /* @ui:component combobox */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle color-ring radius-md radius-lg shadow-md space-1 space-2 space-3 text-sm text-base z-dropdown duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle radius-md radius-lg shadow-md space-1 space-2 space-3 text-sm text-base z-dropdown duration-fast ease-default font-ui border-width focus-ring-color focus-ring-width */
 
 /* ── Root ── */
 [data-ui="combobox"] {
@@ -6477,11 +7108,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: block;
   width: 100%;
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   line-height: 1.5;
   outline: none;
@@ -6494,8 +7125,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="combobox"] [data-part="input"]:focus {
-  border-color: var(--color-ring, oklch(0.55 0.22 264));
-  box-shadow: 0 0 0 2px var(--color-ring, oklch(0.55 0.22 264));
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
 }
 
 /* ── Listbox ── */
@@ -6507,7 +7138,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-dropdown);
   margin-top: var(--space-1);
   padding: var(--space-1);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   box-shadow: var(--shadow-md);
@@ -6592,7 +7223,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/command-palette.css === */
 /* @ui:component command-palette */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle color-bg-muted shadow-xl radius-xl space-2 space-3 space-4 text-sm text-xs text-base weight-medium font-mono z-overlay z-modal duration-fast duration-normal ease-out */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle color-bg-muted shadow-xl radius-xl space-2 space-3 space-4 text-sm text-xs text-base weight-medium font-mono z-overlay z-modal duration-fast duration-normal ease-out font-ui border-width */
 
 /* ── Root ── */
 [data-ui="command-palette"] {
@@ -6625,7 +7256,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: flex;
   flex-direction: column;
   background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
@@ -6657,7 +7288,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: flex;
   align-items: center;
   padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 /* ── Search Input ── */
@@ -6667,7 +7298,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border: none;
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-base);
   outline: none;
 }
@@ -6751,7 +7382,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   align-items: center;
   gap: var(--space-1, 0.25rem);
   padding: var(--space-1, 0.25rem) var(--space-2);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-sm, 0.25rem);
   background: var(--color-bg-muted, oklch(0.96 0.004 260));
   color: var(--color-fg-muted);
@@ -6780,7 +7411,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/context-menu.css === */
 /* @ui:component context-menu */
-/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring space-px space-1 space-2 space-3 space-4 space-20 radius-md radius-lg shadow-md text-sm weight-medium font-sans duration-fast ease-out z-dropdown */
+/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring space-px space-1 space-2 space-3 space-4 space-20 radius-md radius-lg shadow-md text-sm weight-medium font-ui duration-fast ease-out z-dropdown focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 [data-ui="context-menu"] {
   position: relative;
@@ -6793,12 +7424,12 @@ div[data-ui="separator"][data-style="thick"]::after {
   border-radius: var(--radius-lg);
   background: var(--color-bg-muted);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
 }
 
 [data-ui="context-menu"] [data-part="target"]:focus-visible {
-  outline: calc(var(--space-px) * 2) solid var(--color-ring);
-  outline-offset: var(--space-1);
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="context-menu"] [data-part="menu"] {
@@ -6830,7 +7461,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   text-align: start;
@@ -6854,15 +7485,15 @@ div[data-ui="separator"][data-style="thick"]::after {
    focus additionally draws the ring, inset so it does not overlap the item
    above. [W3-3] */
 [data-ui="context-menu"] [data-part="item"]:focus-visible {
-  outline: calc(var(--space-px) * 2) solid var(--color-ring);
-  outline-offset: calc(var(--space-px) * -2);
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 [data-ui="context-menu"] [data-part="item"]:disabled,
 [data-ui="context-menu"] [data-part="item"][aria-disabled="true"] {
   color: var(--color-fg-muted);
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 [data-ui="context-menu"] [data-part="separator"] {
@@ -6881,7 +7512,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/date-picker.css === */
 /* @ui:component date-picker */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-ring shadow-lg radius-md radius-lg space-1 space-2 space-3 space-4 text-xs text-sm z-dropdown duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-ring shadow-lg radius-md radius-lg space-1 space-2 space-3 space-4 text-xs text-sm z-dropdown duration-fast ease-default font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 /* The month grid inside the popup is the `calendar` recipe — see calendar.css */
 
 /* ── Root ── */
@@ -6902,11 +7533,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 100%;
   padding: var(--space-2, 0.5rem) var(--space-3);
   padding-inline-end: var(--space-8, 2.5rem);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   line-height: 1.5;
   cursor: pointer;
@@ -6918,8 +7549,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="date-picker"] [data-part="input"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
   border-color: var(--color-primary);
 }
 
@@ -6942,7 +7573,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-dropdown);
   margin-top: var(--space-1);
   padding: var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   box-shadow: var(--shadow-lg);
@@ -6981,7 +7612,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/dialog.css === */
 /* @ui:component dialog */
-/* @ui:tokens radius-xl shadow-xl space-4 space-6 space-8 color-bg color-fg color-border color-fg-muted duration-normal duration-slow ease-default ease-out z-overlay z-modal */
+/* @ui:tokens radius-xl shadow-xl space-4 space-6 space-8 color-bg panel-bg color-fg color-border color-fg-muted duration-normal duration-slow ease-default ease-out z-overlay z-modal font-heading corner-shape border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop */
 
 /* ── Root ── */
 [data-ui="dialog"] {
@@ -7016,15 +7647,23 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 90%;
   max-height: 85vh;
   overflow-y: auto;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--panel-bg);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--dialog-radius, var(--radius-xl));
+  corner-shape: var(--corner-shape);
   box-shadow: var(--dialog-shadow, var(--shadow-xl));
   opacity: 0;
   transition: opacity var(--duration-normal) var(--ease-out),
               transform var(--duration-normal) var(--ease-out);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="dialog"] [data-part="panel"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 [data-ui="dialog"][data-state="open"] [data-part="panel"] {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
@@ -7073,6 +7712,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Title ── */
 [data-ui="dialog"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg, 1.125rem);
   font-weight: var(--weight-semibold, 600);
   color: var(--color-fg);
@@ -7107,8 +7747,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="dialog"] [data-part="close"]:not([data-ui]):focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Description ── */
@@ -7144,7 +7784,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/drawer.css === */
 /* @ui:component drawer */
-/* @ui:tokens color-bg color-fg color-border shadow-xl space-4 space-6 radius-none z-overlay z-modal duration-normal duration-slow ease-out ease-default */
+/* @ui:tokens color-bg panel-bg color-fg color-border shadow-xl space-4 space-6 radius-none z-overlay z-modal duration-normal duration-slow ease-out ease-default font-heading border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop */
 
 /* ── Root ── */
 [data-ui="drawer"] {
@@ -7179,17 +7819,24 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex-direction: column;
   width: var(--drawer-width, 400px);
   max-width: 100vw;
-  background: var(--color-bg);
+  background: var(--panel-bg);
   border: none;
   box-shadow: var(--drawer-shadow, var(--shadow-xl));
   transition: transform var(--duration-slow) var(--ease-out);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="drawer"] [data-part="panel"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 /* ── Side Variants ── */
 [data-ui="drawer"] [data-part="panel"][data-variant="left"] {
   inset-inline-start: 0;
   inset-inline-end: auto;
-  border-inline-end: 1px solid var(--color-border);
+  border-inline-end: var(--border-width) solid var(--color-border);
   border-radius: 0 var(--radius-none, 0) var(--radius-none, 0) 0;
   transform: translateX(-100%);
 }
@@ -7197,7 +7844,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="drawer"] [data-part="panel"][data-variant="right"] {
   inset-inline-end: 0;
   inset-inline-start: auto;
-  border-inline-start: 1px solid var(--color-border);
+  border-inline-start: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-none, 0) 0 0 var(--radius-none, 0);
   transform: translateX(100%);
 }
@@ -7251,6 +7898,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Title ── */
 [data-ui="drawer"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg, 1.125rem);
   font-weight: var(--weight-semibold, 600);
   color: var(--color-fg);
@@ -7285,8 +7933,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="drawer"] [data-part="close"]:not([data-ui]):focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Body ── */
@@ -7305,7 +7953,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-3, 0.75rem);
   padding: var(--space-6);
   padding-top: var(--space-4);
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-width) solid var(--color-border);
   flex-shrink: 0;
 }
 
@@ -7319,7 +7967,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/dropdown.css === */
 /* @ui:component dropdown */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle color-primary space-1 space-2 space-3 space-4 radius-md radius-lg shadow-md text-sm weight-medium duration-fast ease-default ease-out z-dropdown */
+/* @ui:tokens color-bg panel-bg color-fg color-fg-muted color-border color-primary-subtle color-primary space-1 space-2 space-3 space-4 radius-md radius-lg shadow-md text-sm weight-medium duration-fast ease-default ease-out z-dropdown font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop disabled-opacity */
 
 /* ── Root ── */
 [data-ui="dropdown"] {
@@ -7333,11 +7981,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   cursor: pointer;
@@ -7351,8 +7999,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="dropdown"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Menu ── */
@@ -7364,9 +8012,9 @@ div[data-ui="separator"][data-style="thick"]::after {
   min-width: 180px;
   margin-top: var(--space-1);
   padding: var(--space-1);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
-  background: var(--color-bg);
+  background: var(--panel-bg);
   box-shadow: var(--shadow-md);
   opacity: 0;
   transform: translateY(-4px);
@@ -7374,6 +8022,13 @@ div[data-ui="separator"][data-style="thick"]::after {
               transform var(--duration-fast) var(--ease-out);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="dropdown"] [data-part="menu"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 [data-ui="dropdown"][data-state="open"] [data-part="menu"] {
   opacity: 1;
   transform: translateY(0);
@@ -7396,7 +8051,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   text-align: start;
   cursor: pointer;
@@ -7418,12 +8073,12 @@ div[data-ui="separator"][data-style="thick"]::after {
    focus additionally draws the ring, inset so it does not overlap the item
    above. [W3-3] */
 [data-ui="dropdown"] [data-part="item"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 [data-ui="dropdown"] [data-part="item"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -7476,14 +8131,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/file-upload.css === */
 /* @ui:component file-upload */
-/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-ring color-destructive color-destructive-subtle space-px space-1 space-2 space-3 space-4 space-8 radius-md radius-lg text-xs text-sm text-base weight-semibold font-sans duration-fast ease-default */
+/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-ring color-destructive color-destructive-subtle space-px space-1 space-2 space-3 space-4 space-8 radius-md radius-lg text-xs text-sm text-base weight-semibold font-ui duration-fast ease-default focus-ring-width focus-ring-style focus-ring-color focus-ring-offset border-width disabled-opacity */
 
 [data-ui="file-upload"] {
   display: grid;
   gap: var(--space-4);
   inline-size: 100%;
   color: var(--color-fg);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
 }
 
 [data-ui="file-upload"] [data-part="dropzone"] {
@@ -7518,14 +8173,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="file-upload"]:has([data-part="input"]:focus-visible) [data-part="dropzone"] {
-  outline: var(--space-px) solid var(--color-ring);
-  outline-offset: var(--space-1);
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="file-upload"][data-state="dragging"] [data-part="dropzone"] {
   border-color: var(--color-primary);
   background: var(--color-primary-subtle);
-  box-shadow: 0 0 0 var(--space-px) var(--color-primary);
+  box-shadow: 0 0 0 var(--border-width) var(--color-primary);
 }
 
 [data-ui="file-upload"] [data-part="prompt"] {
@@ -7599,8 +8254,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="file-upload"] [data-part="remove"]:focus-visible {
-  outline: var(--space-px) solid var(--color-ring);
-  outline-offset: var(--space-1);
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="file-upload"] [data-part="empty"] {
@@ -7622,7 +8277,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="file-upload"][data-disabled] {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 [data-ui="file-upload"][data-disabled] [data-part="dropzone"],
@@ -7638,7 +8293,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/input-otp.css === */
 /* @ui:component input-otp */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-ring color-primary color-destructive radius-md space-2 space-3 text-base text-lg font-sans duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-ring color-primary color-destructive radius-md space-2 space-3 text-base text-lg font-ui duration-fast ease-default border-width disabled-opacity */
 
 /* ── Root ── */
 [data-ui="input-otp"] {
@@ -7653,7 +8308,7 @@ div[data-ui="separator"][data-style="thick"]::after {
      gutter. The transparent input is `inset: 0`, so it follows the box the
      segments settle into however many rows that takes. */
   max-inline-size: 100%;
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
 }
 
 /* ── Real input ──
@@ -7698,14 +8353,14 @@ div[data-ui="separator"][data-style="thick"]::after {
   justify-content: center;
   inline-size: var(--input-otp-segment-size);
   block-size: var(--input-otp-segment-size);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
   font-size: var(--text-lg, 1.125rem);
   font-variant-numeric: tabular-nums;
   line-height: 1;
-  transition: border-color var(--duration-fast, 120ms) var(--ease-default, ease),
+  transition: border-color var(--duration-fast) var(--ease-default),
               box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
 }
 
@@ -7717,7 +8372,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* Active (caret / selected) segment while focused */
 [data-ui="input-otp"] [data-part="segment"][data-active] {
   border-color: var(--color-ring);
-  box-shadow: 0 0 0 1px var(--color-ring);
+  box-shadow: 0 0 0 var(--border-width) var(--color-ring);
 }
 
 /* Blinking caret in the next-to-fill empty slot */
@@ -7765,7 +8420,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="input-otp"][data-disabled] {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 [data-ui="input-otp"][data-disabled] [data-part="input"] {
@@ -7789,7 +8444,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/menubar.css === */
 /* @ui:component menubar */
-/* @ui:tokens color-bg color-border color-fg color-fg-muted color-primary color-primary-subtle color-ring space-px space-1 space-2 space-3 space-4 space-20 radius-md radius-lg shadow-md text-xs text-sm text-base weight-medium duration-fast ease-out z-dropdown font-sans */
+/* @ui:tokens color-bg color-border color-fg color-fg-muted color-primary color-primary-subtle space-px space-1 space-2 space-3 space-4 space-20 radius-md radius-lg shadow-md text-xs text-sm text-base weight-medium duration-fast ease-out z-dropdown font-ui focus-ring-color focus-ring-width disabled-opacity */
 
 [data-ui="menubar"] {
   position: relative;
@@ -7807,7 +8462,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
 }
 
 [data-ui="menubar"] [data-part="group"] {
@@ -7849,7 +8504,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="menubar"] [data-part="trigger"]:focus-visible,
 [data-ui="menubar"] [data-part="item"]:focus-visible {
-  box-shadow: 0 0 0 calc(var(--space-px) * 2) var(--color-ring);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
 }
 
 [data-ui="menubar"] [data-part="submenu"] {
@@ -7884,7 +8539,10 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="menubar"] [role="menuitem"][aria-disabled="true"] {
   color: var(--color-fg-muted);
   cursor: not-allowed;
-  opacity: 0.6;
+  /* 0.6 at the 0.5 default — lighter than a control, since the muted colour
+     already carries half the signal — and a theme's `--disabled-opacity` moves
+     it (1.1A-27). */
+  opacity: calc(var(--disabled-opacity) * 1.2);
 }
 
 [data-ui="menubar"] [data-part="separator"] {
@@ -7916,7 +8574,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/pagination.css === */
 /* @ui:component pagination */
-/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-primary color-primary-fg color-border radius-md space-1 space-2 space-3 text-xs text-sm text-base weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-primary color-primary-fg color-border radius-md space-1 space-2 space-3 text-xs text-sm text-base weight-medium duration-fast ease-default font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 /* ── Root ── */
 [data-ui="pagination"] {
@@ -7952,11 +8610,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   min-width: 36px;
   height: 36px;
   padding: 0 var(--space-2);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   cursor: pointer;
@@ -7977,8 +8635,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="pagination"] [data-part="page"]:focus-visible,
 [data-ui="pagination"] [data-part="prev"]:focus-visible,
 [data-ui="pagination"] [data-part="next"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Active page ── */
@@ -8002,7 +8660,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Disabled ── */
 [data-ui="pagination"] [data-part="prev"]:disabled,
 [data-ui="pagination"] [data-part="next"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -8072,7 +8730,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/popover.css === */
 /* @ui:component popover */
-/* @ui:tokens color-bg color-fg color-border shadow-md radius-lg space-3 space-4 z-dropdown duration-fast ease-default */
+/* @ui:tokens color-bg panel-bg color-fg color-border shadow-md radius-lg space-3 space-4 z-dropdown duration-fast ease-default font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop */
 
 /* ── Root ── */
 [data-ui="popover"] {
@@ -8086,11 +8744,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   align-items: center;
   gap: var(--space-2, 0.5rem);
   padding: var(--space-2, 0.5rem) var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md, 0.375rem);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm, 0.875rem);
   font-weight: var(--weight-medium, 500);
   cursor: pointer;
@@ -8104,8 +8762,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="popover"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Content ── */
@@ -8114,9 +8772,9 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-dropdown);
   min-width: 200px;
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
-  background: var(--color-bg);
+  background: var(--panel-bg);
   color: var(--color-fg);
   box-shadow: var(--shadow-md);
   opacity: 0;
@@ -8125,6 +8783,13 @@ div[data-ui="separator"][data-style="thick"]::after {
               transform var(--duration-fast) var(--ease-default);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="popover"] [data-part="content"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 [data-ui="popover"][data-state="open"] [data-part="content"] {
   opacity: 1;
   transform: scale(1);
@@ -8212,8 +8877,8 @@ div[data-ui="separator"][data-style="thick"]::after {
   position: absolute;
   width: 8px;
   height: 8px;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--panel-bg);
+  border: var(--border-width) solid var(--color-border);
   transform: rotate(45deg);
 }
 
@@ -8314,8 +8979,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="popover"] [data-part="close"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Motion ── */
@@ -8328,7 +8993,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/qr-code.css === */
 /* @ui:component qr-code */
-/* @ui:tokens color-fg color-bg doc-legal-color doc-legal-size doc-font font-sans space-2 */
+/* @ui:tokens color-fg color-bg doc-legal-color doc-legal-size doc-font font-body space-2 */
 
 /* ── Base ── */
 [data-ui="qr-code"] {
@@ -8346,7 +9011,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Caption ── */
 [data-ui="qr-code"] [data-part="caption"] {
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--doc-legal-size, var(--text-xs));
   color: var(--doc-legal-color, var(--color-fg-muted));
   text-align: center;
@@ -8387,7 +9052,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/select-custom.css === */
 /* @ui:component select-custom */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-ring radius-md radius-lg shadow-md space-1 space-2 space-3 space-4 text-sm text-xs z-dropdown duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-ring radius-md radius-lg shadow-md space-1 space-2 space-3 space-4 text-sm text-xs z-dropdown duration-fast ease-default font-ui border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ── */
 [data-ui="select-custom"] {
@@ -8404,11 +9069,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 100%;
   min-width: 180px;
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   cursor: pointer;
   white-space: nowrap;
@@ -8421,8 +9086,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="select-custom"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Value ── */
@@ -8458,7 +9123,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-dropdown);
   margin-top: var(--space-1);
   padding: var(--space-1);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   box-shadow: var(--shadow-md);
@@ -8482,11 +9147,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   padding: var(--space-2) var(--space-3);
   margin-bottom: var(--space-1);
   border: none;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   border-radius: 0;
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   outline: none;
 }
@@ -8580,7 +9245,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/sheet.css === */
 /* @ui:component sheet */
-/* @ui:tokens color-bg color-fg color-border shadow-xl radius-xl space-4 space-6 z-overlay z-modal duration-normal duration-slow ease-out */
+/* @ui:tokens color-bg panel-bg color-fg color-border shadow-xl radius-xl space-4 space-6 z-overlay z-modal duration-normal duration-slow ease-out font-heading border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop */
 
 /* ── Root ── */
 [data-ui="sheet"] {
@@ -8611,11 +9276,18 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-modal);
   display: flex;
   flex-direction: column;
-  background: var(--color-bg);
+  background: var(--panel-bg);
   box-shadow: var(--shadow-xl);
   transition: transform var(--duration-slow) var(--ease-out);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="sheet"] [data-part="panel"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 /* ── Side: Bottom ── */
 [data-ui="sheet"] [data-part="panel"][data-variant="bottom"] {
   bottom: 0;
@@ -8643,7 +9315,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   bottom: 0;
   max-width: 100vw;
   border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
-  border-inline-end: 1px solid var(--color-border);
+  border-inline-end: var(--border-width) solid var(--color-border);
   transform: translateX(-100%);
 }
 
@@ -8654,7 +9326,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   bottom: 0;
   max-width: 100vw;
   border-radius: var(--radius-xl) 0 0 var(--radius-xl);
-  border-inline-start: 1px solid var(--color-border);
+  border-inline-start: var(--border-width) solid var(--color-border);
   transform: translateX(100%);
 }
 
@@ -8731,6 +9403,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Title ── */
 [data-ui="sheet"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg, 1.125rem);
   font-weight: var(--weight-semibold, 600);
   color: var(--color-fg);
@@ -8765,8 +9438,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="sheet"] [data-part="close"]:not([data-ui]):focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Body ── */
@@ -8787,7 +9460,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/sidebar.css === */
 /* @ui:component sidebar */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle color-bg-muted color-ring shadow-xl space-1 space-2 space-3 space-4 radius-md radius-lg z-overlay z-modal text-sm text-lg weight-medium weight-semibold duration-normal duration-slow ease-out ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle color-bg-muted color-ring shadow-xl space-1 space-2 space-3 space-4 radius-md radius-lg z-overlay z-modal text-sm text-lg weight-medium weight-semibold duration-normal duration-slow ease-out ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ──
    The root owns the layout column from `md` up; the panel is the visual surface.
@@ -8831,7 +9504,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex-direction: column;
   gap: var(--space-2);
   background: var(--sidebar-bg);
-  border-inline-end: 1px solid var(--color-border);
+  border-inline-end: var(--border-width) solid var(--color-border);
   border-start-end-radius: var(--radius-lg, 0.5rem);
   border-end-end-radius: var(--radius-lg, 0.5rem);
   box-shadow: var(--shadow-xl);
@@ -8912,8 +9585,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="sidebar"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Navigation ── */
@@ -8949,8 +9622,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="sidebar"] [data-part="item"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 [data-ui="sidebar"] [data-part="item"][aria-current="page"] {
@@ -8977,7 +9650,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="sidebar"] [data-part="footer"] {
   flex-shrink: 0;
   padding: var(--space-3) var(--space-4);
-  border-block-start: 1px solid var(--color-border);
+  border-block-start: var(--border-width) solid var(--color-border);
 }
 
 /* ── Rail (icons only) ── */
@@ -9070,7 +9743,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/slider.css === */
 /* @ui:component slider */
-/* @ui:tokens color-bg color-fg-muted color-border color-primary color-primary-subtle color-ring color-bg-muted space-2 space-3 space-4 radius-full text-sm text-base shadow-sm duration-fast ease-default */
+/* @ui:tokens color-bg color-fg-muted color-border color-primary color-primary-subtle color-ring color-bg-muted space-2 space-3 space-4 radius-full text-sm text-base shadow-sm duration-fast ease-default font-ui border-width border-width-strong focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 /* ── Root ── */
 [data-ui="slider"] {
@@ -9120,28 +9793,28 @@ div[data-ui="separator"][data-style="thick"]::after {
      value in both LTR and RTL (translateX is physical, so -50% always recentres). */
   transform: translate(-50%, -50%);
   background: var(--color-bg, white);
-  border: 2px solid var(--color-primary);
+  border: var(--border-width-strong) solid var(--color-primary);
   border-radius: var(--radius-full, 9999px);
-  box-shadow: var(--shadow-sm, 0 1px 3px oklch(0 0 0 / 0.1));
+  box-shadow: var(--shadow-sm);
   cursor: grab;
   touch-action: none;
-  transition: box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
+  transition: box-shadow var(--duration-fast) var(--ease-default);
 }
 
 [data-ui="slider"] [data-part="thumb"]:hover {
-  box-shadow: var(--shadow-sm, 0 1px 3px oklch(0 0 0 / 0.1)),
-              0 0 0 4px var(--color-primary-subtle, oklch(0.95 0.03 264 / 0.6));
+  box-shadow: var(--shadow-sm),
+              0 0 0 4px var(--color-primary-subtle);
 }
 
 [data-ui="slider"] [data-part="thumb"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="slider"] [data-part="thumb"][data-state="dragging"] {
   cursor: grabbing;
-  box-shadow: var(--shadow-sm, 0 1px 3px oklch(0 0 0 / 0.1)),
-              0 0 0 5px var(--color-primary-subtle, oklch(0.95 0.03 264 / 0.6));
+  box-shadow: var(--shadow-sm),
+              0 0 0 5px var(--color-primary-subtle);
 }
 
 /* ── Value output ── */
@@ -9149,7 +9822,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex: 0 0 auto;
   min-inline-size: 3ch;
   color: var(--color-fg-muted);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-variant-numeric: tabular-nums;
   text-align: end;
@@ -9168,7 +9841,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="slider"][data-disabled] {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -9186,7 +9859,7 @@ div[data-ui="separator"][data-style="thick"]::after {
    the substitution so the control still reads as "this much, up to here". [W3-3] */
 @media (forced-colors: active) {
   [data-ui="slider"] [data-part="track"] {
-    border: 1px solid ButtonText;
+    border: var(--border-width) solid ButtonText;
   }
 
   [data-ui="slider"] [data-part="range"] {
@@ -9197,7 +9870,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   [data-ui="slider"] [data-part="thumb"] {
     forced-color-adjust: none;
     background: ButtonText;
-    border: 1px solid ButtonFace;
+    border: var(--border-width) solid ButtonFace;
   }
 
   [data-ui="slider"] [data-part="thumb"]:focus-visible {
@@ -9207,7 +9880,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/table.css === */
 /* @ui:component table */
-/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-fg-subtle color-border color-border-strong color-primary color-primary-subtle color-ring color-destructive color-destructive-subtle space-0h space-1 space-2 space-3 space-4 space-5 space-8 text-xs text-sm weight-semibold weight-bold radius-sm radius-md radius-full duration-fast ease-default doc-table-footer-bg doc-table-footer-weight doc-print-border-color */
+/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-fg-subtle color-border color-border-strong color-primary color-primary-subtle color-ring color-destructive color-destructive-subtle space-0h space-1 space-2 space-3 space-4 space-5 space-8 text-xs text-sm weight-semibold weight-bold radius-sm radius-md radius-full duration-fast ease-default doc-table-footer-bg doc-table-footer-weight doc-print-border-color font-body border-width border-width-strong focus-ring-width focus-ring-style focus-ring-color focus-ring-offset stripe-bg */
 
 /* ── Root ── */
 [data-ui="table"] {
@@ -9233,7 +9906,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
 }
 
 /* Once any column is resized the layout freezes so widths are exact. */
@@ -9255,7 +9928,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   font-weight: var(--weight-semibold);
   color: var(--color-fg-muted);
   background: var(--color-bg);
-  border-bottom: 2px solid var(--color-border);
+  border-bottom: var(--border-width-strong) solid var(--color-border);
   white-space: nowrap;
   user-select: none;
 }
@@ -9313,8 +9986,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* Keyboard focus on cells (sortable headers + navigable grids). */
 [data-ui="table"] [data-part="th"]:focus-visible,
 [data-ui="table"] [data-part="td"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 /* ── Data Cell ── */
@@ -9322,7 +9995,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
   color: var(--color-fg);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   background: var(--color-bg);
   transition: background var(--duration-fast) var(--ease-default);
 }
@@ -9351,31 +10024,31 @@ div[data-ui="separator"][data-style="thick"]::after {
    Static fallback via nth-child; once the controller stamps data-stripe on the
    visible rows (so hidden rows never break the pattern), the stamped rules win. */
 [data-ui="table"][data-variant="striped"] [data-part="tbody"] [data-part="tr"]:not([data-stripe]):nth-child(even):not([data-selected]) [data-part="td"] {
-  background: var(--color-bg-subtle, oklch(0.97 0.004 260));
+  background: var(--stripe-bg);
 }
 
 [data-ui="table"][data-variant="striped"] [data-part="tbody"] [data-part="tr"]:not([data-stripe]):nth-child(even):not([data-selected]):hover [data-part="td"] {
-  background: var(--color-bg-subtle, oklch(0.95 0.006 260));
+  background: var(--stripe-bg);
 }
 
 [data-ui="table"][data-variant="striped"] [data-part="tbody"] [data-part="tr"][data-stripe="even"]:not([data-selected]) [data-part="td"] {
-  background: var(--color-bg-subtle, oklch(0.97 0.004 260));
+  background: var(--stripe-bg);
 }
 
 [data-ui="table"][data-variant="striped"] [data-part="tbody"] [data-part="tr"][data-stripe="even"]:not([data-selected]):hover [data-part="td"] {
-  background: var(--color-bg-subtle, oklch(0.95 0.006 260));
+  background: var(--stripe-bg);
 }
 
 /* ── Bordered Variant ── */
 [data-ui="table"][data-variant="bordered"] [data-part="table"] {
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md, 0.375rem);
   overflow: hidden;
 }
 
 [data-ui="table"][data-variant="bordered"] [data-part="th"],
 [data-ui="table"][data-variant="bordered"] [data-part="td"] {
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
 }
 
 /* ── Size: Small ── */
@@ -9403,7 +10076,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Footer ── */
 [data-ui="table"] [data-part="tfoot"] [data-part="td"] {
   font-weight: var(--doc-table-footer-weight, var(--weight-semibold));
-  border-top: 2px solid var(--color-border);
+  border-top: var(--border-width-strong) solid var(--color-border);
   border-bottom: none;
   background: var(--doc-table-footer-bg, var(--color-bg-subtle, oklch(0.97 0.004 260)));
 }
@@ -9529,7 +10202,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="table"] [data-part="filter-row"] [data-part="th"] {
   padding: var(--space-1) var(--space-2);
   background: var(--color-bg);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="table"] [data-part="filter-input"],
@@ -9541,14 +10214,14 @@ div[data-ui="separator"][data-style="thick"]::after {
   font-size: var(--text-xs);
   color: var(--color-fg);
   background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-sm);
 }
 
 [data-ui="table"] [data-part="filter-input"]:focus,
 [data-ui="table"] [data-part="filter"]:focus {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -1px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--border-width));
   border-color: var(--color-primary);
 }
 
@@ -9569,7 +10242,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   text-align: inherit;
   color: var(--color-fg);
   background: var(--color-bg);
-  border: 1px solid var(--color-primary);
+  border: var(--border-width) solid var(--color-primary);
   border-radius: var(--radius-sm);
   outline: none;
 }
@@ -9622,11 +10295,11 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="table"] [data-part="tr"][data-drop-target][data-drop-pos="before"] [data-part="td"] {
-  border-block-start: 2px solid var(--color-primary);
+  border-block-start: var(--border-width-strong) solid var(--color-primary);
 }
 
 [data-ui="table"] [data-part="tr"][data-drop-target][data-drop-pos="after"] [data-part="td"] {
-  border-block-end: 2px solid var(--color-primary);
+  border-block-end: var(--border-width-strong) solid var(--color-primary);
 }
 
 [data-ui="table"] [data-part="th"][data-dragging] {
@@ -9634,11 +10307,11 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="table"] [data-part="th"][data-drop-target][data-drop-pos="before"] {
-  border-inline-start: 2px solid var(--color-primary);
+  border-inline-start: var(--border-width-strong) solid var(--color-primary);
 }
 
 [data-ui="table"] [data-part="th"][data-drop-target][data-drop-pos="after"] {
-  border-inline-end: 2px solid var(--color-primary);
+  border-inline-end: var(--border-width-strong) solid var(--color-primary);
 }
 
 /* ── Column Resize Handles (injected by the controller) ── */
@@ -9711,11 +10384,11 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="table"] [data-pin="start"][data-pin-edge] {
-  border-inline-end: 1px solid var(--color-border-strong, oklch(0.85 0.006 260));
+  border-inline-end: var(--border-width) solid var(--color-border-strong, oklch(0.85 0.006 260));
 }
 
 [data-ui="table"] [data-pin="end"][data-pin-edge] {
-  border-inline-start: 1px solid var(--color-border-strong, oklch(0.85 0.006 260));
+  border-inline-start: var(--border-width) solid var(--color-border-strong, oklch(0.85 0.006 260));
 }
 
 /* ── Column Visibility ── */
@@ -9787,7 +10460,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="table"][data-stacked] [data-part="tfoot"] [data-part="tr"] {
   display: block;
   margin-block-end: var(--space-3);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   overflow: hidden;
@@ -9801,7 +10474,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-4);
   text-align: end;
   border-bottom: none;
-  border-block-end: 1px solid var(--color-border);
+  border-block-end: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="table"][data-stacked] [data-part="tr"] [data-part="td"]:last-child,
@@ -9898,7 +10571,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/tabs.css === */
 /* @ui:component tabs */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle space-1 space-2 space-3 space-4 radius-md radius-lg text-sm text-base weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle space-1 space-2 space-3 space-4 radius-md radius-lg text-sm text-base weight-medium duration-fast ease-default font-ui border-width border-width-strong focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ── */
 [data-ui="tabs"] {
@@ -9927,7 +10600,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border: none;
   background: transparent;
   color: var(--color-fg-muted);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   cursor: pointer;
@@ -9942,8 +10615,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="tabs"] [data-part="trigger"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
   border-radius: var(--radius-md);
 }
 
@@ -9953,12 +10626,12 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Underline Variant ── */
 [data-ui="tabs"][data-variant="underline"] [data-part="list"] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   gap: 0;
 }
 
 [data-ui="tabs"][data-variant="underline"] [data-part="trigger"] {
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--border-width-strong) solid transparent;
   margin-bottom: -1px;
   border-radius: 0;
 }
@@ -9990,17 +10663,17 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="tabs"][data-variant="pill"] [data-part="trigger"][aria-selected="true"] {
   background: var(--color-bg);
   color: var(--color-fg);
-  box-shadow: var(--shadow-xs, 0 1px 2px oklch(0 0 0 / 0.04));
+  box-shadow: var(--shadow-xs);
 }
 
 /* ── Enclosed Variant ── */
 [data-ui="tabs"][data-variant="enclosed"] [data-part="list"] {
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   gap: 0;
 }
 
 [data-ui="tabs"][data-variant="enclosed"] [data-part="trigger"] {
-  border: 1px solid transparent;
+  border: var(--border-width) solid transparent;
   border-bottom: none;
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   margin-bottom: -1px;
@@ -10045,8 +10718,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 @media (forced-colors: active) {
   [data-ui="tabs"] [data-part="trigger"][aria-selected="true"] {
     /* An outline the OS preserves, on every variant. */
-    outline: 2px solid Highlight;
-    outline-offset: -2px;
+    outline: var(--border-width-strong) solid Highlight;
+    outline-offset: calc(-1 * var(--border-width-strong));
   }
 
   [data-ui="tabs"][data-variant="underline"] [data-part="trigger"][aria-selected="true"] {
@@ -10061,7 +10734,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/tag-input.css === */
 /* @ui:component tag-input */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle color-ring radius-md radius-lg shadow-md space-1 space-1h space-2 space-3 text-sm z-dropdown duration-fast ease-default font-sans */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary-subtle radius-md radius-lg shadow-md space-1 space-1h space-2 space-3 text-sm z-dropdown duration-fast ease-default font-ui border-width focus-ring-color focus-ring-width */
 
 /* NOTE: the tags themselves are `data-ui="chip"` elements — their styling comes
    entirely from chip.css. This file styles only the field wrapper, the tag row,
@@ -10082,7 +10755,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-1h);
   width: 100%;
   padding: var(--space-1h) var(--space-2);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   list-style: none;
@@ -10091,8 +10764,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="tag-input"] [data-part="taglist"]:focus-within {
-  border-color: var(--color-ring, oklch(0.55 0.22 264));
-  box-shadow: 0 0 0 2px var(--color-ring, oklch(0.55 0.22 264));
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
 }
 
 /* ── Text input: borderless, grows to fill the remaining row space ── */
@@ -10103,7 +10776,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border: none;
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   line-height: 1.5;
   outline: none;
@@ -10122,7 +10795,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   z-index: var(--z-dropdown);
   margin-top: var(--space-1);
   padding: var(--space-1);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
   box-shadow: var(--shadow-md);
@@ -10169,7 +10842,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/toast.css === */
 /* @ui:component toast */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-success color-destructive color-warning shadow-lg radius-lg space-2 space-3 space-4 text-sm weight-medium z-toast duration-normal duration-slow ease-out */
+/* @ui:tokens color-bg panel-bg color-fg color-fg-muted color-border color-success color-destructive color-warning shadow-lg radius-lg space-2 space-3 space-4 text-sm weight-medium z-toast duration-normal duration-slow ease-out font-ui border-width border-width-lg focus-ring-width focus-ring-style focus-ring-color focus-ring-offset surface-backdrop */
 
 /* ── Container ── */
 [data-ui="toast"][data-part="container"] {
@@ -10218,8 +10891,8 @@ div[data-ui="separator"][data-style="thick"]::after {
   max-width: 380px;
   width: max-content;
   padding: var(--space-3) var(--space-4);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  background: var(--panel-bg);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   pointer-events: auto;
@@ -10229,6 +10902,13 @@ div[data-ui="separator"][data-style="thick"]::after {
               transform var(--duration-normal) var(--ease-out);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="toast"] [data-part="toast"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 /* ── State: Entering ── */
 [data-ui="toast"][data-variant="top-right"] [data-part="toast"][data-state="entering"],
 [data-ui="toast"][data-variant="top-left"] [data-part="toast"][data-state="entering"] {
@@ -10268,7 +10948,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Tone Variants ── */
 [data-ui="toast"] [data-part="toast"][data-variant="success"] {
-  border-inline-start: 3px solid var(--color-success, oklch(0.55 0.18 145));
+  border-inline-start: var(--border-width-lg) solid var(--color-success, oklch(0.55 0.18 145));
 }
 
 [data-ui="toast"] [data-part="toast"][data-variant="success"] [data-part="icon"] {
@@ -10276,7 +10956,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="toast"] [data-part="toast"][data-variant="error"] {
-  border-inline-start: 3px solid var(--color-destructive, oklch(0.55 0.22 25));
+  border-inline-start: var(--border-width-lg) solid var(--color-destructive, oklch(0.55 0.22 25));
 }
 
 [data-ui="toast"] [data-part="toast"][data-variant="error"] [data-part="icon"] {
@@ -10284,7 +10964,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="toast"] [data-part="toast"][data-variant="warning"] {
-  border-inline-start: 3px solid var(--color-warning, oklch(0.7 0.18 85));
+  border-inline-start: var(--border-width-lg) solid var(--color-warning, oklch(0.7 0.18 85));
 }
 
 [data-ui="toast"] [data-part="toast"][data-variant="warning"] [data-part="icon"] {
@@ -10306,7 +10986,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Message ── */
 [data-ui="toast"] [data-part="message"] {
   flex: 1;
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   color: var(--color-fg);
@@ -10317,11 +10997,11 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="toast"] [data-part="action"] {
   flex-shrink: 0;
   padding: var(--space-1, 0.25rem) var(--space-2);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md, 0.375rem);
   background: transparent;
   color: var(--color-fg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-xs, 0.75rem);
   font-weight: var(--weight-medium);
   cursor: pointer;
@@ -10334,8 +11014,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="toast"] [data-part="action"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Close Button ── */
@@ -10361,8 +11041,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="toast"] [data-part="close"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Motion ── */
@@ -10375,14 +11055,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/toggle-group.css === */
 /* @ui:component toggle-group */
-/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring radius-md space-1 space-1h space-2 space-3 text-sm font-sans weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-subtle color-ring radius-md space-1 space-1h space-2 space-3 text-sm font-ui weight-medium duration-fast ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset disabled-opacity */
 
 /* ── Root: a segmented row of toggle buttons ── */
 [data-ui="toggle-group"] {
   display: inline-flex;
   gap: var(--space-1);
   padding: var(--space-1);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
 }
@@ -10397,7 +11077,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-fg-muted);
-  font-family: var(--toggle-group-font, var(--font-sans));
+  font-family: var(--toggle-group-font, var(--font-ui));
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1;
@@ -10438,13 +11118,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Keyboard focus ring on the item (focus lives on the hidden control) ── */
 [data-ui="toggle-group"] [data-part="item"]:has([data-part="control"]:focus-visible) {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Disabled control ── */
 [data-ui="toggle-group"] [data-part="item"]:has([data-part="control"]:disabled) {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -10457,7 +11137,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/tooltip.css === */
 /* @ui:component tooltip */
-/* @ui:tokens color-bg color-fg radius-md space-1h space-2 text-xs z-dropdown duration-fast ease-default */
+/* @ui:tokens color-bg color-fg radius-md space-1h space-2 text-xs z-dropdown duration-fast ease-default font-ui surface-backdrop */
 
 /* ── Root ── */
 [data-ui="tooltip"] {
@@ -10478,7 +11158,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   color: var(--color-bg);
   border-radius: var(--radius-md);
   padding: var(--space-1h, 0.375rem) var(--space-2);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-ui);
   font-size: var(--text-xs, 0.75rem);
   line-height: 1.4;
   white-space: nowrap;
@@ -10489,6 +11169,13 @@ div[data-ui="separator"][data-style="thick"]::after {
               transform var(--duration-fast) var(--ease-default);
 }
 
+@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
+  [data-ui="tooltip"] [data-part="content"] {
+    -webkit-backdrop-filter: var(--surface-backdrop);
+    backdrop-filter: var(--surface-backdrop);
+  }
+}
+
 /* Default position (top) when no variant is specified */
 [data-ui="tooltip"]:not([data-variant]) [data-part="content"] {
   bottom: 100%;
@@ -10604,7 +11291,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === recipes/tree-view.css === */
 /* @ui:component tree-view */
-/* @ui:tokens color-bg-muted color-fg color-fg-muted color-fg-subtle color-primary color-primary-subtle color-ring space-px space-1 space-2 space-5 radius-md text-sm font-sans weight-medium duration-fast ease-default */
+/* @ui:tokens color-bg-muted color-fg color-fg-muted color-fg-subtle color-primary color-primary-subtle color-ring space-px space-1 space-2 space-5 radius-md text-sm font-ui weight-medium duration-fast ease-default focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 [data-ui="tree-view"],
 [data-ui="tree-view"] [data-part="group"] {
@@ -10617,7 +11304,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   inline-size: 100%;
   padding: var(--space-1);
   color: var(--color-fg);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
 }
 
@@ -10645,8 +11332,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="tree-view"] [data-part="item"]:focus-visible > [data-part="label"] {
-  outline: var(--space-px) solid var(--color-ring);
-  outline-offset: var(--space-px);
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="tree-view"] [data-part="item"][aria-selected="true"] > [data-part="label"] {
@@ -10685,7 +11372,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/auth-form.css === */
 /* @ui:component auth-form */
-/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-border-strong color-ring color-primary color-primary-hover color-primary-fg color-destructive color-destructive-subtle color-success color-success-subtle radius-lg radius-xl shadow-sm shadow-md space-1 space-2 space-3 space-4 space-5 space-6 space-8 font-sans text-xs text-sm text-base text-lg text-xl text-2xl weight-medium weight-semibold weight-bold leading-tight leading-normal duration-fast duration-normal ease-default */
+/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-border-strong color-ring color-primary color-primary-hover color-primary-fg color-destructive color-destructive-subtle color-success color-success-subtle radius-lg radius-xl shadow-sm shadow-md space-1 space-2 space-3 space-4 space-5 space-6 space-8 font-heading font-body heading-weight heading-tracking heading-transform heading-caps heading-leading text-xs text-sm text-base text-lg text-xl text-2xl weight-medium weight-semibold weight-bold leading-tight leading-normal duration-fast duration-normal ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset link-decoration */
 
 /* ── Root Container ── */
 [data-ui="auth-form"] {
@@ -10693,7 +11380,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   align-items: center;
   justify-content: center;
   width: 100%;
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
 }
 
 /* Mobile-first (task 0.8-09): on a phone the card IS the page — edge to edge,
@@ -10725,9 +11412,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="auth-form"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-xl);
-  font-weight: var(--weight-bold);
-  line-height: var(--leading-tight);
+  font-weight: var(--heading-weight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   color: var(--color-fg);
 }
 
@@ -10744,7 +11435,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   margin: var(--space-4) var(--space-6) 0;
   padding: var(--space-3);
   background: var(--color-destructive-subtle);
-  border: 1px solid var(--color-destructive);
+  border: var(--border-width) solid var(--color-destructive);
   border-radius: var(--radius-lg);
   color: var(--color-destructive);
   font-size: var(--text-sm);
@@ -10822,13 +11513,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="auth-form"] [data-part="footer"] a:hover {
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
   color: var(--color-primary-hover);
 }
 
 [data-ui="auth-form"] [data-part="footer"] a:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
   border-radius: var(--radius-sm, 0.25rem);
 }
 
@@ -10956,8 +11647,8 @@ div[data-ui="separator"][data-style="thick"]::after {
     max-width: var(--auth-form-max-width, 400px);
     border-radius: var(--card-radius, var(--radius-lg));
     box-shadow: var(--card-shadow, var(--shadow-sm));
-    border-inline-start: 1px solid var(--card-border, var(--color-border));
-    border-inline-end: 1px solid var(--card-border, var(--color-border));
+    border-inline-start: var(--border-width) solid var(--card-border, var(--color-border));
+    border-inline-end: var(--border-width) solid var(--card-border, var(--color-border));
   }
 }
 
@@ -10972,7 +11663,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/crud-table.css === */
 /* @ui:component crud-table */
-/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-fg color-destructive color-destructive-fg radius-md radius-lg shadow-sm space-1 space-2 space-3 space-4 space-6 space-8 font-sans text-sm text-base text-lg weight-medium weight-semibold duration-fast duration-normal ease-default */
+/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-fg color-destructive color-destructive-fg radius-md radius-lg shadow-sm space-1 space-2 space-3 space-4 space-6 space-8 font-body text-sm text-base text-lg weight-medium weight-semibold duration-fast duration-normal ease-default border-width */
 
 /* ── Root ── */
 [data-ui="crud-table"] {
@@ -10980,7 +11671,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex-direction: column;
   gap: var(--space-4);
   width: 100%;
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
 }
 
 /* ── Toolbar ── */
@@ -11038,7 +11729,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   background: var(--color-bg-subtle);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
 }
 
@@ -11053,7 +11744,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="crud-table"] [data-part="table-wrapper"] {
   width: 100%;
   overflow-x: auto;
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
 }
@@ -11083,7 +11774,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   padding: var(--space-8) var(--space-4);
   text-align: center;
   min-height: 240px;
-  border: 1px dashed var(--color-border);
+  border: var(--border-width) dashed var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-bg);
 }
@@ -11196,7 +11887,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/dashboard-shell.css === */
 /* @ui:component dashboard-shell */
-/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-primary-fg space-2 space-3 space-4 space-5 space-6 space-8 space-12 space-16 radius-md radius-lg shadow-sm shadow-md font-sans text-xs text-sm text-base text-lg weight-medium weight-semibold leading-tight leading-normal duration-normal duration-slow ease-default ease-out z-sticky */
+/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-border-strong color-primary color-primary-subtle color-primary-fg space-2 space-3 space-4 space-5 space-6 space-8 space-12 space-16 radius-md radius-lg shadow-sm shadow-md font-body font-ui text-xs text-sm text-base text-lg weight-medium weight-semibold leading-tight leading-normal duration-normal duration-slow ease-default ease-out z-sticky border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Shell Grid Layout ──
    Mobile-first (task 0.8-09): the base is the PHONE shell — one column, header
@@ -11221,7 +11912,7 @@ div[data-ui="separator"][data-style="thick"]::after {
     "footer";
   min-height: 100vh;
   background: var(--color-bg);
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
   color: var(--color-fg);
 }
 
@@ -11245,7 +11936,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-2);
   padding: var(--space-4);
   background: var(--color-bg-subtle);
-  border-inline-end: 1px solid var(--color-border);
+  border-inline-end: var(--border-width) solid var(--color-border);
   overflow-y: auto;
   position: fixed;
   top: 0;
@@ -11265,7 +11956,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="dashboard-shell"][data-variant="right"] > [data-part="sidebar"] {
   border-inline-end: none;
-  border-inline-start: 1px solid var(--color-border);
+  border-inline-start: var(--border-width) solid var(--color-border);
   inset-inline-start: auto;
   inset-inline-end: 0;
   transform: translateX(100%);
@@ -11340,7 +12031,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-3);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
-  font-family: var(--font-sans);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: var(--leading-normal);
@@ -11359,8 +12050,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="dashboard-shell"] > [data-part="sidebar"] [data-part="nav-item"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 /* ── Nav Item Active ── */
@@ -11407,7 +12098,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-2);
   padding: 0 var(--space-3);
   background: var(--color-bg);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
@@ -11488,7 +12179,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-4) var(--space-6);
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-width) solid var(--color-border);
   font-size: var(--text-xs);
   color: var(--color-fg-muted);
 }
@@ -11571,7 +12262,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/document.css === */
 /* @ui:component document */
-/* @ui:tokens doc-max-width doc-font doc-font-size doc-line-height doc-heading-font doc-heading-weight doc-heading-size doc-subheading-size doc-legal-size doc-legal-color doc-section-gap doc-component-gap doc-running-header-height doc-running-footer-height doc-running-gap doc-bg doc-fg doc-print-border-color doc-table-header-bg doc-table-header-fg doc-table-header-weight doc-table-border doc-table-cell-pad-y doc-table-cell-pad-x doc-table-font-size doc-table-num-font doc-table-footer-bg doc-table-footer-weight doc-table-stripe-bg page-format page-orientation page-margin page-margin-top page-margin-bottom page-margin-left page-margin-right color-bg color-fg color-fg-muted color-border space-4 space-6 space-8 space-12 shadow-lg radius-md font-serif z-raised */
+/* @ui:tokens doc-max-width doc-font doc-font-size doc-line-height doc-heading-font doc-heading-weight doc-heading-size doc-subheading-size doc-legal-size doc-legal-color doc-section-gap doc-component-gap doc-running-header-height doc-running-footer-height doc-running-gap doc-bg doc-fg doc-print-border-color doc-table-header-bg doc-table-header-fg doc-table-header-weight doc-table-border doc-table-cell-pad-y doc-table-cell-pad-x doc-table-font-size doc-table-num-font doc-table-footer-bg doc-table-footer-weight doc-table-stripe-bg page-format page-orientation page-margin page-margin-top page-margin-bottom page-margin-left page-margin-right color-bg color-fg color-fg-muted color-border space-4 space-6 space-8 space-12 shadow-lg radius-md font-body weight-bold z-raised border-width texture-page */
 
 /* ── Page Rules ── */
 @page {
@@ -11611,14 +12302,17 @@ div[data-ui="separator"][data-style="thick"]::after {
   max-width: var(--doc-max-width);
   margin: var(--space-4) auto;
   padding: var(--space-6) var(--space-4);
-  background: var(--color-bg, #fff);
+  background-color: var(--color-bg, #fff);
+  background-image: var(--texture-page);
   color: var(--color-fg);
-  font-family: var(--doc-font, var(--font-sans, system-ui, sans-serif));
+  font-family: var(--doc-font, var(--font-body));
   font-size: var(--doc-font-size);
   line-height: var(--doc-line-height);
-  box-shadow: var(--shadow-lg,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1));
+  /* The fallback here used to spell out two rgba() layers, which is a shadow
+     colour no theme could reach. --shadow-lg is always defined by the token
+     layer, and it now carries --shadow-color, so the fallback is gone rather
+     than re-tokenised. */
+  box-shadow: var(--shadow-lg);
   border-radius: 0;
   position: relative;
 }
@@ -11634,7 +12328,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="document"] > [data-part="header"] {
   margin-block-end: var(--doc-section-gap);
   padding-block-end: var(--doc-component-gap);
-  border-block-end: 1px solid var(--color-border);
+  border-block-end: var(--border-width) solid var(--color-border);
 }
 
 /* ── Body ── */
@@ -11644,13 +12338,25 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--doc-section-gap);
 }
 
+/* ── Headings ──
+   The document's own heading face and weight (1.1A-21): a print theme sets
+   --doc-heading-font / --doc-heading-weight to give its titles a voice apart
+   from the body copy (document-serif's Times titles over Georgia text). Both
+   default to the page's heading role in tokens/document.css, and each falls
+   back to what a heading rendered before the tokens had a reader. A heading
+   that carries its own data-weight keeps it — that is the author asking. */
+[data-ui="document"] :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--doc-heading-font, var(--font-body));
+  font-weight: var(--doc-heading-weight, var(--weight-bold));
+}
+
 /* ── Running footer ──
    footer remains a non-breaking selector alias for pre-1.1.0 documents. */
 [data-ui="document"] > [data-part="doc-footer"],
 [data-ui="document"] > [data-part="footer"] {
   margin-block-start: var(--doc-section-gap);
   padding-block-start: var(--doc-component-gap);
-  border-block-start: 1px solid var(--color-border);
+  border-block-start: var(--border-width) solid var(--color-border);
   font-size: var(--doc-legal-size);
   color: var(--doc-legal-color);
 }
@@ -11688,7 +12394,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Variant: Report ── */
 [data-ui="document"][data-variant="report"] {
-  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
+  /* A report is serif-set by definition. It re-points the document's own font
+     ROLE rather than its `font-family`, so every doc primitive nested inside it
+     (key-value, callout, signature — all of which read --doc-font) follows the
+     report into serif instead of staying sans inside a serif page. `report` is
+     the author asking for serif; a theme that wants its own document face
+     declares --doc-font at :root, which this variant deliberately outranks. */
+  --doc-font: Georgia, 'Times New Roman', serif;
   line-height: 1.6;
 }
 
@@ -11783,7 +12495,7 @@ div[data-ui="separator"][data-style="thick"]::after {
     z-index: var(--z-raised);
     margin-block-end: 0;
     padding-block-end: var(--doc-running-gap);
-    border-block-end: 1px solid var(--doc-print-border-color);
+    border-block-end: var(--border-width) solid var(--doc-print-border-color);
     background: var(--doc-bg);
     transform: translateZ(0);
   }
@@ -11799,7 +12511,7 @@ div[data-ui="separator"][data-style="thick"]::after {
     z-index: var(--z-raised);
     margin-block-start: 0;
     padding-block-start: var(--doc-running-gap);
-    border-block-start: 1px solid var(--doc-print-border-color);
+    border-block-start: var(--border-width) solid var(--doc-print-border-color);
     background: var(--doc-bg);
     transform: translateZ(0);
   }
@@ -11828,7 +12540,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/empty-state.css === */
 /* @ui:component empty-state */
-/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-primary radius-lg shadow-sm space-2 space-3 space-4 space-6 space-8 space-10 font-sans text-sm text-base text-lg text-xl text-2xl weight-semibold leading-tight leading-normal duration-normal ease-default */
+/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-primary radius-lg shadow-sm space-2 space-3 space-4 space-6 space-8 space-10 font-heading font-body heading-tracking heading-transform heading-caps heading-leading text-sm text-base text-lg text-xl text-2xl weight-semibold leading-tight leading-normal duration-normal ease-default */
 
 /* ── Root ── */
 [data-ui="empty-state"] {
@@ -11839,7 +12551,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   text-align: center;
   padding: var(--space-8) var(--space-6);
   gap: var(--space-3);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
 }
 
 /* ── Icon ── */
@@ -11862,10 +12574,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Title ── */
 [data-ui="empty-state"] [data-part="title"] {
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-heading);
   font-size: var(--text-lg);
   font-weight: var(--weight-semibold);
-  line-height: var(--leading-tight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   color: var(--color-fg);
   margin: 0;
 }
@@ -11963,7 +12678,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/feature-grid.css === */
 /* @ui:component feature-grid */
-/* @ui:tokens color-bg color-fg color-fg-muted color-primary color-primary-subtle space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-16 text-base text-lg text-xl text-3xl font-sans weight-semibold weight-bold leading-tight leading-normal leading-relaxed radius-md radius-lg */
+/* @ui:tokens color-bg color-fg color-fg-muted color-primary color-primary-subtle space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-16 text-base text-lg text-xl text-3xl font-body weight-semibold weight-bold leading-tight leading-normal leading-relaxed radius-md radius-lg */
 
 /* ── Root ──
    Mobile-first (task 0.8-09): everything outside the two `@media` blocks at the
@@ -11973,7 +12688,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-4);
   padding-block: var(--space-12);
   padding-inline: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
   background: var(--color-bg);
 }
@@ -12115,7 +12830,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   max-inline-size: var(--measure-narrow);
   margin-inline: auto;
   padding-block: var(--space-8);
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
 }
 
 :where(form[l-data]:not([data-ui]) > h1) {
@@ -12135,7 +12850,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/hero.css === */
 /* @ui:component hero */
-/* @ui:tokens color-bg color-fg color-fg-muted space-3 space-4 space-6 space-8 space-12 space-16 space-20 text-sm text-base text-lg text-xl text-3xl text-4xl font-sans weight-bold weight-normal leading-tight leading-relaxed radius-lg */
+/* @ui:tokens color-bg color-fg color-fg-muted space-3 space-4 space-6 space-8 space-12 space-16 space-20 text-sm text-base text-lg text-xl text-3xl text-4xl font-heading font-body heading-weight heading-tracking heading-transform heading-caps heading-leading weight-bold weight-normal leading-tight leading-relaxed radius-lg texture-surface */
 
 /* ── Root ──
    A one-column grid by default; the layout variants only change how that grid
@@ -12149,9 +12864,10 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-4);
   padding-block: var(--space-12);
   padding-inline: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
-  background: var(--color-bg);
+  background-color: var(--color-bg);
+  background-image: var(--texture-surface);
 }
 
 /* ── Eyebrow ── */
@@ -12163,9 +12879,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Headline ── */
 [data-ui="hero"] [data-part="headline"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-3xl);
-  font-weight: var(--weight-bold);
-  line-height: var(--leading-tight);
+  font-weight: var(--heading-weight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   color: var(--color-fg);
   text-wrap: balance;
 }
@@ -12284,7 +13004,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/inbox.css === */
 /* @ui:component inbox */
-/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-destructive color-primary color-primary-subtle color-ring space-1 space-2 space-3 space-4 space-6 space-px font-sans text-xs text-sm text-base text-xl weight-medium weight-semibold leading-tight leading-normal leading-relaxed radius-md radius-lg */
+/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-destructive color-primary color-primary-subtle color-ring space-1 space-2 space-3 space-4 space-6 space-px font-body text-xs text-sm text-base text-xl weight-medium weight-semibold leading-tight leading-normal leading-relaxed radius-md radius-lg focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ──
    ONE pane, because that is what a phone has room for. Each pane's `data-state`
@@ -12304,7 +13024,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   overflow: hidden;
   border: var(--space-px, 1px) solid var(--color-border);
   border-radius: var(--radius-lg);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
   background: var(--color-bg);
 }
@@ -12396,8 +13116,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 }
 
 [data-ui="inbox"] [data-part="item"]:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 [data-ui="inbox"] [data-part="item"][data-state="selected"] {
@@ -12556,7 +13276,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/pricing.css === */
 /* @ui:component pricing */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle color-primary-fg space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-16 text-sm text-base text-lg text-3xl font-sans weight-semibold weight-bold leading-tight leading-normal leading-relaxed radius-lg shadow-md */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border color-primary color-primary-subtle color-primary-fg space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-16 text-sm text-base text-lg text-3xl font-heading font-body heading-tracking heading-transform heading-caps heading-leading weight-semibold weight-bold leading-tight leading-normal leading-relaxed radius-lg shadow-md border-width-strong */
 
 /* ── Root ──
    Mobile-first (task 0.8-09): everything outside the two `@media` blocks at the
@@ -12566,7 +13286,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-4);
   padding-block: var(--space-12);
   padding-inline: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
   background: var(--color-bg);
 }
@@ -12616,9 +13336,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="pricing"] [data-part="tier"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg);
   font-weight: var(--weight-semibold);
-  line-height: var(--leading-tight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
 }
 
 [data-ui="pricing"] [data-part="tier"] [data-part="header"] [data-part="description"] {
@@ -12679,7 +13403,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 [data-ui="pricing"] [data-part="tier"][data-state="featured"] {
   border-color: var(--color-primary);
   box-shadow: var(--shadow-md);
-  outline: var(--space-px, 1px) solid var(--color-primary);
+  outline: var(--border-width-strong) solid var(--color-primary);
 }
 
 /* ── Footnote ── */
@@ -12724,14 +13448,14 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/search-results.css === */
 /* @ui:component search-results */
-/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-fg radius-md radius-lg shadow-sm space-1 space-2 space-3 space-4 space-6 space-8 font-sans text-xs text-sm text-base text-lg weight-medium weight-semibold leading-tight leading-normal duration-fast duration-normal ease-default */
+/* @ui:tokens color-bg color-bg-subtle color-bg-muted color-fg color-fg-muted color-border color-primary color-primary-fg radius-md radius-lg shadow-sm space-1 space-2 space-3 space-4 space-6 space-8 font-body text-xs text-sm text-base text-lg weight-medium weight-semibold leading-tight leading-normal duration-fast duration-normal ease-default border-width focus-ring-width focus-ring-style focus-ring-color focus-ring-offset */
 
 /* ── Root ── */
 [data-ui="search-results"] {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
 }
 
 /* ── Search Input ── */
@@ -12759,7 +13483,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   justify-content: space-between;
   gap: var(--space-4);
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
 [data-ui="search-results"] [data-part="results-count"] {
@@ -12794,7 +13518,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex-direction: column;
   gap: var(--space-2);
   padding: var(--space-4);
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-bg);
   transition: background var(--duration-fast) var(--ease-default),
@@ -12853,7 +13577,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   display: flex;
   justify-content: center;
   padding-top: var(--space-4);
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-width) solid var(--color-border);
 }
 
 /* ── Loading ── */
@@ -12893,7 +13617,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Error State ── */
 [data-ui="search-results"][data-state="error"] [data-part="results-list"] {
-  border: 1px solid var(--color-border);
+  border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-6);
   text-align: center;
@@ -12902,8 +13626,8 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Focus management ── */
 [data-ui="search-results"] [data-part="result-item"]:focus-visible {
-  outline: 2px solid var(--color-ring, oklch(0.55 0.22 264));
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ── Motion ── */
@@ -12919,7 +13643,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/settings-page.css === */
 /* @ui:component settings-page */
-/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-primary color-primary-fg space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-48 radius-md radius-lg shadow-sm shadow-md font-sans text-sm text-base text-lg text-xl weight-medium weight-semibold leading-tight leading-normal duration-fast duration-normal ease-default z-sticky */
+/* @ui:tokens color-bg color-bg-subtle color-fg color-fg-muted color-border color-primary color-primary-fg space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 space-48 radius-md radius-lg shadow-sm shadow-md font-heading font-body heading-tracking heading-transform heading-caps heading-leading text-sm text-base text-lg text-xl weight-medium weight-semibold leading-tight leading-normal duration-fast duration-normal ease-default z-sticky border-width border-width-strong */
 
 /* ── Root ── */
 [data-ui="settings-page"] {
@@ -12929,7 +13653,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   width: 100%;
   max-width: 768px;
   margin-inline: auto;
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
 }
 
@@ -12943,9 +13667,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 /* ── Title ── */
 [data-ui="settings-page"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-xl, 1.25rem);
   font-weight: var(--weight-semibold, 600);
-  line-height: var(--leading-tight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
   color: var(--color-fg);
 }
 
@@ -13009,7 +13737,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-3, 0.75rem);
   padding: var(--space-4);
   background: var(--color-bg);
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   position: sticky;
@@ -13073,7 +13801,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   flex-direction: row;
   flex-wrap: wrap;
   border-inline-end: none;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-width) solid var(--color-border);
   padding-inline-end: 0;
   position: static;
 }
@@ -13092,7 +13820,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   [data-ui="settings-page"][data-variant="horizontal"] [data-ui="tabs"] [data-part="list"] {
     flex-direction: column;
     border-bottom: none;
-    border-inline-end: 1px solid var(--color-border);
+    border-inline-end: var(--border-width) solid var(--color-border);
     padding-inline-end: var(--space-4);
     position: sticky;
     top: var(--space-4);
@@ -13110,7 +13838,7 @@ div[data-ui="separator"][data-style="thick"]::after {
     justify-content: flex-start;
     text-align: start;
     border-bottom: none;
-    border-inline-start: 2px solid transparent;
+    border-inline-start: var(--border-width-strong) solid transparent;
     margin-bottom: 0;
     margin-inline-end: -1px;
     padding: var(--space-2) var(--space-3);
@@ -13144,7 +13872,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/site-footer.css === */
 /* @ui:component site-footer */
-/* @ui:tokens color-bg-subtle color-fg color-fg-muted color-border space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 text-sm text-base text-lg font-sans weight-semibold weight-bold leading-normal */
+/* @ui:tokens color-bg-subtle color-fg color-fg-muted color-border space-1 space-2 space-3 space-4 space-6 space-8 space-10 space-12 text-sm text-base text-lg font-body weight-semibold weight-bold leading-normal border-width */
 
 /* ── Root ──
    Mobile-first (task 0.8-09): everything outside the two `@media` blocks at the
@@ -13154,11 +13882,11 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-8);
   padding-block: var(--space-10);
   padding-inline: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   font-size: var(--text-sm);
   color: var(--color-fg-muted);
   background: var(--color-bg-subtle);
-  border-block-start: 1px solid var(--color-border);
+  border-block-start: var(--border-width) solid var(--color-border);
 }
 
 /* ── Brand ── */
@@ -13290,7 +14018,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* === patterns/stats-dashboard.css === */
 /* @ui:component stats-dashboard */
-/* @ui:tokens color-bg color-fg color-fg-muted color-border space-1 space-2 space-3 space-4 space-6 space-8 space-12 space-px font-sans text-sm text-base text-lg text-3xl weight-semibold weight-bold leading-tight leading-normal leading-relaxed */
+/* @ui:tokens color-bg color-fg color-fg-muted color-border space-1 space-2 space-3 space-4 space-6 space-8 space-12 space-px font-heading font-body heading-tracking heading-transform heading-caps heading-leading text-sm text-base text-lg text-3xl weight-semibold weight-bold leading-tight leading-normal leading-relaxed */
 
 /* ── Root ──
    A reporting page: title block, KPI row, then the panel region. The KPI row
@@ -13303,7 +14031,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-3);
   padding-block: var(--space-8);
   padding-inline: var(--space-4);
-  font-family: var(--font-sans, system-ui, sans-serif);
+  font-family: var(--font-body);
   color: var(--color-fg);
   background: var(--color-bg);
 }
@@ -13377,9 +14105,13 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 [data-ui="stats-dashboard"] [data-part="report"] [data-part="title"] {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: var(--text-lg);
   font-weight: var(--weight-semibold);
-  line-height: var(--leading-tight);
+  letter-spacing: var(--heading-tracking);
+  text-transform: var(--heading-transform);
+  font-variant-caps: var(--heading-caps);
+  line-height: var(--heading-leading);
 }
 
 [data-ui="stats-dashboard"] [data-part="report"] [data-part="header"] [data-part="description"] {
@@ -13470,7 +14202,7 @@ div[data-ui="separator"][data-style="thick"]::after {
   gap: var(--space-6);
   max-inline-size: var(--measure-narrow);
   margin-inline: auto;
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
 }
 
 [data-ui="wizard"] [data-part="heading"] {