@usefragments/ui 1.5.4 → 1.7.0

package/src/tokens/_variables.scss

@@ -23,7 +23,9 @@
 
 // Import computed values from seed system
 @use "sass:string";
+@use "sass:map";
 @use "computed" as computed;
+@use "measurements.generated" as measurements;
 
 // --------------------------------------------
 // Base Configuration
@@ -45,8 +47,8 @@ $fui-base-unit: computed.$computed-base-unit !default;
 // Typography
 // --------------------------------------------
 $fui-font-sans:
-  "Inter Variable",
-  Inter,
+  "Onest Variable",
+  Onest,
   -apple-system,
   BlinkMacSystemFont,
   "Segoe UI",
@@ -55,23 +57,18 @@ $fui-font-sans:
 $fui-font-mono:
   "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !default;
 
-// Font sizes (rem based on 14px root).
-// Scale ladder tuned for industry-leading docs hierarchy:
-//   - UI chrome stays dense at 14px (sm/base).
-//   - `md` (15px) is the prose body size — comfortable reading.
-//   - `lg`/`xl`/`2xl` step 20 / 24 / 30 for h3 / h2 / large display.
-//   - `3xl`/`4xl` (36 / 48) land page-title and hero sizes without
-//     per-page clamps.
-$fui-font-size-2xs: 0.714rem !default; // 10px
-$fui-font-size-xs: 0.857rem !default; // 12px
-$fui-font-size-sm: 1rem !default; // 14px (base)
-$fui-font-size-base: 1rem !default; // 14px (= sm, body base)
-$fui-font-size-md: 1.071rem !default; // 15px (prose body — longer reading)
-$fui-font-size-lg: 1.429rem !default; // 20px (h3, dialog/drawer/alert title)
-$fui-font-size-xl: 1.714rem !default; // 24px (h2, section heading)
-$fui-font-size-2xl: 2.143rem !default; // 30px (large display)
-$fui-font-size-3xl: 2.571rem !default; // 36px (h1, page title)
-$fui-font-size-4xl: 3.429rem !default; // 48px (hero display)
+// Legacy public typography variables are generated compatibility views. New
+// component work uses the semantic typography recipe.
+$fui-font-size-2xs: map.get(measurements.$legacy, "typography", "fontSize", "2xs") !default;
+$fui-font-size-xs: map.get(measurements.$legacy, "typography", "fontSize", "xs") !default;
+$fui-font-size-sm: map.get(measurements.$legacy, "typography", "fontSize", "sm") !default;
+$fui-font-size-base: map.get(measurements.$legacy, "typography", "fontSize", "base") !default;
+$fui-font-size-md: map.get(measurements.$legacy, "typography", "fontSize", "md") !default;
+$fui-font-size-lg: map.get(measurements.$legacy, "typography", "fontSize", "lg") !default;
+$fui-font-size-xl: map.get(measurements.$legacy, "typography", "fontSize", "xl") !default;
+$fui-font-size-2xl: map.get(measurements.$legacy, "typography", "fontSize", "2xl") !default;
+$fui-font-size-3xl: map.get(measurements.$legacy, "typography", "fontSize", "3xl") !default;
+$fui-font-size-4xl: map.get(measurements.$legacy, "typography", "fontSize", "4xl") !default;
 
 // Dropdown/popup list items — menus, selects, comboboxes, listboxes, command
 // palettes. One step below chrome text: a popup is a dense list scanned against
@@ -81,23 +78,73 @@ $fui-font-size-4xl: 3.429rem !default; // 48px (hero display)
 // literal in the mixin would let the height calcs drift out of step with it.
 $fui-popup-item-font-size: $fui-font-size-xs !default; // 12px
 
-$fui-font-weight-normal: 400 !default;
-$fui-font-weight-medium: 500 !default;
-$fui-font-weight-semibold: 600 !default;
-$fui-font-weight-bold: 700 !default;
-
-$fui-line-height-tight: 1.25 !default;
-$fui-line-height-normal: 1.5 !default;
-$fui-line-height-relaxed: 1.625 !default;
-$fui-line-height-display: 1.1 !default; // h1/hero — tight for large type
-$fui-line-height-prose: 1.7 !default; // p/li inside long-form reading columns
+$fui-font-weight-normal: map.get(
+  measurements.$legacy,
+  "typography",
+  "fontWeight",
+  "normal"
+) !default;
+$fui-font-weight-medium: map.get(
+  measurements.$legacy,
+  "typography",
+  "fontWeight",
+  "medium"
+) !default;
+$fui-font-weight-semibold: map.get(
+  measurements.$legacy,
+  "typography",
+  "fontWeight",
+  "semibold"
+) !default;
+$fui-font-weight-bold: map.get(measurements.$legacy, "typography", "fontWeight", "bold") !default;
+
+$fui-line-height-tight: map.get(measurements.$legacy, "typography", "lineHeight", "tight") !default;
+$fui-line-height-normal: map.get(
+  measurements.$legacy,
+  "typography",
+  "lineHeight",
+  "normal"
+) !default;
+$fui-line-height-relaxed: map.get(
+  measurements.$legacy,
+  "typography",
+  "lineHeight",
+  "relaxed"
+) !default;
+$fui-line-height-display: map.get(
+  measurements.$legacy,
+  "typography",
+  "lineHeight",
+  "display"
+) !default;
+$fui-line-height-prose: map.get(measurements.$legacy, "typography", "lineHeight", "prose") !default;
 
 // Letter spacing — keep neutral by default so dense product chrome, headings,
 // and generated app surfaces do not drift into separate typographic systems.
