@faqir-ui/core 1.0.0 → 1.1.0

package/dist/faqir.glass.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,6 +978,57 @@
   --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/glass.css === */
 /* @ui:theme glass — frosted translucent surfaces over cool neutrals; indigo accent, layered and airy */
 
@@ -651,10 +1039,15 @@
       its own. This is what a browser without backdrop-filter renders.
    2. The `@supports ((-webkit-backdrop-filter: …) or (backdrop-filter: …))`
       block at the end is the only place translucency exists: it re-points the
-      elevated-surface tokens at `color-mix(… , transparent)` values and frosts
-      the floating panels with `backdrop-filter`. No color-mix or
-      backdrop-filter appears outside that block, so degradation is the solid
-      theme above, not a half-transparent one.
+      elevated-surface tokens at `color-mix(… , transparent)` values and names
+      the frost in `--surface-backdrop`. No color-mix or backdrop-filter value
+      appears outside that block, so degradation is the solid theme above, not a
+      half-transparent one.
+
+   Since 1.1A-14 that block declares TOKENS and nothing else: the components
+   carry the `backdrop-filter: var(--surface-backdrop)` declaration (1.1A-04)
+   and the panel fill is `--panel-bg`, so the theme no longer reaches into five
+   components by selector to say one thing about surfaces.
 
    Contrast is gated twice (tests/themes/glass.test.ts): the solid fallbacks
    through the standard `contrast-tokens` maths, and the translucent surfaces
@@ -709,6 +1102,16 @@
   --color-border-strong:   oklch(0.79 0.016 250);
   --color-ring:            oklch(0.50 0.20 275);
 
+  /* ── Radii (generous — a pane of glass has no sharp corner) ──
+     The silhouette this theme always had in the design and never in tokens:
+     every radius steps up one notch from the base ladder, which is what makes
+     `shape.radius` derive `round` rather than the registry's `soft`. */
+  --radius-sm:   0.375rem;   /* 6px  */
+  --radius-md:   0.625rem;   /* 10px */
+  --radius-lg:   0.875rem;   /* 14px */
+  --radius-xl:   1.125rem;   /* 18px */
+  --radius-2xl:  1.5rem;     /* 24px */
+
   /* ── Shadows (large, soft — surfaces float) ── */
   --shadow-xs:  0 1px 3px oklch(0.30 0.04 260 / 0.08);
   --shadow-sm:  0 2px 8px oklch(0.30 0.04 260 / 0.10);
@@ -717,6 +1120,18 @@
   --shadow-xl:  0 24px 56px oklch(0.30 0.04 260 / 0.18), 0 8px 16px oklch(0.30 0.04 260 / 0.08);
 }
 
