@faqir-ui/core 1.0.0 → 1.1.0

package/dist/faqir.default.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,119 +978,175 @@
   --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/default.css === */
-/* @ui:theme default — light + dark mode overrides */
-
-/* ── Light Mode ── */
-/* Light mode otherwise inherits the semantic-token defaults from semantic.css.
-   These overrides raise the handful of default-theme tokens that fell below the
-   WCAG 2 AA 4.5:1 text threshold (task 0.4-24 · §12.3), each verified by the axe
-   gate (tests/a11y). Darkening is contrast-safe: every *solid* use of these
-   semantic colours (button, progress, stepper marker) carries light text or no
-   text, so a deeper tone only raises its contrast. */
+/* @ui:theme default — one :root block, both schemes, via light-dark() */
+
+/* Authored in the ONE-BLOCK form [1.1A-06]: each scheme-dependent token states
+   `light-dark(<light>, <dark>)` once instead of being written in `:root`, again
+   in `[data-theme="dark"]` and a third time in the `prefers-color-scheme`
+   mirror. `base/reset.css` turns `data-theme` into the `color-scheme` the
+   function reads, so the two authoring forms are interchangeable and every
+   existing `data-theme` value keeps driving exactly what it drove before.
+
+   The light argument is the value this theme would otherwise have INHERITED
+   from tokens/semantic.css; spelling it out is the price of the single block,
+   because a token cannot read its own base value (`light-dark(var(--color-bg),
+   …)` on `--color-bg` is a cycle). `tests/themes/light-dark.test.ts` is what
+   keeps the copy honest: every light argument must equal the base value unless
+   it is one of the four deliberate AA corrections below (task 0.4-24 · §12.3),
+   and that list fails in both directions.
+
+   Darkening for AA is contrast-safe: every *solid* use of these semantic colours
+   (button, progress, stepper marker) carries light text or no text, so a deeper
+   tone only raises its contrast.
+
+   The shadow ramp is the one family still authored as blocks — see below. */
 :root {
+  /* ── Surfaces ── */
+  --color-bg:               light-dark(var(--palette-gray-25), var(--palette-gray-950));
+  --color-bg-subtle:        light-dark(var(--palette-gray-100), var(--palette-gray-900));
+  --color-bg-muted:         light-dark(var(--palette-gray-200), var(--palette-gray-800));
+  /* Scheme-independent by construction: the elevation ramp is defined in terms
+     of tokens that already carry both schemes, so it needs no second spelling. */
   --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-muted:  var(--palette-gray-600); /* AA: gray-500 was 4.31:1 on muted surfaces (avatar/tabs) */
-  --color-fg-subtle: var(--palette-gray-500); /* AA: gray-400 was 2.61:1 (subtle text, footers, page-break) */
-  --color-success:   var(--palette-green-700); /* AA: green-500 as soft-badge/stat/stepper text was 3.19:1 */
-  --color-warning:   var(--palette-amber-800); /* AA: amber-500 as soft-badge text was 2.02:1 */
-}
+  --color-fg:               light-dark(var(--palette-gray-950), var(--palette-gray-50));
+  /* AA: light gray-500 was 4.31:1 on muted surfaces (avatar/tabs); in dark,
+     gray-400 is kept for subtle, so muted moves up. */
+  --color-fg-muted:         light-dark(var(--palette-gray-600), var(--palette-gray-300));
+  /* AA: light gray-400 was 2.61:1 (subtle text, footers, page-break);
+     dark gray-500 subtle text was 4.11:1 on bg. */
+  --color-fg-subtle:        light-dark(var(--palette-gray-500), var(--palette-gray-400));
 
