@usefragments/ui 1.6.0 → 2.0.0

package/src/tokens/_variables.scss

@@ -14,7 +14,6 @@
 //      @use '@usefragments/ui/styles' with (
 //        $fui-brand: #0066ff,
 //        $fui-neutral: "ice",
-//        $fui-density: "compact"
 //      );
 //
 // 2. CSS CUSTOM PROPERTIES (Runtime theming):
@@ -40,15 +39,18 @@ $fui-base-unit: computed.$computed-base-unit !default;
 // Helper function to convert base units to rem
 // Usage: fui-unit(2) = 2 * 7px = 14px = 1rem (when base is 14px)
 @function fui-unit($multiplier) {
-  @return calc(#{$multiplier} * #{$fui-base-unit} / #{$fui-base-font-size} * 1rem);
+  @return calc(
+    #{$multiplier} * #{$fui-base-unit} / #{$fui-base-font-size} * 1rem *
+      var(--fui-scale, #{$fui-scale})
+  );
 }
 
 // --------------------------------------------
 // Typography
 // --------------------------------------------
 $fui-font-sans:
-  "Inter Variable",
-  Inter,
+  "Onest Variable",
+  Onest,
   -apple-system,
   BlinkMacSystemFont,
   "Segoe UI",
@@ -147,7 +149,7 @@ $fui-letter-spacing-wide: map.get(
 ) !default;
 
 // --------------------------------------------
-// Spacing (derived from density seed)
+// Spacing (derived from the measurement spacing record)
 // --------------------------------------------
 // Micro-spacing for small internal alignments (margins, thumb offsets)
 $fui-space-px: computed.$computed-space-px !default;
@@ -187,6 +189,40 @@ $fui-radius-md: computed.$computed-radius-md !default;
 $fui-radius-lg: computed.$computed-radius-lg !default;
 $fui-radius-xl: computed.$computed-radius-xl !default;
 $fui-radius-full: computed.$computed-radius-full !default;
+/// Square corners where a shape must not follow the radius profile (joined
+/// segments, skeleton blocks, code gutters).
+$fui-radius-none: 0px !default;
+
+// Radius nesting levels. A surface (l1) holds controls (l2) which hold marks
+// (l3); each level maps onto the active radius profile, so concentric corners
+// stay concentric when a consumer switches `sharp`, `rounded`, or `pill`.
+$fui-radius-l1: $fui-radius-lg !default;
+$fui-radius-l2: $fui-radius-md !default;
+$fui-radius-l3: $fui-radius-sm !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;
+
+// The one disabled treatment: every disabled control fades by this amount.
+$fui-opacity-disabled: 0.5 !default;
+/// Dimmed-but-live: secondary glyphs, collapsed rails, decorative rules.
+$fui-opacity-muted: 0.7 !default;
+/// Barely-there: pulse rings and glow tracks that animate up from almost nothing.
+$fui-opacity-faint: 0.3 !default;
+/// Hairline drawn around a selected segmented item (transparent unless a theme wants it).
+$fui-control-selected-border: transparent !default;
+
+// Runtime multiplier on the base unit. `fui-unit()` reads it so a consumer can
+// scale the whole measurement system from one custom property.
+$fui-scale: 1 !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
@@ -236,9 +272,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)
@@ -370,8 +407,8 @@ $fui-breakpoint-xl: 1280px !default;
 // Component-specific tokens
 // --------------------------------------------
 
-// Interactive control heights are fixed geometry. Density still governs
-// composition spacing, but it cannot resize a named control.
+// Interactive control heights are fixed geometry; the spacing scale 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;
@@ -388,7 +425,7 @@ $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)
+// Touch targets (from the measurement spacing record)
 $fui-touch-sm: computed.$computed-touch-sm !default;
 $fui-touch-md: computed.$computed-touch-md !default;
 $fui-touch-lg: computed.$computed-touch-lg !default;
@@ -413,8 +450,22 @@ $fui-icon-2xl: measurements.target-value("icon", "2xl") !default;
 $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-toast: 55 !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)
