@faqir-ui/core 1.0.0 → 1.1.0

package/dist/faqir.aurora.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/aurora.css === */
 /* @ui:theme aurora — vibrant gradient accents on deep neutral dark; modern SaaS */
 
@@ -693,12 +1081,42 @@
   /* ── Signature gradient accent (decorative; violet → cyan) ── */
   --gradient-accent:       linear-gradient(135deg, oklch(0.51 0.24 300), oklch(0.60 0.14 220));
 
-  /* ── Shadows (violet-tinted) ── */
-  --shadow-xs:  0 1px 2px oklch(0.25 0.05 300 / 0.08);
-  --shadow-sm:  0 1px 3px oklch(0.25 0.05 300 / 0.10), 0 1px 2px oklch(0.25 0.05 300 / 0.06);
-  --shadow-md:  0 4px 6px oklch(0.25 0.05 300 / 0.08), 0 2px 4px oklch(0.25 0.05 300 / 0.06);
-  --shadow-lg:  0 10px 15px oklch(0.25 0.05 300 / 0.10), 0 4px 6px oklch(0.25 0.05 300 / 0.06);
-  --shadow-xl:  0 20px 25px oklch(0.25 0.05 300 / 0.12), 0 8px 10px oklch(0.25 0.05 300 / 0.06);
+  /* ── Type voice: display headings, set tight ──
+     The one thing every modern SaaS landing page does to its type and no token
+     could say before 1.1A-01. Tracking is additive — the heading primitive keeps
+     its own optical tightening and this rides on top of it. */
+  --heading-tracking: -0.02em;
+
+  /* ── Material: the aurora itself ──
+     A soft gradient mesh on the page, which is the one texture in the set that
+     is a light rather than a grain. It dresses the PAGE and not `surface`/`card`
+     (`--texture-surface`): a mesh behind every card would compete with the
+     content sitting on it, and the theme's subject is the sky behind the app. */
+  --texture-page: var(--texture-mesh);
+
+  /* ── Depth: layered, and tinted through the channel ──
+     Every step is cast in `--shadow-color` (bare OKLCH channels), so the violet
+     cast is ONE declaration per scheme instead of ten literals, and the geometry
+     matches the dark ramp below: the md step blurs past the `layered` band,
+     which is what a stack of floating SaaS panels looks like. */
+  --shadow-color: 0.25 0.05 300;
+
+  --shadow-xs:  0 1px 3px oklch(var(--shadow-color) / 0.08);
+  --shadow-sm:  0 2px 6px oklch(var(--shadow-color) / 0.10), 0 1px 2px oklch(var(--shadow-color) / 0.06);
+  --shadow-md:  0 6px 12px oklch(var(--shadow-color) / 0.09), 0 2px 4px oklch(var(--shadow-color) / 0.06);
+  --shadow-lg:  0 12px 24px oklch(var(--shadow-color) / 0.11), 0 4px 8px oklch(var(--shadow-color) / 0.06);
+  --shadow-xl:  0 24px 48px oklch(var(--shadow-color) / 0.13), 0 8px 16px oklch(var(--shadow-color) / 0.07);
+}
+
+:root,
+[data-theme] {
+  /* ── Decoration: selection wears the accent ──
+     The one surface of a themed page that never matched the theme.
+     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. */
+  --selection-bg: var(--color-primary);
+  --selection-fg: var(--color-primary-fg);
 }
 
 /* ── Dark Mode (primary design target) ── */
@@ -750,12 +1168,14 @@
   /* ── Signature gradient accent (decorative; violet → cyan aurora) ── */
   --gradient-accent:       linear-gradient(135deg, oklch(0.72 0.18 307), oklch(0.78 0.14 195));
 