+:root,
+[data-theme] {
+  /* ── Controls: filled wells ──
+     A text field on a frosted page is a recess, not an outlined box on the same
+     white as the page behind it. `--input-fill` (1.1A-05) is the one declaration
+     that fills `input`, `textarea` and `select` together.
+     On `:root, [data-theme]`: the token layer re-resolves these aliases on
+     every scheme island (tokens/aliases.css), so a `:root`-only override
+     would fall back to the default inside a nested `data-theme` region. */
+  --input-fill: var(--input-bg-filled);
+}
+
 /* ── Dark Mode ── */
 /* Deep blue-gray glass, luminous periwinkle primary */
 [data-theme="dark"] {
@@ -834,34 +1249,36 @@
    transparent)` premultiplies to C at alpha p/100, and the tokens mix from
    `var(--color-bg…)`, so one declaration follows both schemes.
 
-   Frosted targets: the card surface (via its `--card-bg` alias) and the four
-   floating panels that hardcode `background: var(--color-bg)` in their recipe
-   CSS — dialog/sheet panels, popover content, toast. Those need an element
-   rule to go translucent; the `:root` prefix lifts specificity above the
-   recipe's own `[data-ui] [data-part]` rule regardless of load order (same
-   trick as the contrast theme's focus rings). ── */
+   Three declarations now say what fourteen lines of component selectors said:
+
+     --surface-backdrop  the frost itself. Every surface that can float — card,
+                         surface[data-variant="overlay"] and the seven floating
+                         recipes — already declares
+                         `backdrop-filter: var(--surface-backdrop)` inside this
+                         same feature query, so the theme states the value and
+                         the components decide where it lands.
+     --card-bg           the card's own translucent fill (a 1.0 alias).
+     --panel-bg          the fill of everything that floats WITHOUT a surface of
+                         its own — dialog and sheet panels, drawer, popover
+                         content and its arrow, dropdown menu, toast. A frost
+                         behind an opaque fill renders nothing, which is why the
+                         fill has to be a token too (1.1A-14).
+
+   `--glass-blur` stays: it is this theme's own knob, and naming it keeps the
+   radius of the frost readable in one place. ── */
 @supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
   :root {
-    --glass-blur:   16px;
-    /* Elevated surfaces: solid → frosted (scheme-aware via var()). */
-    --card-bg:      color-mix(in oklch, var(--color-surface-1) 82%, transparent);
-    --glass-panel:  color-mix(in oklch, var(--color-bg) 78%, transparent);
+    --glass-blur:       16px;
+    --surface-backdrop: blur(var(--glass-blur)) saturate(140%);
   }
 
-  :root [data-ui="card"],
-  :root [data-ui="dialog"] [data-part="panel"],
-  :root [data-ui="sheet"] [data-part="panel"],
-  :root [data-ui="popover"] [data-part="content"],
-  :root [data-ui="toast"] [data-part="toast"] {
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
-    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
-  }
-
-  :root [data-ui="dialog"] [data-part="panel"],
-  :root [data-ui="sheet"] [data-part="panel"],
-  :root [data-ui="popover"] [data-part="content"],
-  :root [data-ui="toast"] [data-part="toast"] {
-    background: var(--glass-panel);
+  /* Elevated surfaces: solid → frosted (scheme-aware via var()). On every
+     `[data-theme]` island too: the token layer re-resolves both aliases there,
+     so a `:root`-only frost would turn opaque inside a nested scheme region. */
+  :root,
+  [data-theme] {
+    --card-bg:          color-mix(in oklch, var(--color-surface-1) 82%, transparent);
+    --panel-bg:         color-mix(in oklch, var(--color-bg) 78%, transparent);
   }
 }
 
@@ -879,11 +1296,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);
@@ -894,6 +1338,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,
@@ -963,10 +1412,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 */
@@ -995,7 +1466,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);
@@ -1003,29 +1474,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);
 }
@@ -1036,8 +1523,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 {
@@ -1074,7 +1561,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);
@@ -1096,9 +1583,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);
 }
 
@@ -1117,12 +1610,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 */
@@ -1307,7 +1800,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"] {
@@ -1337,7 +1830,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;
@@ -1362,7 +1855,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"] {
@@ -1372,9 +1865,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;
@@ -1420,11 +1914,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);
 }
@@ -1450,12 +1944,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) ── */
@@ -1495,7 +1990,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"] {
@@ -1505,18 +2000,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;
@@ -1525,11 +2023,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 ── */
@@ -1585,7 +2088,7 @@ table {
   padding: 0;
 }
 [data-ui="button"][data-variant="link"]:hover {
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
 }
 
 /* ── Sizes ── */
@@ -1604,7 +2107,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;
 }
@@ -1619,7 +2122,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;
@@ -1666,7 +2169,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"] {
@@ -1675,7 +2178,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);
 }
@@ -1706,6 +2209,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));
 }
@@ -1732,8 +2236,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;
 }
 
@@ -1819,17 +2324,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 ── */
@@ -1838,7 +2362,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;
 }
@@ -1853,7 +2377,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);
@@ -1894,9 +2418,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"] {
@@ -1908,7 +2442,7 @@ table {
 
 [data-ui="checkbox-label"]:has([data-ui="checkbox"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -1920,8 +2454,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),
@@ -1934,8 +2468,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 -- */
@@ -2026,7 +2561,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,
@@ -2050,7 +2585,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"] {
@@ -2058,11 +2593,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;
@@ -2098,8 +2633,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 ── */
@@ -2322,12 +2860,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);
 }
 
@@ -2357,8 +2895,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 */
@@ -2367,8 +2906,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);
 }
@@ -2387,7 +2926,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 ── */
@@ -2520,13 +3059,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 ── */
@@ -2582,7 +3121,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,
@@ -2594,7 +3133,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 ── */
@@ -2632,7 +3171,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"] {
@@ -2653,6 +3192,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);
@@ -2700,7 +3240,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 →
@@ -2712,7 +3252,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 ── */
@@ -2782,7 +3322,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 ──
@@ -2792,7 +3332,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 ──
@@ -2811,8 +3351,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 ── */
@@ -3117,7 +3657,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"] {
@@ -3141,7 +3681,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;
@@ -3238,7 +3778,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"] {
@@ -3246,11 +3786,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),
@@ -3266,8 +3813,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;
 }
 
@@ -3295,7 +3845,7 @@ table {
 }
 
 [data-ui="input"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -3358,7 +3908,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"] {
@@ -3368,8 +3918,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);
@@ -3382,7 +3932,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"] {
@@ -3391,7 +3941,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 ── */
@@ -3521,12 +4071,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);
@@ -3559,21 +4109,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;
 }
@@ -3587,8 +4137,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 ── */
@@ -3612,7 +4163,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"] {
@@ -3662,14 +4213,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;
 }
 
@@ -3725,7 +4276,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"] {
@@ -3740,12 +4291,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;
@@ -3787,7 +4338,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"] {
@@ -3862,7 +4413,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"],
@@ -3876,7 +4427,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"] {
@@ -3898,7 +4449,7 @@ table {
 
 [data-ui="radio-label"]:has([data-ui="radio"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -3910,7 +4461,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;
@@ -3924,8 +4475,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 -- */
@@ -3978,7 +4530,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 {
@@ -3998,7 +4550,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"] {
@@ -4007,11 +4559,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;
@@ -4041,8 +4599,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;
 }
 
@@ -4075,7 +4636,7 @@ table {
 }
 
 [data-ui="select"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -4088,12 +4649,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%;
 }
@@ -4101,7 +4662,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;
@@ -4119,11 +4680,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;
@@ -4161,17 +4722,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 ── */
@@ -4189,20 +4750,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;
 }
 
@@ -4305,14 +4866,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;
@@ -4328,13 +4889,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 ── */
@@ -4916,14 +5477,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 ── */
@@ -4937,6 +5498,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);
@@ -4995,10 +5557,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 ── */
@@ -5010,7 +5572,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"] {
@@ -5020,7 +5582,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"] {
@@ -5099,7 +5661,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);
@@ -5167,18 +5729,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;
 }
@@ -5188,11 +5752,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);
@@ -5248,7 +5823,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"] {
@@ -5260,7 +5835,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) -- */
@@ -5288,8 +5863,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;
@@ -5299,8 +5874,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) -- */
@@ -5309,7 +5885,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);
@@ -5321,7 +5897,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);
@@ -5403,7 +5979,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;
   }
 
@@ -5560,25 +6136,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"] {
@@ -5602,7 +6184,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);
 }
 
@@ -5680,7 +6262,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"] {
@@ -5688,11 +6270,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;
@@ -5709,8 +6297,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;
 }
 
@@ -5738,7 +6329,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;
 }
@@ -5752,7 +6343,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"] {
@@ -5761,11 +6352,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;
@@ -5782,8 +6373,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 ── */
@@ -5800,7 +6392,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="toggle"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -5824,7 +6416,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;
@@ -5843,7 +6435,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);
@@ -5901,7 +6493,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"] {
@@ -5910,7 +6502,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 {
@@ -5927,7 +6519,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;
@@ -5941,8 +6533,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);
 }
 
@@ -5974,13 +6566,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 {
@@ -5997,7 +6589,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"] {
@@ -6033,7 +6625,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;
@@ -6079,6 +6671,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);
@@ -6118,7 +6711,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;
@@ -6145,7 +6738,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;
@@ -6165,7 +6758,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"] {
@@ -6198,7 +6791,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);
@@ -6214,13 +6807,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;
 }
 
@@ -6255,11 +6850,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),
@@ -6272,8 +6867,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 ── */
@@ -6308,7 +6903,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;
 }
@@ -6372,7 +6967,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
@@ -6386,7 +6981,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 ── */
@@ -6412,8 +7007,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 ── */
@@ -6421,7 +7016,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);
@@ -6450,7 +7045,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);
@@ -6469,14 +7064,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;
 }
 
@@ -6485,7 +7081,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;
@@ -6521,7 +7117,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"] {
@@ -6535,11 +7131,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;
@@ -6552,8 +7148,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 ── */
@@ -6565,7 +7161,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);
@@ -6650,7 +7246,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"] {
@@ -6683,7 +7279,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;
@@ -6715,7 +7311,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 ── */
@@ -6725,7 +7321,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;
 }
@@ -6809,7 +7405,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);
@@ -6838,7 +7434,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;
@@ -6851,12 +7447,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"] {
@@ -6888,7 +7484,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;
@@ -6912,15 +7508,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"] {
@@ -6939,7 +7535,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 ── */
@@ -6960,11 +7556,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;
@@ -6976,8 +7572,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);
 }
 
@@ -7000,7 +7596,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);
@@ -7039,7 +7635,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"] {
@@ -7074,15 +7670,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);
@@ -7131,6 +7735,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);
@@ -7165,8 +7770,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 ── */
@@ -7202,7 +7807,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"] {
@@ -7237,17 +7842,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%);
 }
@@ -7255,7 +7867,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%);
 }
@@ -7309,6 +7921,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);
@@ -7343,8 +7956,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 ── */
@@ -7363,7 +7976,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;
 }
 
@@ -7377,7 +7990,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"] {
@@ -7391,11 +8004,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;
@@ -7409,8 +8022,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 ── */
@@ -7422,9 +8035,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);
@@ -7432,6 +8045,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);
@@ -7454,7 +8074,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;
@@ -7476,12 +8096,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;
 }
@@ -7534,14 +8154,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"] {
@@ -7576,14 +8196,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"] {
@@ -7657,8 +8277,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"] {
@@ -7680,7 +8300,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"],
@@ -7696,7 +8316,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"] {
@@ -7711,7 +8331,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 ──
@@ -7756,14 +8376,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);
 }
 
@@ -7775,7 +8395,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 */
@@ -7823,7 +8443,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"] {
@@ -7847,7 +8467,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;
@@ -7865,7 +8485,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"] {
@@ -7907,7 +8527,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"] {
@@ -7942,7 +8562,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"] {
@@ -7974,7 +8597,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"] {
@@ -8010,11 +8633,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;
@@ -8035,8 +8658,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 ── */
@@ -8060,7 +8683,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;
 }
@@ -8130,7 +8753,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"] {
@@ -8144,11 +8767,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;
@@ -8162,8 +8785,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 ── */
@@ -8172,9 +8795,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;
@@ -8183,6 +8806,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);
@@ -8270,8 +8900,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);
 }
 
@@ -8372,8 +9002,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 ── */
@@ -8386,7 +9016,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"] {
@@ -8404,7 +9034,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;
@@ -8445,7 +9075,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"] {
@@ -8462,11 +9092,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;
@@ -8479,8 +9109,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 ── */
@@ -8516,7 +9146,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);
@@ -8540,11 +9170,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;
 }
@@ -8638,7 +9268,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"] {
@@ -8669,11 +9299,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;
@@ -8701,7 +9338,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%);
 }
 
@@ -8712,7 +9349,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%);
 }
 
@@ -8789,6 +9426,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);
@@ -8823,8 +9461,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 ── */
@@ -8845,7 +9483,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.
@@ -8889,7 +9527,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);
@@ -8970,8 +9608,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 ── */
@@ -9007,8 +9645,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"] {
@@ -9035,7 +9673,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) ── */
@@ -9128,7 +9766,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"] {
@@ -9178,28 +9816,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 ── */
@@ -9207,7 +9845,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;
@@ -9226,7 +9864,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;
 }
@@ -9244,7 +9882,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"] {
@@ -9255,7 +9893,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 {
@@ -9265,7 +9903,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"] {
@@ -9291,7 +9929,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. */
@@ -9313,7 +9951,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;
 }
@@ -9371,8 +10009,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 ── */
@@ -9380,7 +10018,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);
 }
@@ -9409,31 +10047,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 ── */
@@ -9461,7 +10099,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)));
 }
@@ -9587,7 +10225,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"],
@@ -9599,14 +10237,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);
 }
 
@@ -9627,7 +10265,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;
 }
@@ -9680,11 +10318,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] {
@@ -9692,11 +10330,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) ── */
@@ -9769,11 +10407,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 ── */
@@ -9845,7 +10483,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;
@@ -9859,7 +10497,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,
@@ -9956,7 +10594,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"] {
@@ -9985,7 +10623,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;
@@ -10000,8 +10638,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);
 }
 
@@ -10011,12 +10649,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;
 }
@@ -10048,17 +10686,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;
@@ -10103,8 +10741,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"] {
@@ -10119,7 +10757,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,
@@ -10140,7 +10778,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;
@@ -10149,8 +10787,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 ── */
@@ -10161,7 +10799,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;
@@ -10180,7 +10818,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);
@@ -10227,7 +10865,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"] {
@@ -10276,8 +10914,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;
@@ -10287,6 +10925,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"] {
@@ -10326,7 +10971,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"] {
@@ -10334,7 +10979,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"] {
@@ -10342,7 +10987,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"] {
@@ -10364,7 +11009,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);
@@ -10375,11 +11020,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;
@@ -10392,8 +11037,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 ── */
@@ -10419,8 +11064,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 ── */
@@ -10433,14 +11078,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);
 }
@@ -10455,7 +11100,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;
@@ -10496,13 +11141,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;
 }
 
@@ -10515,7 +11160,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"] {
@@ -10536,7 +11181,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;
@@ -10547,6 +11192,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%;
@@ -10662,7 +11314,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"] {
@@ -10675,7 +11327,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);
 }
 
@@ -10703,8 +11355,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"] {
@@ -10743,7 +11395,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"] {
@@ -10751,7 +11403,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,
@@ -10783,9 +11435,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);
 }
 
@@ -10802,7 +11458,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);
@@ -10880,13 +11536,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);
 }
 
@@ -11014,8 +11670,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));
   }
 }
 
@@ -11030,7 +11686,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"] {
@@ -11038,7 +11694,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 ── */
@@ -11096,7 +11752,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);
 }
 
@@ -11111,7 +11767,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);
 }
@@ -11141,7 +11797,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);
 }
@@ -11254,7 +11910,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
@@ -11279,7 +11935,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);
 }
 
@@ -11303,7 +11959,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;
@@ -11323,7 +11979,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%);
@@ -11398,7 +12054,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);
@@ -11417,8 +12073,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 ── */
@@ -11465,7 +12121,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);
@@ -11546,7 +12202,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);
 }
@@ -11629,7 +12285,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 {
@@ -11669,14 +12325,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;
 }
@@ -11692,7 +12351,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 ── */
@@ -11702,13 +12361,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);
 }
@@ -11746,7 +12417,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;
 }
 
@@ -11841,7 +12518,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);
   }
@@ -11857,7 +12534,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);
   }
@@ -11886,7 +12563,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"] {
@@ -11897,7 +12574,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 ── */
@@ -11920,10 +12597,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;
 }
@@ -12021,7 +12701,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
@@ -12031,7 +12711,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);
 }
@@ -12173,7 +12853,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) {
@@ -12193,7 +12873,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
@@ -12207,9 +12887,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 ── */
@@ -12221,9 +12902,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;
 }
@@ -12342,7 +13027,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`
@@ -12362,7 +13047,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);
 }
@@ -12454,8 +13139,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"] {
@@ -12614,7 +13299,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
@@ -12624,7 +13309,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);
 }
@@ -12674,9 +13359,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"] {
@@ -12737,7 +13426,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 ── */
@@ -12782,14 +13471,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 ── */
@@ -12817,7 +13506,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"] {
@@ -12852,7 +13541,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),
@@ -12911,7 +13600,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 ── */
@@ -12951,7 +13640,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;
@@ -12960,8 +13649,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 ── */
@@ -12977,7 +13666,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"] {
@@ -12987,7 +13676,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);
 }
 
@@ -13001,9 +13690,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);
 }
 
@@ -13067,7 +13760,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;
@@ -13131,7 +13824,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;
 }
@@ -13150,7 +13843,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);
@@ -13168,7 +13861,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);
@@ -13202,7 +13895,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
@@ -13212,11 +13905,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 ── */
@@ -13348,7 +14041,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
@@ -13361,7 +14054,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);
 }
@@ -13435,9 +14128,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"] {
@@ -13528,7 +14225,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"] {