+$fui-sidebar-item-height: computed.$computed-sidebar-item-height !default;
 
 // AppShell Layout
 $fui-appshell-header-height: map.get(
@@ -427,12 +478,48 @@ $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
@@ -493,19 +580,19 @@ $fui-code-selection-bg: color-mix(
 
     // Spacing (micro)
     --fui-space-px: #{$fui-space-px};
-    --fui-space-0-5: #{$fui-space-0-5};
-    --fui-space-0-75: #{$fui-space-0-75};
+    --fui-space-0-5: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-5});
+    --fui-space-0-75: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-75});
 
     // Spacing
-    --fui-space-1: #{$fui-space-1};
-    --fui-space-2: #{$fui-space-2};
-    --fui-space-3: #{$fui-space-3};
-    --fui-space-4: #{$fui-space-4};
-    --fui-space-5: #{$fui-space-5};
-    --fui-space-6: #{$fui-space-6};
-    --fui-space-8: #{$fui-space-8};
-    --fui-space-10: #{$fui-space-10};
-    --fui-space-12: #{$fui-space-12};
+    --fui-space-1: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-1});
+    --fui-space-2: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-2});
+    --fui-space-3: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-3});
+    --fui-space-4: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-4});
+    --fui-space-5: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-5});
+    --fui-space-6: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-6});
+    --fui-space-8: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-8});
+    --fui-space-10: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-10});
+    --fui-space-12: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-12});
 
     // Popup geometry — the numbers Select/Listbox/Combobox derive their scroll
     // viewport from. Override these and the peek height follows.
@@ -520,11 +607,34 @@ $fui-code-selection-bg: color-mix(
     --fui-radius-lg: #{$fui-radius-lg};
     --fui-radius-xl: #{$fui-radius-xl};
     --fui-radius-full: #{$fui-radius-full};
+    --fui-radius-none: #{$fui-radius-none};
+    --fui-radius-l1: var(--fui-radius-lg);
+    --fui-radius-l2: var(--fui-radius-md);
+    --fui-radius-l3: var(--fui-radius-sm);
 
     // Transitions
     --fui-transition-fast: #{$fui-transition-fast};
+    --fui-opacity-disabled: #{$fui-opacity-disabled};
+    --fui-opacity-muted: #{$fui-opacity-muted};
+    --fui-opacity-faint: #{$fui-opacity-faint};
+    --fui-scale: #{$fui-scale};
     --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-toast: #{$fui-overlay-layer-toast};
+    --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});
@@ -626,27 +736,40 @@ $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);
 
-    // 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);
-    --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 78%, var(--fui-bg-primary));
-    --fui-field-border: var(--fui-border-strong);
-    --fui-field-border-hover: color-mix(
-      in srgb,
-      var(--fui-text-tertiary) 46%,
-      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);
+    // 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);
+    --fui-control-selected-border: #{$fui-control-selected-border};
+
+    // 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);
+
+    // Field shells take their edge and ground from --fui-border / --fui-bg-primary
+    // through the field recipe; only selection chrome needs its own hooks.
+    --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);
@@ -673,28 +796,36 @@ $fui-code-selection-bg: color-mix(
 
     // Button chrome. Every theme uses flat fills: hierarchy comes from colour,
     // border, and state contrast rather than a second raised/gradient material.
-    // Radius remains brand-aware for compatibility with consumer themes.
-    --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;
-
+    //
+    // 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 {
-      --fui-button-radius: var(--fui-radius-full);
+      --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-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-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-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);
@@ -730,6 +861,33 @@ $fui-code-selection-bg: color-mix(
 
     --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
@@ -740,15 +898,20 @@ $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-radius: var(--fui-radius-full);
+    --fui-sidebar-section-label-size: var(--fui-font-size-xs);
     --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;
@@ -759,6 +922,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
@@ -791,7 +959,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);
 
@@ -799,16 +967,11 @@ $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-border: transparent;
-    --fui-tabs-pill-active-shadow: none;
-    --fui-toggle-group-selected-bg: var(--fui-selection-bg);
-    --fui-toggle-group-selected-border: color-mix(
-      in srgb,
-      var(--fui-color-accent) 42%,
-      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};
@@ -842,13 +1005,13 @@ $fui-code-selection-bg: color-mix(
     --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)