-/* ── Dark Mode ── */
-[data-theme="dark"] {
-  --color-bg:              var(--palette-gray-950);
-  --color-bg-subtle:       var(--palette-gray-900);
-  --color-bg-muted:        var(--palette-gray-800);
-  --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:              var(--palette-gray-50);
-  --color-fg-muted:        var(--palette-gray-300); /* AA: gray-400 kept subtle above 4.5:1, so muted moves up */
-  --color-fg-subtle:       var(--palette-gray-400); /* AA: gray-500 subtle text was 4.11:1 on bg */
-
-  --color-primary:         var(--palette-indigo-400);
-  --color-primary-hover:   var(--palette-indigo-300);
-  --color-primary-active:  var(--palette-indigo-200);
-  --color-primary-fg:      var(--palette-gray-950); /* AA: dark ink on the luminous dark-mode accent — white was 3.4:1 [0.4-16] */
-  --color-primary-subtle:  oklch(0.24 0.06 264);
-
-  --color-secondary:       var(--palette-gray-800);
-  --color-secondary-hover: var(--palette-gray-700);
-  --color-secondary-fg:    var(--palette-gray-100);
-
-  --color-destructive:        var(--palette-red-400); /* AA: luminous red so it reads as text on subtle/dark bg (badge/chip/field/stat); red-500 was 3.42:1 [0.4-24] */
-  --color-destructive-hover:  var(--palette-red-300);
-  --color-destructive-fg:     var(--palette-gray-950); /* AA: dark ink on the luminous red for solid surfaces (button) — mirrors --color-primary-fg [0.4-24] */
-  --color-destructive-subtle: oklch(0.24 0.06 25);
-
-  --color-success:         var(--palette-green-400);
-  --color-success-subtle:  oklch(0.24 0.054 155);
-  --color-warning:         var(--palette-amber-400);
-  --color-warning-subtle:  oklch(0.24 0.045 75);
-  --color-info:            var(--palette-blue-400);
-  --color-info-subtle:     oklch(0.24 0.054 240);
-
-  --color-border:          var(--palette-gray-800);
-  --color-border-strong:   var(--palette-gray-700);
-  --color-ring:            oklch(0.65 0.20 264);
+  /* ── Interactive: Primary ── */
+  --color-primary:          light-dark(var(--palette-indigo-500), var(--palette-indigo-400));
+  --color-primary-hover:    light-dark(var(--palette-indigo-600), var(--palette-indigo-300));
+  --color-primary-active:   light-dark(var(--palette-indigo-700), var(--palette-indigo-200));
+  /* AA: dark ink on the luminous dark-mode accent — white was 3.4:1 [0.4-16] */
+  --color-primary-fg:       light-dark(white, var(--palette-gray-950));
+  --color-primary-subtle:   light-dark(var(--palette-indigo-50), oklch(0.24 0.06 264));
+
+  /* ── Interactive: Secondary ── */
+  --color-secondary:        light-dark(var(--palette-gray-100), var(--palette-gray-800));
+  --color-secondary-hover:  light-dark(var(--palette-gray-200), var(--palette-gray-700));
+  --color-secondary-fg:     light-dark(var(--palette-gray-900), var(--palette-gray-100));
+
+  /* ── Interactive: Destructive ── */
+  /* AA: a luminous dark red so it reads as text on subtle/dark bg
+     (badge/chip/field/stat); red-500 was 3.42:1 [0.4-24] */
+  --color-destructive:        light-dark(var(--palette-red-500), var(--palette-red-400));
+  --color-destructive-hover:  light-dark(var(--palette-red-600), var(--palette-red-300));
+  /* AA: dark ink on the luminous red for solid surfaces (button) — mirrors
+     --color-primary-fg [0.4-24] */
+  --color-destructive-fg:     light-dark(white, var(--palette-gray-950));
+  --color-destructive-subtle: light-dark(var(--palette-red-50), oklch(0.24 0.06 25));
+
+  /* ── Feedback ── */
+  /* AA: light green-500 as soft-badge/stat/stepper text was 3.19:1 */
+  --color-success:          light-dark(var(--palette-green-700), var(--palette-green-400));
+  --color-success-subtle:   light-dark(var(--palette-green-50), oklch(0.24 0.054 155));
+  /* AA: light amber-500 as soft-badge text was 2.02:1 */
+  --color-warning:          light-dark(var(--palette-amber-800), var(--palette-amber-400));
+  --color-warning-subtle:   light-dark(var(--palette-amber-50), oklch(0.24 0.045 75));
+  --color-info:             light-dark(var(--palette-blue-500), var(--palette-blue-400));
+  --color-info-subtle:      light-dark(var(--palette-blue-50), oklch(0.24 0.054 240));
 
+  /* ── Borders ── */
+  --color-border:           light-dark(var(--palette-gray-200), var(--palette-gray-800));
+  --color-border-strong:    light-dark(var(--palette-gray-300), var(--palette-gray-700));
+  --color-ring:             light-dark(oklch(0.55 0.22 264), oklch(0.65 0.20 264));
+}
+
+/* ── Dark Mode: the shadow ramp ── */
+/* The one family `light-dark()` cannot collapse. It is a <color> function and a
+   shadow list is not a colour, so the whole value cannot be wrapped; and the
+   per-layer spelling would have to pad the dark ramp with alpha-0 layers to give
+   both schemes one geometry — writing a shadow where this theme says `none`,
+   and restating the base light ramp (two layers per step) to do it.
+   Light stays inherited from tokens/effects.css; only dark is stated.
+
+   Each step is cast in `--shadow-color` (1.1A-04 — bare OKLCH channels, so the
+   step keeps its own alpha), which for this theme is the base layer's own
+   `0 0 0`. That is the ONLY thing `default` adopts from the 1.1 families, and
+   deliberately so: `default` is not a theme that resembles the token layer, it
+   IS the token layer's own look, so restating a base value here would fork the
+   two and let a later change to `tokens/*` silently stop reaching the reference
+   theme. Every other axis `default` carries is derived from the base layer,
+   which is what `tests/themes/axes.test.ts` holds equal to
+   `THEME_SEED_DEFAULTS`. Casting the ramp through the channel is not a restated
+   value — it is the ten literal blacks this theme used to hide from a theme
+   that wants to tint them. [1.1A-15] */
+[data-theme="dark"] {
   --shadow-xs:  none;
-  --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-md:  0 4px 6px oklch(0 0 0 / 0.3);
-  --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.4);
-  --shadow-xl:  0 20px 25px oklch(0 0 0 / 0.5);
+  --shadow-sm:  0 1px 3px oklch(var(--shadow-color) / 0.3);
+  --shadow-md:  0 4px 6px oklch(var(--shadow-color) / 0.3);
+  --shadow-lg:  0 10px 15px oklch(var(--shadow-color) / 0.4);
+  --shadow-xl:  0 20px 25px oklch(var(--shadow-color) / 0.5);
 }
 