-  /* ── Shadows (deep, near-black violet) ── */
-  --shadow-xs:  0 1px 3px oklch(0.06 0.02 300 / 0.4);
-  --shadow-sm:  0 2px 6px oklch(0.06 0.02 300 / 0.5);
-  --shadow-md:  0 6px 12px oklch(0.06 0.02 300 / 0.5), 0 2px 4px oklch(0.06 0.02 300 / 0.3);
-  --shadow-lg:  0 12px 24px oklch(0.06 0.02 300 / 0.6), 0 4px 8px oklch(0.06 0.02 300 / 0.3);
-  --shadow-xl:  0 24px 48px oklch(0.06 0.02 300 / 0.7), 0 8px 16px oklch(0.06 0.02 300 / 0.4);
+  /* ── Shadows (deep, near-black violet — the same ramp, cast darker) ── */
+  --shadow-color: 0.06 0.02 300;
+
+  --shadow-xs:  0 1px 3px oklch(var(--shadow-color) / 0.4);
+  --shadow-sm:  0 2px 6px oklch(var(--shadow-color) / 0.5);
+  --shadow-md:  0 6px 12px oklch(var(--shadow-color) / 0.5), 0 2px 4px oklch(var(--shadow-color) / 0.3);
+  --shadow-lg:  0 12px 24px oklch(var(--shadow-color) / 0.6), 0 4px 8px oklch(var(--shadow-color) / 0.3);
+  --shadow-xl:  0 24px 48px oklch(var(--shadow-color) / 0.7), 0 8px 16px oklch(var(--shadow-color) / 0.4);
 }
 
 /* ── Auto Dark Mode (system preference) ── */
@@ -807,12 +1227,14 @@
     /* ── Signature gradient accent (decorative; violet → cyan aurora) ── */
     --gradient-accent:       linear-gradient(135deg, oklch(0.72 0.18 307), oklch(0.78 0.14 195));
 
-    /* ── Shadows (deep, near-black violet) ── */
-    --shadow-xs:  0 1px 3px oklch(0.06 0.02 300 / 0.4);
-    --shadow-sm:  0 2px 6px oklch(0.06 0.02 300 / 0.5);
-    --shadow-md:  0 6px 12px oklch(0.06 0.02 300 / 0.5), 0 2px 4px oklch(0.06 0.02 300 / 0.3);
-    --shadow-lg:  0 12px 24px oklch(0.06 0.02 300 / 0.6), 0 4px 8px oklch(0.06 0.02 300 / 0.3);
-    --shadow-xl:  0 24px 48px oklch(0.06 0.02 300 / 0.7), 0 8px 16px oklch(0.06 0.02 300 / 0.4);
+    /* ── Shadows (deep, near-black violet — the same ramp, cast darker) ── */
+    --shadow-color: 0.06 0.02 300;
+
+    --shadow-xs:  0 1px 3px oklch(var(--shadow-color) / 0.4);
+    --shadow-sm:  0 2px 6px oklch(var(--shadow-color) / 0.5);
+    --shadow-md:  0 6px 12px oklch(var(--shadow-color) / 0.5), 0 2px 4px oklch(var(--shadow-color) / 0.3);
+    --shadow-lg:  0 12px 24px oklch(var(--shadow-color) / 0.6), 0 4px 8px oklch(var(--shadow-color) / 0.3);
+    --shadow-xl:  0 24px 48px oklch(var(--shadow-color) / 0.7), 0 8px 16px oklch(var(--shadow-color) / 0.4);
   }
 }
 
@@ -830,11 +1252,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);
@@ -845,6 +1294,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,
@@ -914,10 +1368,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 */
@@ -946,7 +1422,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);
@@ -954,29 +1430,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);
 }
@@ -987,8 +1479,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 {
@@ -1025,7 +1517,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);
@@ -1047,9 +1539,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);
 }
 
@@ -1068,12 +1566,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 */
@@ -1258,7 +1756,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"] {
@@ -1288,7 +1786,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;
@@ -1313,7 +1811,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"] {
@@ -1323,9 +1821,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;
@@ -1371,11 +1870,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);
 }
@@ -1401,12 +1900,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) ── */
@@ -1446,7 +1946,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"] {
@@ -1456,18 +1956,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;
@@ -1476,11 +1979,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 ── */
@@ -1536,7 +2044,7 @@ table {
   padding: 0;
 }
 [data-ui="button"][data-variant="link"]:hover {
-  text-decoration: underline;
+  text-decoration-line: var(--link-decoration);
 }
 
 /* ── Sizes ── */
@@ -1555,7 +2063,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;
 }
@@ -1570,7 +2078,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;
@@ -1617,7 +2125,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"] {
@@ -1626,7 +2134,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);
 }
@@ -1657,6 +2165,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));
 }
@@ -1683,8 +2192,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;
 }
 
@@ -1770,17 +2280,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 ── */
@@ -1789,7 +2318,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;
 }
@@ -1804,7 +2333,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);
@@ -1845,9 +2374,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"] {
@@ -1859,7 +2398,7 @@ table {
 
 [data-ui="checkbox-label"]:has([data-ui="checkbox"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -1871,8 +2410,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),
@@ -1885,8 +2424,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 -- */
@@ -1977,7 +2517,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,
@@ -2001,7 +2541,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"] {
@@ -2009,11 +2549,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;
@@ -2049,8 +2589,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 ── */
@@ -2273,12 +2816,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);
 }
 