-$fui-letter-spacing-tight: 0 !default; // for xl+ headings
-$fui-letter-spacing-normal: normal !default;
-$fui-letter-spacing-display: 0 !default; // for h1/display
-$fui-letter-spacing-wide: 0.05em !default; // uppercase micro-labels (section headings, table/column headers)
+$fui-letter-spacing-tight: map.get(
+  measurements.$legacy,
+  "typography",
+  "letterSpacing",
+  "tight"
+) !default;
+$fui-letter-spacing-normal: map.get(
+  measurements.$legacy,
+  "typography",
+  "letterSpacing",
+  "normal"
+) !default;
+$fui-letter-spacing-display: map.get(
+  measurements.$legacy,
+  "typography",
+  "letterSpacing",
+  "display"
+) !default;
+$fui-letter-spacing-wide: map.get(
+  measurements.$legacy,
+  "typography",
+  "letterSpacing",
+  "wide"
+) !default;
 
 // --------------------------------------------
 // Spacing (derived from density seed)
@@ -141,6 +188,17 @@ $fui-radius-lg: computed.$computed-radius-lg !default;
 $fui-radius-xl: computed.$computed-radius-xl !default;
 $fui-radius-full: computed.$computed-radius-full !default;
 
+// --------------------------------------------
+// Strokes + control tracks (mirror the measurement CSS vars for SCSS fallbacks)
+// --------------------------------------------
+$fui-stroke-hairline: measurements.target-value("stroke", "hairline") !default;
+$fui-stroke-default: measurements.target-value("stroke", "default") !default;
+$fui-stroke-strong: measurements.target-value("stroke", "strong") !default;
+$fui-control-track-micro: measurements.target-value("controlTrack", "micro") !default;
+$fui-control-track-sm: measurements.target-value("controlTrack", "sm") !default;
+$fui-control-track-md: measurements.target-value("controlTrack", "md") !default;
+$fui-control-track-lg: measurements.target-value("controlTrack", "lg") !default;
+
 // --------------------------------------------
 // Transitions
 // --------------------------------------------
@@ -189,9 +247,10 @@ $fui-bg-elevated: computed.$computed-bg-elevated !default;
 $fui-bg-subtle: computed.$computed-bg-subtle !default;
 $fui-bg-hover: computed.$computed-bg-hover !default;
 $fui-bg-active: computed.$computed-bg-active !default;
-// The document canvas stays white in light mode. Component and app surfaces
-// continue to use the computed neutral palette.
-$fui-body-bg: #fff !default;
+// The document canvas is the derived "paper" tone in light mode (carbon 100).
+// Body and main stay on that shared plane; raised component roles provide the
+// contrast instead of consumer-specific page overrides.
+$fui-body-bg: computed.$computed-body-bg !default;
 $fui-main-bg: computed.$computed-main-bg !default;
 
 // Text colors (derived from $fui-neutral palette)
@@ -323,19 +382,23 @@ $fui-breakpoint-xl: 1280px !default;
 // Component-specific tokens
 // --------------------------------------------
 
-// Button heights (derived from density seed)
-$fui-button-height-xs: computed.$computed-button-height-xs !default;
-$fui-button-height-sm: computed.$computed-button-height-sm !default;
-$fui-button-height-md: computed.$computed-button-height-md !default;
-$fui-button-height-lg: computed.$computed-button-height-lg !default;
-$fui-button-outlined-shadow: inset 0 1px 0
-  light-dark(color-mix(in srgb, white 72%, transparent), color-mix(in srgb, white 5%, transparent)) !default;
+// Interactive control heights are fixed geometry. Density still governs
+// composition spacing, but it cannot resize a named control.
+$fui-control-height-xs: measurements.target-value("controlTrack", "micro") !default;
+$fui-control-height-sm: measurements.target-value("controlTrack", "sm") !default;
+$fui-control-height-md: measurements.target-value("controlTrack", "md") !default;
+$fui-control-height-lg: measurements.target-value("controlTrack", "lg") !default;
+
+// Legacy aliases — prefer --fui-control-height-* in new code
+$fui-button-height-xs: $fui-control-height-xs !default;
+$fui-button-height-sm: $fui-control-height-sm !default;
+$fui-button-height-md: $fui-control-height-md !default;
+$fui-button-height-lg: $fui-control-height-lg !default;
+$fui-button-outlined-shadow: none !default;
 