-/* ── Auto Dark Mode (system preference) ── */
-/* Mirror of the [data-theme="dark"] block above — keep the two in sync. */
+/* Mirror of the [data-theme="dark"] block above — keep the two in sync. The
+   colours need no mirror: `[data-theme="auto"]` is `color-scheme: light dark`,
+   so light-dark() already follows the system preference. */
 @media (prefers-color-scheme: dark) {
   [data-theme="auto"] {
-    --color-bg:              var(--palette-gray-950);
-    --color-bg-subtle:       var(--palette-gray-900);
-    --color-bg-muted:        var(--palette-gray-800);
-    --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:              var(--palette-gray-50);
-    --color-fg-muted:        var(--palette-gray-300); /* AA — see [data-theme="dark"] */
-    --color-fg-subtle:       var(--palette-gray-400); /* AA — see [data-theme="dark"] */
-
-    --color-primary:         var(--palette-indigo-400);
-    --color-primary-hover:   var(--palette-indigo-300);
-    --color-primary-active:  var(--palette-indigo-200);
-    --color-primary-fg:      var(--palette-gray-950); /* AA: dark ink on the luminous dark-mode accent — white was 3.4:1 [0.4-16] */
-    --color-primary-subtle:  oklch(0.24 0.06 264);
-
-    --color-secondary:       var(--palette-gray-800);
-    --color-secondary-hover: var(--palette-gray-700);
-    --color-secondary-fg:    var(--palette-gray-100);
-
-    --color-destructive:        var(--palette-red-400); /* AA — see [data-theme="dark"] [0.4-24] */
-    --color-destructive-hover:  var(--palette-red-300);
-    --color-destructive-fg:     var(--palette-gray-950); /* AA — see [data-theme="dark"] [0.4-24] */
-    --color-destructive-subtle: oklch(0.24 0.06 25);
-
-    --color-success:         var(--palette-green-400);
-    --color-success-subtle:  oklch(0.24 0.054 155);
-    --color-warning:         var(--palette-amber-400);
-    --color-warning-subtle:  oklch(0.24 0.045 75);
-    --color-info:            var(--palette-blue-400);
-    --color-info-subtle:     oklch(0.24 0.054 240);
-
-    --color-border:          var(--palette-gray-800);
-    --color-border-strong:   var(--palette-gray-700);
-    --color-ring:            oklch(0.65 0.20 264);
-
     --shadow-xs:  none;
-    --shadow-sm:  0 1px 3px oklch(0 0 0 / 0.3);
-    --shadow-md:  0 4px 6px oklch(0 0 0 / 0.3);
-    --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.4);
-    --shadow-xl:  0 20px 25px oklch(0 0 0 / 0.5);
+    --shadow-sm:  0 1px 3px oklch(var(--shadow-color) / 0.3);
+    --shadow-md:  0 4px 6px oklch(var(--shadow-color) / 0.3);
+    --shadow-lg:  0 10px 15px oklch(var(--shadow-color) / 0.4);
+    --shadow-xl:  0 20px 25px oklch(var(--shadow-color) / 0.5);
   }
 }
 