+    // Touch targets (Fragments control floor: ≥32px)
     --fui-touch-sm: #{$fui-touch-sm};
     --fui-touch-md: #{$fui-touch-md};
     --fui-touch-lg: #{$fui-touch-lg};
     --fui-target-size-min: #{$fui-target-size-min};
 
-    // Sidebar (density-responsive)
+    // Sidebar
     --fui-sidebar-item-height: #{$fui-sidebar-item-height};
 
     // AppShell Layout
@@ -860,12 +1023,6 @@ $fui-code-selection-bg: color-mix(
   // 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);
-    }
-  }
-
   @each $radius-style in measurements.$radius-profile-names {
     [data-fui-radius-style="#{$radius-style}"] {
       @include measurements.emit-radius-profile($radius-style);
@@ -1019,31 +1176,32 @@ $fui-code-selection-bg: color-mix(
   * {
     // Firefox
     scrollbar-width: thin;
-    scrollbar-color: var(--fui-scrollbar-thumb) var(--fui-scrollbar-track);
+    scrollbar-color: var(--fui-scrollbar-thumb, #{$fui-scrollbar-thumb})
+      var(--fui-scrollbar-track, #{$fui-scrollbar-track});
   }
 
   // Webkit browsers (Chrome, Safari, Edge)
   *::-webkit-scrollbar {
-    width: var(--fui-scrollbar-width);
-    height: var(--fui-scrollbar-width);
+    width: var(--fui-scrollbar-width, #{$fui-scrollbar-width});
+    height: var(--fui-scrollbar-width, #{$fui-scrollbar-width});
   }
 
   *::-webkit-scrollbar-track {
-    background: var(--fui-scrollbar-track);
-    border-radius: calc(var(--fui-scrollbar-width) / 2);
+    background: var(--fui-scrollbar-track, #{$fui-scrollbar-track});
+    border-radius: calc(var(--fui-scrollbar-width, #{$fui-scrollbar-width}) / 2);
   }
 
   *::-webkit-scrollbar-thumb {
-    background: var(--fui-scrollbar-thumb);
-    border-radius: calc(var(--fui-scrollbar-width) / 2);
+    background: var(--fui-scrollbar-thumb, #{$fui-scrollbar-thumb});
+    border-radius: calc(var(--fui-scrollbar-width, #{$fui-scrollbar-width}) / 2);
 
     &:hover {
-      background: var(--fui-scrollbar-thumb-hover);
+      background: var(--fui-scrollbar-thumb-hover, #{$fui-scrollbar-thumb-hover});
     }
   }
 
   *::-webkit-scrollbar-corner {
-    background: var(--fui-scrollbar-track);
+    background: var(--fui-scrollbar-track, #{$fui-scrollbar-track});
   }
 }
 
@@ -1059,16 +1217,10 @@ $fui-code-selection-bg: color-mix(
   // Ensure minimum contrast on interactive elements
   --fui-bg-hover: rgba(0, 0, 0, 0.12);
   --fui-bg-active: rgba(0, 0, 0, 0.18);
-  --fui-field-border: var(--fui-text-primary);
-  --fui-field-border-hover: var(--fui-text-primary);
-  --fui-field-border-focus: var(--fui-color-accent);
   --fui-field-selection-border: var(--fui-color-accent);
   --fui-form-group-border: var(--fui-text-primary);
   --fui-sidebar-item-active-border: var(--fui-text-primary);
-  --fui-tabs-pill-active-border: var(--fui-text-primary);
-  --fui-tabs-pill-active-shadow: inset 0 0 0 1px var(--fui-tabs-pill-active-border);
-  --fui-toggle-group-selected-border: var(--fui-text-primary);
-  --fui-toggle-group-selected-shadow: inset 0 0 0 1px var(--fui-toggle-group-selected-border);
+  --fui-control-selected-border: var(--fui-text-primary);
 }
 
 // Private mixin for dark mode token values
@@ -1091,6 +1243,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