-// Input heights (derived from density seed)
-// Note: These are dedicated input tokens, not reusing button heights
-$fui-input-height: computed.$computed-input-height !default;
-$fui-input-height-sm: computed.$computed-input-height-sm !default;
-$fui-input-height-lg: computed.$computed-input-height-lg !default;
+$fui-input-height-sm: measurements.target-value("fieldTrack", "sm") !default;
+$fui-input-height: measurements.target-value("fieldTrack", "md") !default;
+$fui-input-height-lg: measurements.target-value("fieldTrack", "lg") !default;
 
 // Touch targets (derived from density seed)
 $fui-touch-sm: computed.$computed-touch-sm !default;
@@ -346,37 +409,91 @@ $fui-touch-lg: computed.$computed-touch-lg !default;
 // Keep this token globally available to preserve a product-control floor for
 // touch/pointer targets. WCAG 2.2 allows 24px, but Fragments uses 32px so
 // field controls, toolbar buttons, tabs, and picker triggers align.
-$fui-target-size-min: 2.286rem !default; // 32px
+$fui-target-size-min: map.get(measurements.$legacy, "touch", "minimum") !default;
 $fui-target-size-comfortable: $fui-touch-md !default;
 
-// Icon sizes (standard conventions)
-$fui-icon-xs: 0.857rem !default; // 12px (inline/caption glyphs)
-$fui-icon-sm: 1rem !default; // 14px (2 units)
-$fui-icon-md: 1.143rem !default; // 16px (standard small icon)
-$fui-icon-lg: 1.429rem !default; // 20px (standard medium icon)
-$fui-icon-xl: 1.714rem !default; // 24px (standard large icon)
-$fui-icon-2xl: 2.286rem !default; // 32px (display/empty-state/loading)
+// Fixed icon geometry. The legacy rem records remain frozen for compatibility
+// auditing, while active Sass and runtime values project the accepted px targets.
+$fui-icon-xs: measurements.target-value("icon", "xs") !default;
+$fui-icon-sm: measurements.target-value("icon", "sm") !default;
+$fui-icon-md: measurements.target-value("icon", "md") !default;
+$fui-icon-lg: measurements.target-value("icon", "lg") !default;
+$fui-icon-xl: measurements.target-value("icon", "xl") !default;
+$fui-icon-2xl: measurements.target-value("icon", "2xl") !default;
 
 // Animation offsets
 $fui-anim-offset-sm: 4px !default; // Small slide animation
 $fui-anim-offset-md: 8px !default; // Medium slide animation
 
+// Ambient loop durations — infinite animations (spinners, pulses, shimmer).
+// Easing stays per-effect; duration is the system knob.
+$fui-duration-spin: 800ms !default; // Busy indicators
+$fui-duration-pulse: 1500ms !default; // Breathing / attention loops
+$fui-duration-shimmer: 2000ms !default; // Placeholder shimmer
+
+// Overlay stacking layers (kept adjacent so relative order is auditable)
+$fui-overlay-layer-swipe: 49 !default;
+$fui-overlay-layer-backdrop: 50 !default;
+$fui-overlay-layer-modal: 51 !default;
+$fui-overlay-layer-anchored: 52 !default;
+$fui-overlay-layer-tooltip: 60 !default;
+
 // Sidebar (multi-consumer — used by Sidebar, NavigationMenu, Theme)
 $fui-sidebar-item-height: computed.$computed-sidebar-item-height !default; // density-responsive (compact/default: 32px, relaxed: 36px)
 
 // AppShell Layout
-$fui-appshell-header-height: 56px !default;
+$fui-appshell-header-height: map.get(
+  measurements.$legacy,
+  "navigation",
+  "appShellHeaderHeight"
+) !default;
 $fui-header-z-index: 40 !default;
 
 // CodeBlock background — shared with Markdown's <pre> prose styling — and
 // selection tint are runtime hooks so consuming apps can preserve their own
 // code-surface treatment without forking either component.
