@usefragments/ui 1.0.0

package/src/tokens/_variables.scss

@@ -0,0 +1,1045 @@
+// ============================================
+// @usefragments/ui Design Tokens
+// ============================================
+//
+// SEED-BASED DESIGN SYSTEM
+// ========================
+// This token system supports two configuration approaches:
+//
+// 1. SEED-BASED (Recommended for new projects):
+//    Configure ~5-10 seed values and everything derives automatically.
+//    See _seeds.scss for available seeds.
+//
+//    Example:
+//      @use '@usefragments/ui/styles' with (
+//        $fui-brand: #0066ff,
+//        $fui-neutral: "ice",
+//        $fui-density: "compact"
+//      );
+//
+// 2. CSS CUSTOM PROPERTIES (Runtime theming):
+//    Override CSS custom properties at runtime for dynamic theming.
+// ============================================
+
+// Import computed values from seed system
+@use "computed" as computed;
+
+// --------------------------------------------
+// Base Configuration
+// --------------------------------------------
+// Base font size: 14px (change to 16px for larger UI)
+// Base unit: 7px (change to 8px for standard 8pt grid)
+// All spacing and sizing derives from these values.
+
+$fui-base-font-size: computed.$computed-base-font-size !default;
+$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);
+}
+
+// --------------------------------------------
+// Typography
+// --------------------------------------------
+$fui-font-sans:
+  "Geist Sans",
+  "Geist",
+  Inter,
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  sans-serif !default;
+$fui-font-mono:
+  "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", 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)
+
+$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
+
+// 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)
+
+// --------------------------------------------
+// Spacing (derived from density seed)
+// --------------------------------------------
+// Micro-spacing for small internal alignments (margins, thumb offsets)
+$fui-space-px: computed.$computed-space-px !default;
+$fui-space-0-5: computed.$computed-space-0-5 !default;
+$fui-space-0-75: computed.$computed-space-0-75 !default;
+
+// Base unit grid spacing
+$fui-space-1: computed.$computed-space-1 !default;
+$fui-space-2: computed.$computed-space-2 !default;
+$fui-space-3: computed.$computed-space-3 !default;
+$fui-space-4: computed.$computed-space-4 !default;
+$fui-space-5: computed.$computed-space-5 !default;
+$fui-space-6: computed.$computed-space-6 !default;
+$fui-space-8: computed.$computed-space-8 !default;
+$fui-space-10: computed.$computed-space-10 !default;
+$fui-space-12: computed.$computed-space-12 !default;
+
+// --------------------------------------------
+// Border Radius (derived from radius-style seed)
+// --------------------------------------------
+$fui-radius-sm: computed.$computed-radius-sm !default;
+$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;
+
+// --------------------------------------------
+// Transitions
+// --------------------------------------------
+$fui-transition-fast: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !default; // Snappy easeOut for chrome
+$fui-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1) !default; // Standard material-style easing
+
+// --------------------------------------------
+// Colors - Light Mode (derived from brand/neutral seeds)
+// --------------------------------------------
+// Accent colors (derived from $fui-brand seed)
+$fui-color-accent: computed.$computed-color-accent !default;
+$fui-color-on-accent: computed.$computed-color-on-accent !default;
+$fui-color-accent-hover: computed.$computed-color-accent-hover !default;
+$fui-color-accent-active: computed.$computed-color-accent-active !default;
+
+// Semantic colors (from seeds or defaults)
+$fui-color-danger: computed.$computed-color-danger !default;
+$fui-color-danger-hover: computed.$computed-color-danger-hover !default;
+$fui-color-success: computed.$computed-color-success !default;
+$fui-color-warning: computed.$computed-color-warning !default;
+$fui-color-info: computed.$computed-color-info !default;
+
+// Semantic backgrounds (light)
+$fui-color-danger-bg: computed.$computed-color-danger-bg !default;
+$fui-color-success-bg: computed.$computed-color-success-bg !default;
+$fui-color-warning-bg: computed.$computed-color-warning-bg !default;
+$fui-color-info-bg: computed.$computed-color-info-bg !default;
+
+// Semantic text colors (WCAG AA contrast-safe on semantic backgrounds)
+$fui-color-danger-text: computed.$computed-color-danger-text !default;
+$fui-color-success-text: computed.$computed-color-success-text !default;
+$fui-color-warning-text: computed.$computed-color-warning-text !default;
+$fui-color-info-text: computed.$computed-color-info-text !default;
+
+// Semantic borders (fallbacks for --fui-color-*-border CSS custom properties)
+$fui-color-danger-border: color-mix(in srgb, $fui-color-danger-text 30%, transparent) !default;
+$fui-color-success-border: color-mix(in srgb, $fui-color-success-text 28%, transparent) !default;
+$fui-color-warning-border: color-mix(in srgb, $fui-color-warning-text 28%, transparent) !default;
+$fui-color-info-border: color-mix(in srgb, $fui-color-info-text 30%, transparent) !default;
+
+// Surface colors (derived from $fui-neutral palette)
+$fui-bg-primary: computed.$computed-bg-primary !default;
+$fui-bg-secondary: computed.$computed-bg-secondary !default;
+$fui-bg-tertiary: computed.$computed-bg-tertiary !default;
+$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;
+$fui-main-bg: computed.$computed-main-bg !default;
+
+// Text colors (derived from $fui-neutral palette)
+$fui-text-primary: computed.$computed-text-primary !default;
+$fui-text-secondary: computed.$computed-text-secondary !default;
+$fui-text-tertiary: computed.$computed-text-tertiary !default;
+$fui-text-inverse: computed.$computed-text-inverse !default;
+
+// Inverse surface — a themed surface that flips relative to the active theme
+// (dark surface in light mode, light surface in dark mode). Used by tooltips
+// and any always-contrasting chip. Pairs with $fui-text-inverse for its text.
+$fui-bg-inverse: $fui-text-primary !default;
+
+// Border colors (derived from $fui-neutral palette)
+$fui-border: computed.$computed-border !default;
+$fui-border-default: computed.$computed-border-default !default;
+$fui-border-strong: computed.$computed-border-strong !default;
+
+// Shadows (light)
+$fui-shadow-sm: computed.$computed-shadow-sm !default;
+$fui-shadow-md: computed.$computed-shadow-md !default;
+$fui-shadow-lg: computed.$computed-shadow-lg !default;
+
+// Focus ring (derived from $fui-brand)
+$fui-focus-ring-color: computed.$computed-focus-ring-color !default;
+$fui-focus-ring-offset: 2px !default;
+$fui-focus-ring-width: 1px !default;
+
+// Scrollbar (derived from $fui-neutral palette)
+$fui-scrollbar-width: 8px !default;
+$fui-scrollbar-track: computed.$computed-scrollbar-track !default;
+$fui-scrollbar-thumb: computed.$computed-scrollbar-thumb !default;
+$fui-scrollbar-thumb-hover: computed.$computed-scrollbar-thumb-hover !default;
+
+// --------------------------------------------
+// Colors - Dark Mode (derived from seeds)
+// --------------------------------------------
+// Accent colors (brand used directly in dark mode; on-accent handles text contrast)
+$fui-dark-color-accent: computed.$computed-dark-color-accent !default;
+$fui-dark-color-on-accent: computed.$computed-dark-color-on-accent !default;
+$fui-dark-color-accent-hover: computed.$computed-dark-color-accent-hover !default;
+$fui-dark-color-accent-active: computed.$computed-dark-color-accent-active !default;
+
+// Surface colors (dark) - derived from $fui-neutral palette
+$fui-dark-bg-primary: computed.$computed-dark-bg-primary !default;
+$fui-dark-bg-secondary: computed.$computed-dark-bg-secondary !default;
+$fui-dark-bg-tertiary: computed.$computed-dark-bg-tertiary !default;
+$fui-dark-bg-elevated: computed.$computed-dark-bg-elevated !default;
+$fui-dark-bg-subtle: computed.$computed-dark-bg-subtle !default;
+$fui-dark-bg-hover: computed.$computed-dark-bg-hover !default;
+$fui-dark-bg-active: computed.$computed-dark-bg-active !default;
+$fui-dark-body-bg: computed.$computed-dark-body-bg !default;
+$fui-dark-main-bg: computed.$computed-dark-main-bg !default;
+
+// Text colors (dark) - derived from $fui-neutral palette
+$fui-dark-text-primary: computed.$computed-dark-text-primary !default;
+$fui-dark-text-secondary: computed.$computed-dark-text-secondary !default;
+$fui-dark-text-tertiary: computed.$computed-dark-text-tertiary !default;
+$fui-dark-text-inverse: computed.$computed-dark-text-inverse !default;
+
+// Inverse surface (dark) — light surface for tooltips/inverted chips in dark mode
+$fui-dark-bg-inverse: computed.$computed-dark-text-primary !default;
+
+// Border colors (dark) - derived from $fui-neutral palette
+$fui-dark-border: computed.$computed-dark-border !default;
+$fui-dark-border-default: computed.$computed-dark-border-default !default;
+$fui-dark-border-strong: computed.$computed-dark-border-strong !default;
+
+// Shadows (dark)
+$fui-dark-shadow-sm: computed.$computed-dark-shadow-sm !default;
+$fui-dark-shadow-md: computed.$computed-dark-shadow-md !default;
+$fui-dark-shadow-lg: computed.$computed-dark-shadow-lg !default;
+
+// Semantic backgrounds (dark) - increased opacity for visibility
+$fui-dark-color-danger-bg: computed.$computed-dark-color-danger-bg !default;
+$fui-dark-color-success-bg: computed.$computed-dark-color-success-bg !default;
+$fui-dark-color-warning-bg: computed.$computed-dark-color-warning-bg !default;
+$fui-dark-color-info-bg: computed.$computed-dark-color-info-bg !default;
+
+// Semantic text colors (dark, WCAG AA contrast-safe)
+$fui-dark-color-danger-text: computed.$computed-dark-color-danger-text !default;
+$fui-dark-color-success-text: computed.$computed-dark-color-success-text !default;
+$fui-dark-color-warning-text: computed.$computed-dark-color-warning-text !default;
+$fui-dark-color-info-text: computed.$computed-dark-color-info-text !default;
+
+// Dark mode focus ring
+$fui-dark-focus-ring-color: computed.$computed-dark-focus-ring-color !default;
+
+// Scrollbar (dark mode)
+$fui-dark-scrollbar-track: computed.$computed-dark-scrollbar-track !default;
+$fui-dark-scrollbar-thumb: computed.$computed-dark-scrollbar-thumb !default;
+$fui-dark-scrollbar-thumb-hover: computed.$computed-dark-scrollbar-thumb-hover !default;
+
+// Overlay/backdrop
+$fui-backdrop: computed.$computed-backdrop !default;
+$fui-dark-backdrop: computed.$computed-dark-backdrop !default;
+
+// --------------------------------------------
+// Breakpoints
+// --------------------------------------------
+$fui-breakpoint-sm: 640px !default;
+$fui-breakpoint-md: 768px !default;
+$fui-breakpoint-lg: 1024px !default;
+$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;
+
+// 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;
+
+// Touch targets (derived from density seed)
+$fui-touch-sm: computed.$computed-touch-sm !default;
+$fui-touch-md: computed.$computed-touch-md !default;
+$fui-touch-lg: computed.$computed-touch-lg !default;
+
+// Minimum interactive target sizes.
+// 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-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)
+
+// Animation offsets
+$fui-anim-offset-sm: 4px !default; // Small slide animation
+$fui-anim-offset-md: 8px !default; // Medium slide animation
+
+// 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-header-z-index: 40 !default;
+
+// CodeBlock background — shared with Markdown's <pre> prose styling.
+// Other code/tooltip styling tokens live in their component modules.
+$fui-code-bg: #0c0c0e !default;
+
+// --------------------------------------------
+// CSS Custom Properties Export
+// --------------------------------------------
+// This mixin outputs CSS custom properties for runtime theming.
+// Call it in your root styles: @include fui-css-variables;
+
+@mixin fui-css-variables {
+  :root {
+    // Enable light-dark() automatic dark mode via color-scheme.
+    // Browsers supporting light-dark() (~92%) get automatic prefers-color-scheme support.
+    // Manual toggle via [data-theme="dark"] / .dark still works (sets color-scheme: dark).
+    color-scheme: light dark;
+
+    // Base configuration
+    font-size: #{$fui-base-font-size};
+    --fui-base-unit: #{$fui-base-unit};
+
+    // Seed colors — the 5 configurable seeds exposed as custom properties.
+    // Tracks SCSS seed variables, so compile-time customization is reflected.
+    // Consumers can override at runtime: `document.documentElement.style.setProperty('--fui-seed-brand', '#0066ff')`
+    // The @supports block below derives accent/semantic tokens from these seeds
+    // using relative color syntax in OKLCH space (perceptually uniform).
+    --fui-seed-brand: #{$fui-color-accent};
+    --fui-seed-danger: #{$fui-color-danger};
+    --fui-seed-success: #{$fui-color-success};
+    --fui-seed-warning: #{$fui-color-warning};
+    --fui-seed-info: #{$fui-color-info};
+
+    // Typography
+    --fui-font-sans: #{$fui-font-sans};
+    --fui-font-mono: #{$fui-font-mono};
+    --fui-font-size-2xs: #{$fui-font-size-2xs};
+    --fui-font-size-xs: #{$fui-font-size-xs};
+    --fui-font-size-sm: #{$fui-font-size-sm};
+    --fui-font-size-base: #{$fui-font-size-base};
+    --fui-font-size-md: #{$fui-font-size-md};
+    --fui-font-size-lg: #{$fui-font-size-lg};
+    --fui-font-size-xl: #{$fui-font-size-xl};
+    --fui-font-size-2xl: #{$fui-font-size-2xl};
+    --fui-font-size-3xl: #{$fui-font-size-3xl};
+    --fui-font-size-4xl: #{$fui-font-size-4xl};
+    --fui-font-weight-normal: #{$fui-font-weight-normal};
+    --fui-font-weight-medium: #{$fui-font-weight-medium};
+    --fui-font-weight-semibold: #{$fui-font-weight-semibold};
+    --fui-font-weight-bold: #{$fui-font-weight-bold};
+    --fui-line-height-tight: #{$fui-line-height-tight};
+    --fui-line-height-normal: #{$fui-line-height-normal};
+    --fui-line-height-relaxed: #{$fui-line-height-relaxed};
+    --fui-line-height-display: #{$fui-line-height-display};
+    --fui-line-height-prose: #{$fui-line-height-prose};
+    --fui-letter-spacing-tight: #{$fui-letter-spacing-tight};
+    --fui-letter-spacing-normal: #{$fui-letter-spacing-normal};
+    --fui-letter-spacing-display: #{$fui-letter-spacing-display};
+    --fui-letter-spacing-wide: #{$fui-letter-spacing-wide};
+
+    // Spacing (micro)
+    --fui-space-px: #{$fui-space-px};
+    --fui-space-0-5: #{$fui-space-0-5};
+    --fui-space-0-75: #{$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};
+
+    // Border radius
+    --fui-radius-sm: #{$fui-radius-sm};
+    --fui-radius-md: #{$fui-radius-md};
+    --fui-radius-lg: #{$fui-radius-lg};
+    --fui-radius-xl: #{$fui-radius-xl};
+    --fui-radius-full: #{$fui-radius-full};
+
+    // Transitions
+    --fui-transition-fast: #{$fui-transition-fast};
+    --fui-transition-normal: #{$fui-transition-normal};
+
+    // 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});
+    --fui-color-accent-hover: light-dark(
+      #{$fui-color-accent-hover},
+      #{$fui-dark-color-accent-hover}
+    );
+    --fui-color-accent-active: light-dark(
+      #{$fui-color-accent-active},
+      #{$fui-dark-color-accent-active}
+    );
+
+    // Colors — Semantic (same in light/dark, no light-dark() needed)
+    --fui-color-danger: #{$fui-color-danger};
+    --fui-color-danger-hover: #{$fui-color-danger-hover};
+    --fui-color-success: #{$fui-color-success};
+    --fui-color-warning: #{$fui-color-warning};
+    --fui-color-info: #{$fui-color-info};
+
+    // Colors — Semantic Status Recipe
+    // Inspired by compact status pills: dark mode uses a deep tinted fill with
+    // bright semantic text; light mode keeps the same hue recipe on a pale fill.
+    --fui-color-danger-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 12%, white),
+      color-mix(in srgb, var(--fui-color-danger) 24%, black)
+    );
+    --fui-color-success-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 12%, white),
+      color-mix(in srgb, var(--fui-color-success) 24%, black)
+    );
+    --fui-color-warning-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 12%, white),
+      color-mix(in srgb, var(--fui-color-warning) 24%, black)
+    );
+    --fui-color-info-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 12%, white),
+      color-mix(in srgb, var(--fui-color-info) 24%, black)
+    );
+
+    --fui-color-danger-text: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 72%, black),
+      color-mix(in srgb, var(--fui-color-danger) 78%, white 22%)
+    );
+    --fui-color-success-text: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 72%, black),
+      color-mix(in srgb, var(--fui-color-success) 78%, white 22%)
+    );
+    --fui-color-warning-text: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 72%, black),
+      color-mix(in srgb, var(--fui-color-warning) 78%, white 22%)
+    );
+    --fui-color-info-text: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 72%, black),
+      color-mix(in srgb, var(--fui-color-info) 78%, white 22%)
+    );
+
+    // Colors — Semantic Borders
+    --fui-color-danger-border: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent)
+    );
+    --fui-color-success-border: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-success-text) 28%, transparent)
+    );
+    --fui-color-warning-border: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent)
+    );
+    --fui-color-info-border: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-info-text) 30%, transparent)
+    );
+
+    // Backdrop
+    --fui-backdrop: light-dark(#{$fui-backdrop}, #{$fui-dark-backdrop});
+
+    // Surfaces
+    --fui-bg-primary: light-dark(#{$fui-bg-primary}, #{$fui-dark-bg-primary});
+    --fui-bg-secondary: light-dark(#{$fui-bg-secondary}, #{$fui-dark-bg-secondary});
+    --fui-bg-tertiary: light-dark(#{$fui-bg-tertiary}, #{$fui-dark-bg-tertiary});
+    --fui-bg-elevated: light-dark(#{$fui-bg-elevated}, #{$fui-dark-bg-elevated});
+    --fui-bg-subtle: light-dark(#{$fui-bg-subtle}, #{$fui-dark-bg-subtle});
+    --fui-bg-hover: light-dark(#{$fui-bg-hover}, #{$fui-dark-bg-hover});
+    --fui-bg-active: light-dark(#{$fui-bg-active}, #{$fui-dark-bg-active});
+    --fui-body-bg: light-dark(#{$fui-body-bg}, #{$fui-dark-body-bg});
+    --fui-main-bg: light-dark(#{$fui-main-bg}, #{$fui-dark-main-bg});
+    --fui-bg-inverse: light-dark(#{$fui-bg-inverse}, #{$fui-dark-bg-inverse});
+
+    // Text
+    --fui-text-primary: light-dark(#{$fui-text-primary}, #{$fui-dark-text-primary});
+    --fui-text-secondary: light-dark(#{$fui-text-secondary}, #{$fui-dark-text-secondary});
+    --fui-text-tertiary: light-dark(#{$fui-text-tertiary}, #{$fui-dark-text-tertiary});
+    --fui-text-inverse: light-dark(#{$fui-text-inverse}, #{$fui-dark-text-inverse});
+
+    // Borders
+    --fui-border: light-dark(#{$fui-border}, #{$fui-dark-border});
+    --fui-border-default: light-dark(#{$fui-border-default}, #{$fui-dark-border-default});
+    --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
+
+    // Native browser text selection. This should track the primary action blue,
+    // while component-selected states can stay tuned per control density.
+    --fui-selection-bg: light-dark(
+      color-mix(in srgb, var(--fui-button-primary-base, #0a84ff) 18%, transparent),
+      color-mix(in srgb, var(--fui-button-primary-base, #0a84ff) 32%, 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);
+    --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);
+    --fui-form-group-bg: color-mix(in srgb, var(--fui-bg-secondary) 48%, var(--fui-bg-primary));
+    --fui-form-group-border: var(--fui-border-default);
+
+    // Keyboard shortcut hints. Kept flatter than buttons so embedded input
+    // hints read as secondary chrome, not as nested actions.
+    --fui-kbd-height: 1.286rem; // 18px at 14px root
+    --fui-kbd-min-width: 1.714rem; // 24px
+    --fui-kbd-padding-x: var(--fui-space-0-75);
+    --fui-kbd-gap: calc(var(--fui-space-px) * 2);
+    --fui-kbd-bg: color-mix(in srgb, var(--fui-text-primary) 4%, transparent);
+    --fui-kbd-border: color-mix(in srgb, var(--fui-border-strong) 72%, transparent);
+    --fui-kbd-color: var(--fui-text-tertiary);
+    --fui-kbd-shadow: inset 0 1px 0
+      light-dark(
+        color-mix(in srgb, white 74%, transparent),
+        color-mix(in srgb, white 5%, transparent)
+      );
+    --fui-kbd-font-size: var(--fui-font-size-2xs);
+    --fui-kbd-radius: var(--fui-radius-sm);
+    --fui-kbd-reserved-width: 2.714rem; // 38px, enough for "⌘K"
+
+    // Button chrome. Neutral and primary buttons use the same raised-edge
+    // recipe in light and dark: crisp border, subtle top highlight, and a
+    // pressed inset state.
+    --fui-button-radius: var(--fui-radius-lg);
+    --fui-button-primary-base: light-dark(#0a84ff, #0a84ff);
+    --fui-button-primary-hover: light-dark(#1994ff, #2f9bff);
+    --fui-button-primary-active: light-dark(#006edb, #0068d6);
+    --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-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-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;
+    --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-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-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-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-border: color-mix(
+      in srgb,
+      var(--fui-border-strong) 78%,
+      var(--fui-text-primary) 22%
+    );
+    --fui-button-neutral-border-hover: color-mix(
+      in srgb,
+      var(--fui-border-strong) 58%,
+      var(--fui-text-primary) 42%
+    );
+    --fui-button-neutral-color: var(--fui-text-primary);
+    --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);
+
+    // Popup/menu active-item highlight — neutral, deliberately stronger than
+    // --fui-bg-hover (which is tuned for subtle surface hovers and reads as ~invisible
+    // on menu items, esp. in dark mode). Shared by every popup-list surface. Accent is
+    // reserved for the *selected* item (see --fui-field-selection-*), not hover.
+    --fui-bg-highlight: color-mix(in srgb, var(--fui-text-primary) 7%, transparent);
+
+    // 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));
+    --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-border: transparent;
+    --fui-sidebar-item-active-color: var(--fui-text-primary);
+    --fui-sidebar-item-active-indicator: transparent;
+    --fui-sidebar-footer-border: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
+
+    // Card/panel surfaces.
+    --fui-card-radius: var(--fui-radius-lg);
+    --fui-card-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent);
+    --fui-card-border: color-mix(in srgb, var(--fui-border-default) 86%, transparent);
+    --fui-card-shadow: inset 0 1px 0
+      light-dark(
+        color-mix(in srgb, white 86%, transparent),
+        color-mix(in srgb, white 4%, transparent)
+      );
+    --fui-card-elevated-shadow:
+      var(--fui-card-shadow), 0 1px 2px color-mix(in srgb, black 8%, transparent),
+      0 16px 36px -28px color-mix(in srgb, black 34%, transparent);
+    --fui-card-hover-bg: color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 4%);
+    --fui-card-hover-border: color-mix(in srgb, var(--fui-border-strong) 86%, transparent);
+    --fui-card-active-bg: color-mix(
+      in srgb,
+      var(--fui-bg-elevated) 84%,
+      var(--fui-text-primary) 6%
+    );
+    --fui-card-stat-bg: color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent);
+    --fui-card-stat-border: color-mix(in srgb, var(--fui-border-default) 78%, transparent);
+    --fui-card-stat-shadow: var(--fui-card-shadow);
+    --fui-panel-bg: color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent);
+    --fui-panel-border: color-mix(in srgb, var(--fui-border-default) 78%, transparent);
+
+    // Tables.
+    --fui-table-bg: transparent;
+    --fui-table-border: var(--fui-border-default);
+    --fui-table-header-bg: color-mix(in srgb, var(--fui-text-primary) 5%, transparent);
+    --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-border: var(--fui-border-strong);
+    --fui-table-subrow-bg: color-mix(in srgb, var(--fui-bg-secondary) 62%, transparent);
+
+    // Segmented controls / tabs.
+    --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: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-toggle-group-selected-border: transparent;
+    --fui-toggle-group-selected-shadow: none;
+
+    // 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};
+    --fui-shadow-lg: #{$fui-shadow-lg};
+
+    // Focus
+    --fui-focus-ring-color: light-dark(#{$fui-focus-ring-color}, #{$fui-dark-focus-ring-color});
+    --fui-focus-ring-offset: #{$fui-focus-ring-offset};
+    --fui-focus-ring-width: #{$fui-focus-ring-width};
+
+    // Scrollbar
+    --fui-scrollbar-width: #{$fui-scrollbar-width};
+    --fui-scrollbar-track: light-dark(#{$fui-scrollbar-track}, #{$fui-dark-scrollbar-track});
+    --fui-scrollbar-thumb: light-dark(#{$fui-scrollbar-thumb}, #{$fui-dark-scrollbar-thumb});
+    --fui-scrollbar-thumb-hover: light-dark(
+      #{$fui-scrollbar-thumb-hover},
+      #{$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};
+
+    // Touch targets (density-responsive, 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)
+    --fui-sidebar-item-height: #{$fui-sidebar-item-height};
+
+    // AppShell Layout
+    --fui-appshell-header-height: #{$fui-appshell-header-height};
+    --fui-header-z-index: #{$fui-header-z-index};
+
+    // 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};
+  }
+
+  // Dark mode via data-theme attribute (manual toggle).
+  // Sets color-scheme: dark so light-dark() resolves to dark values.
+  // Explicit overrides kept as fallback for browsers without light-dark() (~8%).
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    @include _fui-dark-tokens;
+  }
+
+  // Dark mode via .dark class on html
+  :root.dark {
+    color-scheme: dark;
+    @include _fui-dark-tokens;
+  }
+
+  // Light mode explicit override (for manual toggle back to light)
+  :root[data-theme="light"],
+  :root.light {
+    color-scheme: light;
+  }
+
+  // ============================================
+  // Runtime Color Derivation (Progressive Enhancement)
+  // ============================================
+  // Browsers supporting relative color syntax (~93%) get reactive tokens
+  // that auto-update when --fui-seed-* properties change at runtime.
+  // Derivation uses OKLCH space for perceptually uniform results.
+  // Browsers without support gracefully fall through to SCSS-computed values above.
+  // Usage: document.documentElement.style.setProperty('--fui-seed-brand', '#0066ff')
+  //   → accent, accent-hover, accent-active, focus-ring all update automatically.
+
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      // Accent derived from seed-brand.
+      // Light mode: brand as-is. Dark mode: CHROMA-AWARE lift. Chroma is preserved
+      // (never clamped), so a saturated brand — e.g. blue-600 oklch(0.55 0.22 262) —
+      // stays a true, vibrant blue instead of a washed-out tint. Lightness is only
+      // lifted for near-grey/chroma-0 seeds, via the `0.95 - 2*c` term: a vibrant
+      // brand (high c) keeps its own lightness, while a neutral grey brand (c≈0) lifts
+      // toward ~0.85 so it stays visible on dark surfaces where lightness is the only
+      // perceptual cue. Final L is clamped to [0.55, 0.85].
+      --fui-color-accent: light-dark(
+        var(--fui-seed-brand),
+        oklch(from var(--fui-seed-brand) clamp(0.55, max(l, calc(0.95 - 2 * c)), 0.85) c h)
+      );
+
+      // Auto-contrast text for elements on accent backgrounds (buttons, chips, etc.)
+      // Lightness > 0.6 → dark text; otherwise → white. Users can override this token.
+      --fui-color-on-accent: oklch(
+        from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0
+      );
+      --fui-color-accent-hover: light-dark(
+        oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.06)) c h),
+        oklch(
+          from var(--fui-seed-brand) clamp(0.6, max(calc(l + 0.06), calc(0.97 - 2 * c)), 0.9) c h
+        )
+      );
+      --fui-color-accent-active: light-dark(
+        oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.12)) c h),
+        oklch(
+          from var(--fui-seed-brand) clamp(0.5, max(calc(l - 0.04), calc(0.9 - 2 * c)), 0.82) c h
+        )
+      );
+
+      // Semantic hover derived from seed
+      --fui-color-danger-hover: oklch(from var(--fui-seed-danger) max(0.05, calc(l - 0.06)) c h);
+
+      // Semantic status recipe, matching the static token block above.
+      --fui-color-danger-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-danger) 12%, white),
+        color-mix(in oklch, var(--fui-seed-danger) 24%, black)
+      );
+      --fui-color-success-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-success) 12%, white),
+        color-mix(in oklch, var(--fui-seed-success) 24%, black)
+      );
+      --fui-color-warning-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-warning) 12%, white),
+        color-mix(in oklch, var(--fui-seed-warning) 24%, black)
+      );
+      --fui-color-info-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-info) 12%, white),
+        color-mix(in oklch, var(--fui-seed-info) 24%, black)
+      );
+      --fui-color-danger-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-danger) 72%, black),
+        color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%)
+      );
+      --fui-color-success-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-success) 72%, black),
+        color-mix(in oklch, var(--fui-seed-success) 78%, white 22%)
+      );
+      --fui-color-warning-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-warning) 72%, black),
+        color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%)
+      );
+      --fui-color-info-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-info) 72%, black),
+        color-mix(in oklch, var(--fui-seed-info) 78%, white 22%)
+      );
+
+      // Focus ring follows the resolved accent so dark brands are lifted on
+      // dark surfaces instead of disappearing into the field chrome.
+      --fui-focus-ring-color: var(--fui-color-accent);
+    }
+
+    // Runtime-derived dark mode overrides (replaces SCSS-computed when supported).
+    // Chroma-aware lift mirroring the light-dark() dark half above: vibrant brands
+    // keep their own lightness + chroma; near-grey brands lift toward ~0.85. Chroma
+    // is never clamped, so saturated brands (e.g. blue-600) stay true in dark mode.
+    :root[data-theme="dark"],
+    :root.dark {
+      --fui-color-accent: oklch(
+        from var(--fui-seed-brand) clamp(0.55, max(l, calc(0.95 - 2 * c)), 0.85) c h
+      );
+      --fui-color-on-accent: oklch(
+        from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0
+      );
+      --fui-color-accent-hover: oklch(
+        from var(--fui-seed-brand) clamp(0.6, max(calc(l + 0.06), calc(0.97 - 2 * c)), 0.9) c h
+      );
+      --fui-color-accent-active: oklch(
+        from var(--fui-seed-brand) clamp(0.5, max(calc(l - 0.04), calc(0.9 - 2 * c)), 0.82) c h
+      );
+      --fui-color-danger-bg: color-mix(in oklch, var(--fui-seed-danger) 24%, black);
+      --fui-color-success-bg: color-mix(in oklch, var(--fui-seed-success) 24%, black);
+      --fui-color-warning-bg: color-mix(in oklch, var(--fui-seed-warning) 24%, black);
+      --fui-color-info-bg: color-mix(in oklch, var(--fui-seed-info) 24%, black);
+      --fui-color-danger-text: color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%);
+      --fui-color-success-text: color-mix(in oklch, var(--fui-seed-success) 78%, white 22%);
+      --fui-color-warning-text: color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%);
+      --fui-color-info-text: color-mix(in oklch, var(--fui-seed-info) 78%, white 22%);
+      --fui-focus-ring-color: var(--fui-color-accent);
+    }
+  }
+
+  // High contrast mode via system preference
+  @media (prefers-contrast: more) {
+    :root {
+      @include _fui-high-contrast-tokens;
+    }
+
+    :root[data-theme="dark"],
+    :root.dark {
+      --fui-bg-hover: rgba(255, 255, 255, 0.15);
+      --fui-bg-active: rgba(255, 255, 255, 0.22);
+    }
+  }
+
+  // High contrast mode via data attribute (manual toggle)
+  :root[data-high-contrast="true"] {
+    @include _fui-high-contrast-tokens;
+  }
+
+  // Global scrollbar styling
+  * {
+    // Firefox
+    scrollbar-width: thin;
+    scrollbar-color: var(--fui-scrollbar-thumb) var(--fui-scrollbar-track);
+  }
+
+  // Webkit browsers (Chrome, Safari, Edge)
+  *::-webkit-scrollbar {
+    width: var(--fui-scrollbar-width);
+    height: var(--fui-scrollbar-width);
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--fui-scrollbar-track);
+    border-radius: calc(var(--fui-scrollbar-width) / 2);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--fui-scrollbar-thumb);
+    border-radius: calc(var(--fui-scrollbar-width) / 2);
+
+    &:hover {
+      background: var(--fui-scrollbar-thumb-hover);
+    }
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: var(--fui-scrollbar-track);
+  }
+}
+
+// High contrast mode support
+@mixin _fui-high-contrast-tokens {
+  // Increase focus ring visibility
+  --fui-focus-ring-width: 3px;
+
+  // Stronger borders for better visibility
+  --fui-border: var(--fui-text-primary);
+  --fui-border-strong: var(--fui-text-primary);
+
+  // 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);
+}
+
+// Private mixin for dark mode token values
+@mixin _fui-dark-tokens {
+  // Accent colors — brand used directly; on-accent handles text contrast
+  --fui-color-accent: #{$fui-dark-color-accent};
+  --fui-color-on-accent: #{$fui-dark-color-on-accent};
+  --fui-color-accent-hover: #{$fui-dark-color-accent-hover};
+  --fui-color-accent-active: #{$fui-dark-color-accent-active};
+
+  // Surfaces
+  --fui-bg-primary: #{$fui-dark-bg-primary};
+  --fui-bg-secondary: #{$fui-dark-bg-secondary};
+  --fui-bg-tertiary: #{$fui-dark-bg-tertiary};
+  --fui-bg-elevated: #{$fui-dark-bg-elevated};
+  --fui-bg-subtle: #{$fui-dark-bg-subtle};
+  --fui-bg-hover: #{$fui-dark-bg-hover};
+  --fui-bg-active: #{$fui-dark-bg-active};
+  // Menu highlight runs a touch stronger in dark so it clears the low-contrast floor.
+  --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-bg-inverse: #{$fui-dark-bg-inverse};
+
+  // Text
+  --fui-text-primary: #{$fui-dark-text-primary};
+  --fui-text-secondary: #{$fui-dark-text-secondary};
+  --fui-text-tertiary: #{$fui-dark-text-tertiary};
+  --fui-text-inverse: #{$fui-dark-text-inverse};
+
+  // Borders
+  --fui-border: #{$fui-dark-border};
+  --fui-border-default: #{$fui-dark-border-default};
+  --fui-border-strong: #{$fui-dark-border-strong};
+
+  // Shadows
+  --fui-shadow-sm: #{$fui-dark-shadow-sm};
+  --fui-shadow-md: #{$fui-dark-shadow-md};
+  --fui-shadow-lg: #{$fui-dark-shadow-lg};
+
+  // Semantic status recipe
+  --fui-color-danger-bg: color-mix(in srgb, var(--fui-color-danger) 24%, black);
+  --fui-color-success-bg: color-mix(in srgb, var(--fui-color-success) 24%, black);
+  --fui-color-warning-bg: color-mix(in srgb, var(--fui-color-warning) 24%, black);
+  --fui-color-info-bg: color-mix(in srgb, var(--fui-color-info) 24%, black);
+
+  --fui-color-danger-text: color-mix(in srgb, var(--fui-color-danger) 78%, white 22%);
+  --fui-color-success-text: color-mix(in srgb, var(--fui-color-success) 78%, white 22%);
+  --fui-color-warning-text: color-mix(in srgb, var(--fui-color-warning) 78%, white 22%);
+  --fui-color-info-text: color-mix(in srgb, var(--fui-color-info) 78%, white 22%);
+
+  // Semantic borders
+  --fui-color-danger-border: color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent);
+  --fui-color-success-border: color-mix(in srgb, var(--fui-color-success-text) 28%, transparent);
+  --fui-color-warning-border: color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent);
+  --fui-color-info-border: color-mix(in srgb, var(--fui-color-info-text) 30%, transparent);
+
+  // Focus & backdrop
+  --fui-focus-ring-color: #{$fui-dark-focus-ring-color};
+  --fui-backdrop: #{$fui-dark-backdrop};
+
+  // Scrollbar
+  --fui-scrollbar-track: #{$fui-dark-scrollbar-track};
+  --fui-scrollbar-thumb: #{$fui-dark-scrollbar-thumb};
+  --fui-scrollbar-thumb-hover: #{$fui-dark-scrollbar-thumb-hover};
+}