@@ -2308,8 +2851,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 */
@@ -2318,8 +2862,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);
 }
@@ -2338,7 +2882,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 ── */
@@ -2471,13 +3015,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 ── */
@@ -2533,7 +3077,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,
@@ -2545,7 +3089,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 ── */
@@ -2583,7 +3127,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"] {
@@ -2604,6 +3148,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);
@@ -2651,7 +3196,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 →
@@ -2663,7 +3208,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 ── */
@@ -2733,7 +3278,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 ──
@@ -2743,7 +3288,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 ──
@@ -2762,8 +3307,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 ── */
@@ -3068,7 +3613,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"] {
@@ -3092,7 +3637,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;
@@ -3189,7 +3734,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"] {
@@ -3197,11 +3742,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),
@@ -3217,8 +3769,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;
 }
 
@@ -3246,7 +3801,7 @@ table {
 }
 
 [data-ui="input"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -3309,7 +3864,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"] {
@@ -3319,8 +3874,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);
@@ -3333,7 +3888,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"] {
@@ -3342,7 +3897,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 ── */
@@ -3472,12 +4027,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);
@@ -3510,21 +4065,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;
 }
@@ -3538,8 +4093,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 ── */
@@ -3563,7 +4119,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"] {
@@ -3613,14 +4169,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;
 }
 
@@ -3676,7 +4232,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"] {
@@ -3691,12 +4247,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;
@@ -3738,7 +4294,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"] {
@@ -3813,7 +4369,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"],
@@ -3827,7 +4383,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"] {
@@ -3849,7 +4405,7 @@ table {
 
 [data-ui="radio-label"]:has([data-ui="radio"]:disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 
 /* -- Base -- */
@@ -3861,7 +4417,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;
@@ -3875,8 +4431,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 -- */
@@ -3929,7 +4486,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 {
@@ -3949,7 +4506,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"] {
@@ -3958,11 +4515,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;
@@ -3992,8 +4555,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;
 }
 
@@ -4026,7 +4592,7 @@ table {
 }
 
 [data-ui="select"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -4039,12 +4605,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%;
 }
@@ -4052,7 +4618,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;
@@ -4070,11 +4636,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;
@@ -4112,17 +4678,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 ── */
@@ -4140,20 +4706,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;
 }
 
@@ -4256,14 +4822,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;
@@ -4279,13 +4845,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 ── */
@@ -4867,14 +5433,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 ── */
@@ -4888,6 +5454,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);
@@ -4946,10 +5513,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 ── */
@@ -4961,7 +5528,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"] {
@@ -4971,7 +5538,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"] {
@@ -5050,7 +5617,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);
@@ -5118,18 +5685,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;
 }
@@ -5139,11 +5708,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);
@@ -5199,7 +5779,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"] {
@@ -5211,7 +5791,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) -- */
@@ -5239,8 +5819,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;
@@ -5250,8 +5830,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) -- */
@@ -5260,7 +5841,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);
@@ -5272,7 +5853,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);
@@ -5354,7 +5935,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;
   }
 
@@ -5511,25 +6092,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"] {
@@ -5553,7 +6140,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);
 }
 
@@ -5631,7 +6218,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"] {
@@ -5639,11 +6226,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;
@@ -5660,8 +6253,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;
 }
 
@@ -5689,7 +6285,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;
 }
@@ -5703,7 +6299,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"] {
@@ -5712,11 +6308,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;
@@ -5733,8 +6329,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 ── */
@@ -5751,7 +6348,7 @@ div[data-ui="separator"][data-style="thick"]::after {
 
 /* ── Disabled ── */
 [data-ui="toggle"]:disabled {
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -5775,7 +6372,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;
@@ -5794,7 +6391,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);
@@ -5852,7 +6449,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"] {
@@ -5861,7 +6458,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 {
@@ -5878,7 +6475,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;
@@ -5892,8 +6489,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);
 }
 
@@ -5925,13 +6522,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 {
@@ -5948,7 +6545,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"] {
@@ -5984,7 +6581,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;
@@ -6030,6 +6627,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);
@@ -6069,7 +6667,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;
@@ -6096,7 +6694,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;
@@ -6116,7 +6714,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"] {
@@ -6149,7 +6747,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);
@@ -6165,13 +6763,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;
 }
 