-$fui-code-bg: #171717 !default;
+// Light stop is the paper tertiary well — not a second dark grey.
+$fui-code-bg: light-dark(#{$fui-bg-tertiary}, #{$fui-dark-bg-tertiary}) !default;
+// Accent capsule — the tertiary well + wash/hairline, so the earned moment
+// sits *into* the page rather than floating a white slab on it (lifted-verdict
+// direction, 2026-08-22). Do not mix toward black: that paints a dark slab on
+// the light canvas.
+$fui-card-accent-bg: $fui-bg-tertiary !default;
+$fui-card-accent-border: color-mix(in srgb, $fui-color-accent 30%, $fui-border) !default;
+// Softer than a panel: the capsule is a moment, not another card.
+$fui-card-accent-radius: $fui-radius-xl !default;
+// Selection tint tracks the accent (pine light / sage dark), not the button
+// chrome — the ink-first default theme paints buttons with the inverse
+// surface, which would grey out code selection.
 $fui-code-selection-bg: color-mix(
   in srgb,
-  var(--fui-button-primary-base, #006b57) 30%,
+  var(--fui-color-accent, #f56138) 30%,
   transparent
 ) !default;
+// Default code ink follows primary text so unhighlighted fallback and shiki
+// `css-variables` foreground stay on the same contrast floor.
+$fui-code-text: $fui-text-primary !default;
+// Syntax ink for CodeBlock's css-variables theme. Each light stop is ≥ 4.5:1
+// on the light code well; each dark stop is ≥ 4.5:1 on the dark code well
+// (gated by read-safe-contrast.test.ts).
+$fui-code-token-keyword: #9a3412 !default;
+$fui-code-token-string: #166534 !default;
+$fui-code-token-comment: #5c5348 !default;
+$fui-code-token-function: #1e3a8a !default;
+$fui-code-token-number: #92400e !default;
+$fui-code-token-punctuation: #3d3429 !default;
+$fui-code-token-variable: #3d3429 !default;
+$fui-dark-code-token-keyword: #f56138 !default;
+$fui-dark-code-token-string: #7dcea0 !default;
+$fui-dark-code-token-comment: #a89b8c !default;
+$fui-dark-code-token-function: #8cb4e8 !default;
+$fui-dark-code-token-number: #e8b86d !default;
+$fui-dark-code-token-punctuation: #c9c2b8 !default;
+$fui-dark-code-token-variable: #f0ede9 !default;
+// Prose/link ink. Light is a darker accent step so 4.5:1 holds on
+// --fui-app-main-bg; dark keeps the theme accent (already ≥ 4.5).
+$fui-link-ink: #9a3412 !default;
+$fui-dark-link-ink: $fui-dark-color-accent !default;
 
 // --------------------------------------------
 // CSS Custom Properties Export
@@ -394,6 +511,7 @@ $fui-code-selection-bg: color-mix(
     // Base configuration
     font-size: #{$fui-base-font-size};
     --fui-base-unit: #{$fui-base-unit};
+    @include measurements.emit-fixed-custom-properties;
 
     // Seed colors — the 5 configurable seeds exposed as custom properties.
     // Tracks SCSS seed variables, so compile-time customization is reflected.
@@ -468,6 +586,20 @@ $fui-code-selection-bg: color-mix(
     --fui-transition-fast: #{$fui-transition-fast};
     --fui-transition-normal: #{$fui-transition-normal};
 
+    // Motion primitives
+    --fui-anim-offset-sm: #{$fui-anim-offset-sm};
+    --fui-anim-offset-md: #{$fui-anim-offset-md};
+    --fui-duration-spin: #{$fui-duration-spin};
+    --fui-duration-pulse: #{$fui-duration-pulse};
+    --fui-duration-shimmer: #{$fui-duration-shimmer};
+
+    // Overlay stacking layers
+    --fui-overlay-layer-swipe: #{$fui-overlay-layer-swipe};
+    --fui-overlay-layer-backdrop: #{$fui-overlay-layer-backdrop};
+    --fui-overlay-layer-modal: #{$fui-overlay-layer-modal};
+    --fui-overlay-layer-anchored: #{$fui-overlay-layer-anchored};
+    --fui-overlay-layer-tooltip: #{$fui-overlay-layer-tooltip};
+
     // Colors — Accent (light-dark for automatic dark mode)
     --fui-color-accent: light-dark(#{$fui-color-accent}, #{$fui-dark-color-accent});
     --fui-color-on-accent: light-dark(#{$fui-color-on-accent}, #{$fui-dark-color-on-accent});
@@ -569,15 +701,36 @@ $fui-code-selection-bg: color-mix(
     --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
     --fui-border-subtle: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
 
+    // Placeholder fills. A skeleton has to read as a *missing fact* against the
+    // card it sits in — a hairline-weight tint is invisible on paper, so the
+    // base leans on the border colour and the highlight is the shimmer stop.
+    --fui-skeleton: color-mix(in srgb, var(--fui-border-default) 62%, var(--fui-bg-secondary));
+    --fui-skeleton-hi: color-mix(in srgb, var(--fui-border-default) 24%, var(--fui-bg-secondary));
+
     // Native browser text selection tracks the accent (pine in light, sage in
     // dark) as a soft wash — matching the Flight Recorder accent-tint.
     // Component-selected states stay tuned per control density.
     --fui-selection-bg: light-dark(
-      color-mix(in srgb, var(--fui-color-accent, #006b57) 18%, transparent),
-      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 22%, transparent)
+      color-mix(in srgb, var(--fui-color-accent, #f56138) 18%, transparent),
+      color-mix(in srgb, var(--fui-color-accent, #f56138) 22%, transparent)
     );
     --fui-selection-color: var(--fui-text-primary);
 
+    // Persistent neutral selection for navigation, segmented controls, fields,
+    // and rows. Keep this separate from --fui-bg-active: active is the brief
+    // pointer-down state; selected must remain visible without dominating its
+    // surrounding surface.
+    --fui-control-selected-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+
+    // Checked/value controls carry product meaning, so they follow the accent
+    // rather than button chrome. This keeps Checkbox, RadioGroup, and Switch
+    // stable when a consumer customizes primary actions independently.
+    --fui-control-checked-bg: var(--fui-color-accent);
+    --fui-control-checked-bg-hover: var(--fui-color-accent-hover);
+    --fui-control-checked-border: var(--fui-color-accent);
+    --fui-control-checked-border-hover: var(--fui-color-accent-hover);
+    --fui-control-checked-color: var(--fui-color-on-accent);
+
     // Form chrome (shared by Input, Textarea, Select, Combobox, DatePicker,
     // ColorPicker, Editor, and listbox-style controls).
     --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 72%, transparent);
@@ -589,7 +742,7 @@ $fui-code-selection-bg: color-mix(
       var(--fui-border-strong)
     );
     --fui-field-border-focus: var(--fui-text-primary);
-    --fui-field-selection-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-field-selection-bg: var(--fui-control-selected-bg);
     --fui-field-selection-bg-hover: color-mix(in srgb, var(--fui-text-primary) 11%, transparent);
     --fui-field-selection-border: var(--fui-border-strong);
     --fui-field-selection-color: var(--fui-text-primary);
@@ -614,96 +767,55 @@ $fui-code-selection-bg: color-mix(
     --fui-kbd-radius: var(--fui-radius-sm);
     --fui-kbd-reserved-width: 2.714rem; // 38px, enough for "⌘K"
 
-    // Button chrome. Primary fill = pine. Border/color are shared; the fill
-    // treatment and radius branch on the brand: the Fragments default renders a
-    // FLAT solid pill (hybrid-skin), while consumer-branded builds keep the
-    // raised-gradient recipe with crisp border, top highlight, and pressed inset.
-    --fui-button-primary-base: light-dark(#006b57, #006b57);
-    --fui-button-primary-hover: light-dark(#187762, #187762);
-    --fui-button-primary-active: light-dark(#005f4c, #005f4c);
-    --fui-button-primary-border-hover: color-mix(
-      in srgb,
-      var(--fui-button-primary-active) 86%,
-      black 14%
-    );
-    --fui-button-primary-border: color-mix(
-      in srgb,
-      var(--fui-button-primary-active) 74%,
-      black 26%
-    );
-    --fui-button-primary-color: #fff;
-
+    // Button chrome. Every theme uses flat fills: hierarchy comes from colour,
+    // border, and state contrast rather than a second raised/gradient material.
+    //
+    // The Fragments default is ink-first: the primary action wears the inverse
+    // surface (near-black on paper, near-white on charcoal) with the accent
+    // reserved for meaning — links, selection, focus, "contract passing".
+    // A consumer-supplied $fui-brand switches primary chrome to the accent
+    // ramp so their brand colour actually paints their buttons (previously the
+    // chrome stayed pine regardless of seed).
     @if $fui-brand-is-default {
-      // Flat solid pill — hybrid-skin treatment.
-      --fui-button-radius: var(--fui-radius-full);
-      --fui-button-primary-bg: var(--fui-button-primary-base);
-      --fui-button-primary-bg-hover: var(--fui-button-primary-hover);
-      --fui-button-primary-bg-active: var(--fui-button-primary-active);
-      --fui-button-primary-shadow: none;
-      --fui-button-primary-shadow-active: inset
-        0
-        1px
-        2px
-        color-mix(in srgb, black 22%, transparent);
-    } @else {
-      // Raised-gradient recipe for consumer-branded builds.
-      --fui-button-radius: var(--fui-radius-lg);
-      --fui-button-primary-bg: linear-gradient(
-        to bottom,
-        color-mix(in srgb, var(--fui-button-primary-base) 78%, white 22%) 0%,
-        var(--fui-button-primary-base) 52%,
-        color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 100%
-      );
-      --fui-button-primary-bg-hover: linear-gradient(
-        to bottom,
-        color-mix(in srgb, var(--fui-button-primary-hover) 76%, white 24%) 0%,
-        var(--fui-button-primary-hover) 52%,
-        color-mix(in srgb, var(--fui-button-primary-active) 84%, black 16%) 100%
+      --fui-button-primary-base: var(--fui-bg-inverse);
+      --fui-button-primary-hover: light-dark(
+        color-mix(in srgb, var(--fui-bg-inverse) 88%, white),
+        #ffffff
       );
-      --fui-button-primary-bg-active: linear-gradient(
-        to bottom,
-        color-mix(in srgb, var(--fui-button-primary-active) 88%, black 12%) 0%,
-        var(--fui-button-primary-active) 100%
+      --fui-button-primary-active: light-dark(
+        color-mix(in srgb, var(--fui-bg-inverse) 92%, black),
+        color-mix(in srgb, var(--fui-bg-inverse) 94%, black)
       );
-      --fui-button-primary-shadow:
-        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
-        inset 0 -1px 0 color-mix(in srgb, black 18%, transparent),
-        0 1px 1px color-mix(in srgb, black 16%, transparent);
-      --fui-button-primary-shadow-active:
-        inset 0 1px 2px color-mix(in srgb, black 30%, transparent),
-        0 1px 0 color-mix(in srgb, white 8%, transparent);
+      --fui-button-primary-color: var(--fui-text-inverse);
+      --fui-button-radius: var(--fui-radius-xl);
+    } @else {
+      --fui-button-primary-base: var(--fui-color-accent);
+      --fui-button-primary-hover: var(--fui-color-accent-hover);
+      --fui-button-primary-active: var(--fui-color-accent-active);
+      --fui-button-primary-color: var(--fui-color-on-accent);
+      --fui-button-radius: var(--fui-radius-lg);
     }
 
-    --fui-button-neutral-bg: linear-gradient(
-      to bottom,
-      light-dark(
-          color-mix(in srgb, var(--fui-bg-elevated) 97%, var(--fui-text-primary) 3%),
-          color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 12%)
-        )
-        0%,
-      light-dark(
-          color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%),
-          color-mix(in srgb, var(--fui-bg-elevated) 96%, var(--fui-text-primary) 4%)
-        )
-        100%
+    --fui-button-primary-border: var(--fui-button-primary-base);
+    --fui-button-primary-border-hover: var(--fui-button-primary-hover);
+
+    --fui-button-primary-bg: var(--fui-button-primary-base);
+    --fui-button-primary-bg-hover: var(--fui-button-primary-hover);
+    --fui-button-primary-bg-active: var(--fui-button-primary-active);
+    --fui-button-primary-shadow: none;
+    --fui-button-primary-shadow-active: none;
+
+    --fui-button-neutral-bg: light-dark(
+      color-mix(in srgb, var(--fui-bg-elevated) 94%, var(--fui-text-primary) 6%),
+      color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%)
     );
-    --fui-button-neutral-bg-hover: linear-gradient(
-      to bottom,
-      light-dark(
-          color-mix(in srgb, var(--fui-bg-elevated) 99%, var(--fui-text-primary) 1%),
-          color-mix(in srgb, var(--fui-bg-elevated) 82%, var(--fui-text-primary) 18%)
-        )
-        0%,
-      light-dark(
-          color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 12%),
-          color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%)
-        )
-        100%
+    --fui-button-neutral-bg-hover: light-dark(
+      color-mix(in srgb, var(--fui-bg-elevated) 90%, var(--fui-text-primary) 10%),
+      color-mix(in srgb, var(--fui-bg-elevated) 86%, var(--fui-text-primary) 14%)
     );
-    --fui-button-neutral-bg-active: linear-gradient(
-      to bottom,
-      color-mix(in srgb, var(--fui-bg-elevated) 82%, var(--fui-text-primary) 18%) 0%,
-      color-mix(in srgb, var(--fui-bg-elevated) 90%, var(--fui-text-primary) 10%) 100%
+    --fui-button-neutral-bg-active: light-dark(
+      color-mix(in srgb, var(--fui-bg-elevated) 84%, var(--fui-text-primary) 16%),
+      color-mix(in srgb, var(--fui-bg-elevated) 80%, var(--fui-text-primary) 20%)
     );
     --fui-button-neutral-border: color-mix(
       in srgb,
@@ -716,21 +828,39 @@ $fui-code-selection-bg: color-mix(
       var(--fui-text-primary) 42%
     );
     --fui-button-neutral-color: var(--fui-text-primary);
-    --fui-button-outlined-shadow: #{$fui-button-outlined-shadow};
-    --fui-button-neutral-shadow:
-      inset 0 1px 0
-        light-dark(
-          color-mix(in srgb, white 88%, transparent),
-          color-mix(in srgb, white 7%, transparent)
-        ),
-      inset 0 -1px 0 color-mix(in srgb, var(--fui-text-primary) 7%, transparent),
-      0 1px 1px color-mix(in srgb, black 12%, transparent);
-    --fui-button-neutral-shadow-active:
-      inset 0 1px 2px color-mix(in srgb, black 16%, transparent),
-      inset 0 0 0 1px color-mix(in srgb, var(--fui-text-primary) 6%, transparent);
+    --fui-button-outlined-shadow: none;
+    --fui-button-neutral-shadow: none;
+    --fui-button-neutral-shadow-active: none;
 
     --fui-code-bg: #{$fui-code-bg};
     --fui-code-selection-bg: #{$fui-code-selection-bg};
+    --fui-code-text: var(--fui-text-primary);
+    --fui-code-token-keyword: light-dark(
+      #{$fui-code-token-keyword},
+      #{$fui-dark-code-token-keyword}
+    );
+    --fui-code-token-string: light-dark(#{$fui-code-token-string}, #{$fui-dark-code-token-string});
+    --fui-code-token-comment: light-dark(
+      #{$fui-code-token-comment},
+      #{$fui-dark-code-token-comment}
+    );
+    --fui-code-token-function: light-dark(
+      #{$fui-code-token-function},
+      #{$fui-dark-code-token-function}
+    );
+    --fui-code-token-number: light-dark(#{$fui-code-token-number}, #{$fui-dark-code-token-number});
+    --fui-code-token-punctuation: light-dark(
+      #{$fui-code-token-punctuation},
+      #{$fui-dark-code-token-punctuation}
+    );
+    --fui-code-token-variable: light-dark(
+      #{$fui-code-token-variable},
+      #{$fui-dark-code-token-variable}
+    );
+    --fui-link-ink: light-dark(#{$fui-link-ink}, #{$fui-dark-link-ink});
+    --fui-card-accent-bg: var(--fui-bg-tertiary);
+    --fui-card-accent-border: color-mix(in srgb, var(--fui-color-accent) 30%, var(--fui-border));
+    --fui-card-accent-radius: #{$fui-card-accent-radius};
 
     // Popup/menu active-item highlight — neutral, deliberately stronger than
     // --fui-bg-hover (which is tuned for subtle surface hovers and reads as ~invisible
@@ -741,15 +871,18 @@ $fui-code-selection-bg: color-mix(
     // Product shell and navigation chrome. These stay neutral-first so a
     // dashboard page reads as one system instead of brand-tinted islands.
     --fui-app-canvas-bg: var(--fui-body-bg);
-    --fui-app-main-bg: var(--fui-main-bg);
-    --fui-app-sidebar-bg: color-mix(in srgb, var(--fui-bg-primary) 78%, var(--fui-bg-secondary));
+    // Same surface order in both themes: the rail is recessed, the main
+    // reading sheet is raised. Light: tertiary paper rail, body-bg sheet.
+    // Dark keeps the lifted rail on a deeper body.
+    --fui-app-main-bg: var(--fui-body-bg);
+    --fui-app-sidebar-bg: var(--fui-bg-tertiary);
     --fui-sidebar-bg: var(--fui-app-sidebar-bg);
     --fui-sidebar-border: var(--fui-border-default);
     --fui-sidebar-item-color: var(--fui-text-secondary);
     --fui-sidebar-item-icon-color: var(--fui-text-tertiary);
     --fui-sidebar-item-hover-bg: var(--fui-bg-hover);
     --fui-sidebar-item-hover-color: var(--fui-text-primary);
-    --fui-sidebar-item-active-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-sidebar-item-active-bg: var(--fui-control-selected-bg);
     --fui-sidebar-item-active-border: transparent;
     --fui-sidebar-item-active-color: var(--fui-text-primary);
     --fui-sidebar-item-active-indicator: transparent;
@@ -760,6 +893,11 @@ $fui-code-selection-bg: color-mix(
     --fui-badge-dot-color: currentColor;
     --fui-card-radius: var(--fui-radius-lg);
     --fui-card-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent);
+    // Full-bleed card chrome (for example `Card.Header divided`) shares the
+    // raised-neutral plane with shell controls. Keep the semantic alias
+    // component-specific so consumers can tune card hierarchy without
+    // changing every subtle surface.
+    --fui-card-header-bg: var(--fui-bg-subtle);
     --fui-card-border: color-mix(in srgb, var(--fui-border-default) 86%, transparent);
     --fui-card-outlined-border: var(--fui-card-border);
     --fui-card-shadow: inset 0 1px 0
@@ -792,7 +930,7 @@ $fui-code-selection-bg: color-mix(
     --fui-table-header-border: var(--fui-border-strong);
     --fui-table-row-hover-bg: var(--fui-bg-hover);
     --fui-table-row-active-bg: var(--fui-bg-active);
-    --fui-table-row-selected-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-table-row-selected-bg: var(--fui-control-selected-bg);
     --fui-table-row-selected-border: var(--fui-border-strong);
     --fui-table-subrow-bg: color-mix(in srgb, var(--fui-bg-secondary) 62%, transparent);
 
@@ -800,13 +938,18 @@ $fui-code-selection-bg: color-mix(
     --fui-tabs-pills-bg: color-mix(in srgb, var(--fui-text-primary) 5%, transparent);
     --fui-tabs-pills-border: var(--fui-border-default);
     --fui-tabs-pill-hover-bg: transparent;
-    --fui-tabs-pill-active-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-tabs-pill-active-bg: var(--fui-control-selected-bg);
     --fui-tabs-pill-active-border: transparent;
     --fui-tabs-pill-active-shadow: none;
-    --fui-toggle-group-selected-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-toggle-group-selected-bg: var(--fui-control-selected-bg);
     --fui-toggle-group-selected-border: transparent;
     --fui-toggle-group-selected-shadow: none;
 
+    // Header search is persistent shell chrome rather than a ghost action.
+    // One surface step above divided card headers keeps this global affordance
+    // easy to find in both themes without turning it into a selected control.
+    --fui-header-search-bg: var(--fui-bg-hover);
+
     // Shadows (not <color> type — light-dark() can't be used, handled in dark overrides)
     --fui-shadow-sm: #{$fui-shadow-sm};
     --fui-shadow-md: #{$fui-shadow-md};
@@ -826,14 +969,18 @@ $fui-code-selection-bg: color-mix(
       #{$fui-dark-scrollbar-thumb-hover}
     );
 
-    // Component heights (density-responsive)
-    --fui-button-height-xs: #{$fui-button-height-xs};
-    --fui-button-height-sm: #{$fui-button-height-sm};
-    --fui-button-height-md: #{$fui-button-height-md};
-    --fui-button-height-lg: #{$fui-button-height-lg};
-    --fui-input-height-sm: #{$fui-input-height-sm};
-    --fui-input-height: #{$fui-input-height};
-    --fui-input-height-lg: #{$fui-input-height-lg};
+    // Fixed component tracks plus compatibility aliases.
+    --fui-control-height-xs: #{$fui-control-height-xs};
+    --fui-control-height-sm: #{$fui-control-height-sm};
+    --fui-control-height-md: #{$fui-control-height-md};
+    --fui-control-height-lg: #{$fui-control-height-lg};
+    --fui-button-height-xs: var(--fui-control-height-xs);
+    --fui-button-height-sm: var(--fui-control-height-sm);
+    --fui-button-height-md: var(--fui-control-height-md);
+    --fui-button-height-lg: var(--fui-control-height-lg);
+    --fui-input-height-sm: var(--fui-field-track-sm);
+    --fui-input-height: var(--fui-field-track-md);
+    --fui-input-height-lg: var(--fui-field-track-lg);
 
     // Touch targets (density-responsive, Fragments control floor: ≥32px)
     --fui-touch-sm: #{$fui-touch-sm};
@@ -847,14 +994,22 @@ $fui-code-selection-bg: color-mix(
     // AppShell Layout
     --fui-appshell-header-height: #{$fui-appshell-header-height};
     --fui-header-z-index: #{$fui-header-z-index};
+  }
+
+  // Named runtime selectors use the same generated profiles as compile-time
+  // Sass seeds. Attribute specificity intentionally matches :root so these
+  // later rules can override the compiled default on either the document root
+  // or a scoped provider without inline numeric maps.
+  @each $density in measurements.$density-profile-names {
+    [data-fui-density="#{$density}"] {
+      @include measurements.emit-density-profile($density);
+    }
+  }
 
-    // Icon sizes (single source of truth — components must not hardcode SVG box sizes)
-    --fui-icon-xs: #{$fui-icon-xs};
-    --fui-icon-sm: #{$fui-icon-sm};
-    --fui-icon-md: #{$fui-icon-md};
-    --fui-icon-lg: #{$fui-icon-lg};
-    --fui-icon-xl: #{$fui-icon-xl};
-    --fui-icon-2xl: #{$fui-icon-2xl};
+  @each $radius-style in measurements.$radius-profile-names {
+    [data-fui-radius-style="#{$radius-style}"] {
+      @include measurements.emit-radius-profile($radius-style);
+    }
   }
 
   // Dark mode via data-theme attribute (manual toggle).
@@ -1076,6 +1231,11 @@ $fui-code-selection-bg: color-mix(
   --fui-bg-highlight: color-mix(in srgb, var(--fui-text-primary) 10%, transparent);
   --fui-body-bg: #{$fui-dark-body-bg};
   --fui-main-bg: #{$fui-dark-main-bg};
+  --fui-app-main-bg: var(--fui-main-bg);
+  // Paper primary == secondary in dark, so a mix of the two is a no-op.
+  // Tertiary is the lifted rail; main stays the deeper body.
+  --fui-app-sidebar-bg: var(--fui-bg-tertiary);
+  --fui-sidebar-bg: var(--fui-app-sidebar-bg);
   --fui-bg-inverse: #{$fui-dark-bg-inverse};
 
   // Text