@@ -771,11 +1164,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);
@@ -786,6 +1206,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,
@@ -855,10 +1280,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 */
@@ -887,7 +1334,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);
@@ -895,29 +1342,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);
 }
@@ -928,8 +1391,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 {
@@ -966,7 +1429,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);
@@ -988,9 +1451,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);
 }
 
@@ -1009,12 +1478,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 */
@@ -1199,7 +1668,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"] {
@@ -1229,7 +1698,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;
@@ -1254,7 +1723,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"] {
@@ -1264,9 +1733,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;
@@ -1312,11 +1782,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);
 }
@@ -1342,12 +1812,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) ── */
@@ -1387,7 +1858,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"] {
@@ -1397,18 +1868,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;
@@ -1417,11 +1891,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 ── */
@@ -1477,7 +1956,7 @@ table {
   padding: 0;
 }
 [data-ui="button"][data-variant="link"]:hover {
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
 }
 
 /* ── Sizes ── */
@@ -1496,7 +1975,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;
 }
@@ -1511,7 +1990,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;
@@ -1558,7 +2037,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"] {
@@ -1567,7 +2046,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);
 }
@@ -1598,6 +2077,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));
 }
@@ -1624,8 +2104,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;
 }
 
@@ -1711,17 +2192,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 ── */
@@ -1730,7 +2230,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;
 }
@@ -1745,7 +2245,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);
@@ -1786,9 +2286,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"] {
@@ -1800,7 +2310,7 @@ table {
 
 [data-ui="checkbox-label"]:has([data-ui="checkbox"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -1812,8 +2322,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),
@@ -1826,8 +2336,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 -- */
@@ -1918,7 +2429,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,
@@ -1942,7 +2453,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"] {
@@ -1950,11 +2461,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;
@@ -1990,8 +2501,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 ── */
@@ -2214,12 +2728,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);
 }
 
@@ -2249,8 +2763,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 */
@@ -2259,8 +2774,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);
 }
@@ -2279,7 +2794,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 ── */
@@ -2412,13 +2927,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 ── */
@@ -2474,7 +2989,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,
@@ -2486,7 +3001,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 ── */
@@ -2524,7 +3039,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"] {
@@ -2545,6 +3060,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);
@@ -2592,7 +3108,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 →
@@ -2604,7 +3120,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 ── */
@@ -2674,7 +3190,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 ──
@@ -2684,7 +3200,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 ──
@@ -2703,8 +3219,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 ── */
@@ -3009,7 +3525,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"] {
@@ -3033,7 +3549,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;
@@ -3130,7 +3646,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"] {
@@ -3138,11 +3654,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),
@@ -3158,8 +3681,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;
 }
 