@@ -6206,11 +6806,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),
@@ -6223,8 +6823,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 ── */
@@ -6259,7 +6859,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;
 }
@@ -6323,7 +6923,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
@@ -6337,7 +6937,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 ── */
@@ -6363,8 +6963,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 ── */
@@ -6372,7 +6972,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);
@@ -6401,7 +7001,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);
@@ -6420,14 +7020,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;
 }
 
@@ -6436,7 +7037,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;
@@ -6472,7 +7073,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"] {
@@ -6486,11 +7087,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;
@@ -6503,8 +7104,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 ── */
@@ -6516,7 +7117,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);
@@ -6601,7 +7202,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"] {
@@ -6634,7 +7235,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;
@@ -6666,7 +7267,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 ── */
@@ -6676,7 +7277,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;
 }
@@ -6760,7 +7361,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);
@@ -6789,7 +7390,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;
@@ -6802,12 +7403,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"] {
@@ -6839,7 +7440,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;
@@ -6863,15 +7464,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"] {
@@ -6890,7 +7491,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 ── */
@@ -6911,11 +7512,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;
@@ -6927,8 +7528,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);
 }
 
@@ -6951,7 +7552,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);
@@ -6990,7 +7591,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"] {
@@ -7025,15 +7626,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);
@@ -7082,6 +7691,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);
@@ -7116,8 +7726,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 ── */
@@ -7153,7 +7763,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"] {
@@ -7188,17 +7798,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%);
 }
@@ -7206,7 +7823,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%);
 }
@@ -7260,6 +7877,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);
@@ -7294,8 +7912,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 ── */
@@ -7314,7 +7932,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;
 }
 
@@ -7328,7 +7946,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"] {
@@ -7342,11 +7960,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;
@@ -7360,8 +7978,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 ── */
@@ -7373,9 +7991,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);
@@ -7383,6 +8001,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);
@@ -7405,7 +8030,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;
@@ -7427,12 +8052,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;
 }
@@ -7485,14 +8110,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"] {
@@ -7527,14 +8152,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"] {
@@ -7608,8 +8233,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"] {
@@ -7631,7 +8256,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"],
@@ -7647,7 +8272,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"] {
@@ -7662,7 +8287,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 ──
@@ -7707,14 +8332,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);
 }
 
@@ -7726,7 +8351,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 */
@@ -7774,7 +8399,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"] {
@@ -7798,7 +8423,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;
@@ -7816,7 +8441,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"] {
@@ -7858,7 +8483,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"] {
@@ -7893,7 +8518,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"] {
@@ -7925,7 +8553,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"] {
@@ -7961,11 +8589,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;
@@ -7986,8 +8614,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 ── */
@@ -8011,7 +8639,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;
 }
@@ -8081,7 +8709,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"] {
@@ -8095,11 +8723,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;
@@ -8113,8 +8741,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 ── */
@@ -8123,9 +8751,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;
@@ -8134,6 +8762,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);
@@ -8221,8 +8856,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);
 }
 
@@ -8323,8 +8958,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 ── */
@@ -8337,7 +8972,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"] {
@@ -8355,7 +8990,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;
@@ -8396,7 +9031,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"] {
@@ -8413,11 +9048,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;
@@ -8430,8 +9065,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 ── */
@@ -8467,7 +9102,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);
@@ -8491,11 +9126,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;
 }
@@ -8589,7 +9224,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"] {
@@ -8620,11 +9255,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;
@@ -8652,7 +9294,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%);
 }
 
@@ -8663,7 +9305,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%);
 }
 
@@ -8740,6 +9382,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);
@@ -8774,8 +9417,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 ── */
@@ -8796,7 +9439,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.
@@ -8840,7 +9483,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);
@@ -8921,8 +9564,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 ── */
@@ -8958,8 +9601,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"] {
@@ -8986,7 +9629,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) ── */
@@ -9079,7 +9722,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"] {
@@ -9129,28 +9772,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 ── */
@@ -9158,7 +9801,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;
@@ -9177,7 +9820,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;
 }
@@ -9195,7 +9838,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"] {
@@ -9206,7 +9849,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 {
@@ -9216,7 +9859,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"] {
@@ -9242,7 +9885,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. */
@@ -9264,7 +9907,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;
 }
@@ -9322,8 +9965,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 ── */
@@ -9331,7 +9974,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);
 }
@@ -9360,31 +10003,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 ── */
@@ -9412,7 +10055,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)));
 }