@@ -3187,7 +3713,7 @@ table {
 }
 
 [data-ui="input"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -3250,7 +3776,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"] {
@@ -3260,8 +3786,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);
@@ -3274,7 +3800,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"] {
@@ -3283,7 +3809,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 ── */
@@ -3413,12 +3939,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);
@@ -3451,21 +3977,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;
 }
@@ -3479,8 +4005,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 ── */
@@ -3504,7 +4031,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"] {
@@ -3554,14 +4081,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;
 }
 
@@ -3617,7 +4144,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"] {
@@ -3632,12 +4159,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;
@@ -3679,7 +4206,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"] {
@@ -3754,7 +4281,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"],
@@ -3768,7 +4295,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"] {
@@ -3790,7 +4317,7 @@ table {
 
 [data-ui="radio-label"]:has([data-ui="radio"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -3802,7 +4329,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;
@@ -3816,8 +4343,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 -- */
@@ -3870,7 +4398,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 {
@@ -3890,7 +4418,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"] {
@@ -3899,11 +4427,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;
@@ -3933,8 +4467,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;
 }
 
@@ -3967,7 +4504,7 @@ table {
 }
 
 [data-ui="select"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -3980,12 +4517,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%;
 }
@@ -3993,7 +4530,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;
@@ -4011,11 +4548,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;
@@ -4053,17 +4590,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 ── */
@@ -4081,20 +4618,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;
 }
 
@@ -4197,14 +4734,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;
@@ -4220,13 +4757,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 ── */
@@ -4808,14 +5345,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 ── */
@@ -4829,6 +5366,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);
@@ -4887,10 +5425,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 ── */
@@ -4902,7 +5440,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"] {
@@ -4912,7 +5450,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"] {
@@ -4991,7 +5529,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);
@@ -5059,18 +5597,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;
 }
@@ -5080,11 +5620,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);
@@ -5140,7 +5691,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"] {
@@ -5152,7 +5703,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) -- */
@@ -5180,8 +5731,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;
@@ -5191,8 +5742,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) -- */
@@ -5201,7 +5753,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);
@@ -5213,7 +5765,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);
@@ -5295,7 +5847,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;
   }
 
@@ -5452,25 +6004,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"] {
@@ -5494,7 +6052,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);
 }
 
@@ -5572,7 +6130,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"] {
@@ -5580,11 +6138,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;
@@ -5601,8 +6165,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;
 }
 
@@ -5630,7 +6197,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;
 }
@@ -5644,7 +6211,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"] {
@@ -5653,11 +6220,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;
@@ -5674,8 +6241,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 ── */
@@ -5692,7 +6260,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="toggle"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -5716,7 +6284,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;
@@ -5735,7 +6303,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);
@@ -5793,7 +6361,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"] {
@@ -5802,7 +6370,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 {
@@ -5819,7 +6387,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;
@@ -5833,8 +6401,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);
 }
 
@@ -5866,13 +6434,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 {
@@ -5889,7 +6457,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"] {
@@ -5925,7 +6493,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;
@@ -5971,6 +6539,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);
@@ -6010,7 +6579,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;
@@ -6037,7 +6606,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;
@@ -6057,7 +6626,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"] {
@@ -6090,7 +6659,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);
@@ -6106,13 +6675,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;
 }
 
@@ -6147,11 +6718,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),
@@ -6164,8 +6735,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 ── */
@@ -6200,7 +6771,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;
 }
@@ -6264,7 +6835,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
@@ -6278,7 +6849,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 ── */
@@ -6304,8 +6875,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 ── */
@@ -6313,7 +6884,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);
@@ -6342,7 +6913,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);
@@ -6361,14 +6932,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;
 }
 
@@ -6377,7 +6949,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;
@@ -6413,7 +6985,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"] {
@@ -6427,11 +6999,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;
@@ -6444,8 +7016,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 ── */
@@ -6457,7 +7029,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);
@@ -6542,7 +7114,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"] {
@@ -6575,7 +7147,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;
@@ -6607,7 +7179,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 ── */
@@ -6617,7 +7189,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;
 }