@@ -9538,7 +10181,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"],
@@ -9550,14 +10193,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);
 }
 
@@ -9578,7 +10221,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;
 }
@@ -9631,11 +10274,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] {
@@ -9643,11 +10286,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) ── */
@@ -9720,11 +10363,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 ── */
@@ -9796,7 +10439,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;
@@ -9810,7 +10453,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,
@@ -9907,7 +10550,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"] {
@@ -9936,7 +10579,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;
@@ -9951,8 +10594,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);
 }
 
@@ -9962,12 +10605,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;
 }
@@ -9999,17 +10642,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;
@@ -10054,8 +10697,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"] {
@@ -10070,7 +10713,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,
@@ -10091,7 +10734,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;
@@ -10100,8 +10743,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 ── */
@@ -10112,7 +10755,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;
@@ -10131,7 +10774,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);
@@ -10178,7 +10821,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"] {
@@ -10227,8 +10870,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;
@@ -10238,6 +10881,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"] {
@@ -10277,7 +10927,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"] {
@@ -10285,7 +10935,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"] {
@@ -10293,7 +10943,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"] {
@@ -10315,7 +10965,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);
@@ -10326,11 +10976,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;
@@ -10343,8 +10993,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 ── */
@@ -10370,8 +11020,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 ── */
@@ -10384,14 +11034,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);
 }
@@ -10406,7 +11056,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;
@@ -10447,13 +11097,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;
 }
 
@@ -10466,7 +11116,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"] {
@@ -10487,7 +11137,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;
@@ -10498,6 +11148,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%;
@@ -10613,7 +11270,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"] {
@@ -10626,7 +11283,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);
 }
 
@@ -10654,8 +11311,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"] {
@@ -10694,7 +11351,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"] {
@@ -10702,7 +11359,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,
@@ -10734,9 +11391,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);
 }
 
@@ -10753,7 +11414,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);
@@ -10831,13 +11492,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);
 }
 
@@ -10965,8 +11626,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));
   }
 }
 
@@ -10981,7 +11642,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"] {
@@ -10989,7 +11650,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 ── */
@@ -11047,7 +11708,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);
 }
 
@@ -11062,7 +11723,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);
 }
@@ -11092,7 +11753,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);
 }
@@ -11205,7 +11866,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
@@ -11230,7 +11891,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);
 }
 
@@ -11254,7 +11915,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;
@@ -11274,7 +11935,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%);
@@ -11349,7 +12010,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);
@@ -11368,8 +12029,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 ── */
@@ -11416,7 +12077,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);
@@ -11497,7 +12158,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);
 }
@@ -11580,7 +12241,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 {
@@ -11620,14 +12281,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;
 }
@@ -11643,7 +12307,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 ── */
@@ -11653,13 +12317,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);
 }
@@ -11697,7 +12373,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;
 }
 
@@ -11792,7 +12474,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);
   }
@@ -11808,7 +12490,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);
   }
@@ -11837,7 +12519,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"] {
@@ -11848,7 +12530,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 ── */
@@ -11871,10 +12553,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;
 }
@@ -11972,7 +12657,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
@@ -11982,7 +12667,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);
 }
@@ -12124,7 +12809,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) {
@@ -12144,7 +12829,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
@@ -12158,9 +12843,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 ── */
@@ -12172,9 +12858,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;
 }
@@ -12293,7 +12983,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`
@@ -12313,7 +13003,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);
 }
@@ -12405,8 +13095,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"] {
@@ -12565,7 +13255,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
@@ -12575,7 +13265,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);
 }
@@ -12625,9 +13315,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"] {
@@ -12688,7 +13382,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 ── */
@@ -12733,14 +13427,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 ── */
@@ -12768,7 +13462,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"] {
@@ -12803,7 +13497,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),
@@ -12862,7 +13556,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 ── */
@@ -12902,7 +13596,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;
@@ -12911,8 +13605,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 ── */
@@ -12928,7 +13622,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"] {
@@ -12938,7 +13632,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);
 }
 
@@ -12952,9 +13646,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);
 }
 
@@ -13018,7 +13716,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;
@@ -13082,7 +13780,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;
 }
@@ -13101,7 +13799,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);
@@ -13119,7 +13817,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);
@@ -13153,7 +13851,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
@@ -13163,11 +13861,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 ── */
@@ -13299,7 +13997,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
@@ -13312,7 +14010,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);
 }
@@ -13386,9 +14084,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"] {
@@ -13479,7 +14181,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"] {