@@ -6701,7 +7273,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);
@@ -6730,7 +7302,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;
@@ -6743,12 +7315,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"] {
@@ -6780,7 +7352,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;
@@ -6804,15 +7376,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"] {
@@ -6831,7 +7403,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 ── */
@@ -6852,11 +7424,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;
@@ -6868,8 +7440,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);
 }
 
@@ -6892,7 +7464,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);
@@ -6931,7 +7503,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"] {
@@ -6966,15 +7538,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);
@@ -7023,6 +7603,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);
@@ -7057,8 +7638,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 ── */
@@ -7094,7 +7675,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"] {
@@ -7129,17 +7710,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%);
 }
@@ -7147,7 +7735,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%);
 }
@@ -7201,6 +7789,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);
@@ -7235,8 +7824,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 ── */
@@ -7255,7 +7844,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;
 }
 
@@ -7269,7 +7858,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"] {
@@ -7283,11 +7872,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;
@@ -7301,8 +7890,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 ── */
@@ -7314,9 +7903,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);
@@ -7324,6 +7913,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);
@@ -7346,7 +7942,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;
@@ -7368,12 +7964,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;
 }
@@ -7426,14 +8022,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"] {
@@ -7468,14 +8064,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"] {
@@ -7549,8 +8145,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"] {
@@ -7572,7 +8168,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"],
@@ -7588,7 +8184,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"] {
@@ -7603,7 +8199,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 ──
@@ -7648,14 +8244,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);
 }
 
@@ -7667,7 +8263,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 */
@@ -7715,7 +8311,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"] {
@@ -7739,7 +8335,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;
@@ -7757,7 +8353,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"] {
@@ -7799,7 +8395,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"] {
@@ -7834,7 +8430,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"] {
@@ -7866,7 +8465,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"] {
@@ -7902,11 +8501,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;
@@ -7927,8 +8526,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 ── */
@@ -7952,7 +8551,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;
 }
@@ -8022,7 +8621,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"] {
@@ -8036,11 +8635,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;
@@ -8054,8 +8653,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 ── */
@@ -8064,9 +8663,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;
@@ -8075,6 +8674,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);
@@ -8162,8 +8768,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);
 }
 
@@ -8264,8 +8870,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 ── */
@@ -8278,7 +8884,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"] {
@@ -8296,7 +8902,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;
@@ -8337,7 +8943,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"] {
@@ -8354,11 +8960,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;
@@ -8371,8 +8977,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 ── */
@@ -8408,7 +9014,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);
@@ -8432,11 +9038,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;
 }
@@ -8530,7 +9136,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"] {
@@ -8561,11 +9167,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;
@@ -8593,7 +9206,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%);
 }
 
@@ -8604,7 +9217,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%);
 }
 
@@ -8681,6 +9294,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);
@@ -8715,8 +9329,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 ── */
@@ -8737,7 +9351,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.
@@ -8781,7 +9395,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);
@@ -8862,8 +9476,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 ── */
@@ -8899,8 +9513,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"] {
@@ -8927,7 +9541,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) ── */
@@ -9020,7 +9634,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"] {
@@ -9070,28 +9684,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 ── */
@@ -9099,7 +9713,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;
@@ -9118,7 +9732,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;
 }
@@ -9136,7 +9750,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"] {
@@ -9147,7 +9761,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 {
@@ -9157,7 +9771,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"] {
@@ -9183,7 +9797,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. */
@@ -9205,7 +9819,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;
 }
@@ -9263,8 +9877,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 ── */
@@ -9272,7 +9886,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);
 }
@@ -9301,31 +9915,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 ── */
@@ -9353,7 +9967,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)));
 }
@@ -9479,7 +10093,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"],
@@ -9491,14 +10105,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);
 }
 
@@ -9519,7 +10133,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;
 }
@@ -9572,11 +10186,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] {
@@ -9584,11 +10198,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) ── */
@@ -9661,11 +10275,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 ── */
@@ -9737,7 +10351,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;
@@ -9751,7 +10365,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,
@@ -9848,7 +10462,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"] {
@@ -9877,7 +10491,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;
@@ -9892,8 +10506,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);
 }
 
@@ -9903,12 +10517,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;
 }
@@ -9940,17 +10554,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;
@@ -9995,8 +10609,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"] {
@@ -10011,7 +10625,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,
@@ -10032,7 +10646,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;
@@ -10041,8 +10655,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 ── */
@@ -10053,7 +10667,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;
@@ -10072,7 +10686,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);
@@ -10119,7 +10733,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"] {
@@ -10168,8 +10782,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;
@@ -10179,6 +10793,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"] {
@@ -10218,7 +10839,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"] {
@@ -10226,7 +10847,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"] {
@@ -10234,7 +10855,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"] {
@@ -10256,7 +10877,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);
@@ -10267,11 +10888,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;
@@ -10284,8 +10905,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 ── */
@@ -10311,8 +10932,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 ── */
@@ -10325,14 +10946,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);
 }
@@ -10347,7 +10968,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;
@@ -10388,13 +11009,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;
 }
 
@@ -10407,7 +11028,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"] {
@@ -10428,7 +11049,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;
@@ -10439,6 +11060,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%;
@@ -10554,7 +11182,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"] {
@@ -10567,7 +11195,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);
 }
 
@@ -10595,8 +11223,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"] {
@@ -10635,7 +11263,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"] {
@@ -10643,7 +11271,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,
@@ -10675,9 +11303,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);
 }
 
@@ -10694,7 +11326,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);
@@ -10772,13 +11404,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);
 }
 
@@ -10906,8 +11538,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));
   }
 }
 
@@ -10922,7 +11554,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"] {
@@ -10930,7 +11562,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 ── */
@@ -10988,7 +11620,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);
 }
 
@@ -11003,7 +11635,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);
 }
@@ -11033,7 +11665,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);
 }
@@ -11146,7 +11778,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
@@ -11171,7 +11803,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);
 }
 
@@ -11195,7 +11827,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;
@@ -11215,7 +11847,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%);
@@ -11290,7 +11922,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);
@@ -11309,8 +11941,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 ── */
@@ -11357,7 +11989,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);
@@ -11438,7 +12070,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);
 }
@@ -11521,7 +12153,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 {
@@ -11561,14 +12193,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;
 }
@@ -11584,7 +12219,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 ── */
@@ -11594,13 +12229,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);
 }
@@ -11638,7 +12285,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;
 }
 
@@ -11733,7 +12386,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);
   }
@@ -11749,7 +12402,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);
   }
@@ -11778,7 +12431,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"] {
@@ -11789,7 +12442,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 ── */
@@ -11812,10 +12465,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;
 }
@@ -11913,7 +12569,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
@@ -11923,7 +12579,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);
 }
@@ -12065,7 +12721,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) {
@@ -12085,7 +12741,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
@@ -12099,9 +12755,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 ── */
@@ -12113,9 +12770,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;
 }
@@ -12234,7 +12895,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`
@@ -12254,7 +12915,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);
 }
@@ -12346,8 +13007,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"] {
@@ -12506,7 +13167,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
@@ -12516,7 +13177,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);
 }
@@ -12566,9 +13227,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"] {
@@ -12629,7 +13294,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 ── */
@@ -12674,14 +13339,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 ── */
@@ -12709,7 +13374,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"] {
@@ -12744,7 +13409,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),
@@ -12803,7 +13468,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 ── */
@@ -12843,7 +13508,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;
@@ -12852,8 +13517,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 ── */
@@ -12869,7 +13534,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"] {
@@ -12879,7 +13544,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);
 }
 
@@ -12893,9 +13558,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);
 }
 
@@ -12959,7 +13628,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;
@@ -13023,7 +13692,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;
 }
@@ -13042,7 +13711,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);
@@ -13060,7 +13729,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);
@@ -13094,7 +13763,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
@@ -13104,11 +13773,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 ── */
@@ -13240,7 +13909,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
@@ -13253,7 +13922,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);
 }
@@ -13327,9 +13996,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"] {
@@ -13420,7 +14093,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"] {