@exxatdesignux/ui 0.2.19 → 0.3.0

package/src/globals.css

@@ -1,10 +1,18 @@
 /* ==========================================================================
-   EXXAT DESIGN SYSTEM — globals.css (entry)
-   Token modules: ./tokens/*.css — structural split only; values unchanged.
+   EXXAT DESIGN SYSTEM — globals.css
+   Brands: Exxat One (Lavender · hue 270) · Exxat Prism (Rose · hue 343)
+   Standard: WCAG 2.1 Level AA
+     • Text contrast ≥ 4.5 : 1  (SC 1.4.3)
+     • UI control contrast ≥ 3 : 1  (SC 1.4.11)
+     • Focus ring ≥ 3 : 1  (SC 2.4.11)
+     • Touch targets ≥ 44 × 44 px  (SC 2.5.5 / mobile)
    ========================================================================== */
 
 @import "tailwindcss";
 @import "tw-animate-css";
+/* Inter is loaded via next/font/google in the consuming app's layout — no @import needed here. */
+/* `@source` is declared by the consuming app's globals.css so the path resolves relative to its location
+   (workspace clone vs. npm install). See apps/web/app/globals.css. */
 
 /* RTL layout direction support */
 @custom-variant dark (&:is(.dark *));
@@ -12,8 +20,2194 @@
 /* High-contrast variant — in-app High or Windows (JSON) contrast */
 @custom-variant hc (&:is([data-contrast="high"] *, [data-contrast="windows"] *));
 
-@import "./tokens/tailwind-bridge.css";
-@import "./tokens/base.css";
-@import "./tokens/themes.css";
-@import "./tokens/high-contrast.css";
-@import "./tokens/layers.css";
+/* --------------------------------------------------------------------------
+   Tailwind v4 theme bridge — maps CSS custom-props → utility classes
+   -------------------------------------------------------------------------- */
+@theme inline {
+  /* Typography */
+  --font-heading: "ivypresto-text";
+  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
+  /* Minimum product text: 11px — use `text-xs` or larger; avoid arbitrary classes below 11px */
+  --text-xs: 0.6875rem; /* 11px at 16px root */
+
+  /* Semantic color map */
+  --color-background:              var(--background);
+  --color-foreground:              var(--foreground);
+  --color-card:                    var(--card);
+  --color-card-foreground:         var(--card-foreground);
+  --color-popover:                 var(--popover);
+  --color-popover-foreground:      var(--popover-foreground);
+  --color-primary:                 var(--primary);
+  --color-primary-foreground:      var(--primary-foreground);
+  --color-secondary:               var(--secondary);
+  --color-secondary-foreground:    var(--secondary-foreground);
+  --color-muted:                   var(--muted);
+  --color-muted-foreground:        var(--muted-foreground);
+  --color-accent:                  var(--accent);
+  --color-accent-foreground:       var(--accent-foreground);
+  --color-destructive:             var(--destructive);
+  --color-destructive-foreground:  var(--destructive-foreground);
+  --color-border:                  var(--border);
+  --color-border-control:          var(--border-control);
+  --color-input:                   var(--input);
+  --color-input-background:        var(--input-background);
+  --color-ring:                    var(--ring);
+  /* Modal / sheet / drawer scrim */
+  --color-overlay:                 var(--overlay);
+
+  /* Chart tokens */
+  --color-chart-1:  var(--chart-1);
+  --color-chart-2:  var(--chart-2);
+  --color-chart-3:  var(--chart-3);
+  --color-chart-4:  var(--chart-4);
+  --color-chart-5:  var(--chart-5);
+
+  /* Chip / badge tokens (AA-compliant on light bg: ≥ 4.5:1) */
+  --color-chip-1:            var(--chip-1);
+  --color-chip-2:            var(--chip-2);
+  --color-chip-3:            var(--chip-3);
+  --color-chip-4:            var(--chip-4);
+  --color-chip-5:            var(--chip-5);
+  --color-chip-destructive:  var(--chip-destructive);
+
+  /* Brand accent + Exxat One tint scale (see :root --brand-*) */
+  --color-brand:              var(--brand-color);
+  --color-brand-dark:         var(--brand-color-dark);
+  --color-brand-foreground:   var(--brand-foreground);
+  --color-brand-tint:         var(--brand-tint);
+  --color-brand-tint-light:   var(--brand-tint-light);
+  --color-brand-tint-subtle:  var(--brand-tint-subtle);
+  --color-brand-color-light:  var(--brand-color-light);
+  --color-brand-deep:         var(--brand-color-deep);
+
+  /* Prism banner highlight */
+  --color-banner-prism:  var(--banner-prism-bg);
+
+  /* Sidebar */
+  --color-sidebar:                    var(--sidebar);
+  --color-sidebar-foreground:         var(--sidebar-foreground);
+  --color-sidebar-primary:            var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent:             var(--sidebar-accent);
+  --color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
+  --color-sidebar-border:             var(--sidebar-border);
+  --color-sidebar-ring:               var(--sidebar-ring);
+  /* WCAG 1.4.3 — always mixed against real --sidebar (lavender / rose / dark) */
+  --color-sidebar-section-label:      var(--sidebar-section-label-foreground);
+
+  /* Interactive hover — single source for ghost controls, lists, table chrome */
+  --color-interactive-hover:                    var(--interactive-hover);
+  --color-interactive-hover-foreground:         var(--interactive-hover-foreground);
+  --color-interactive-hover-subtle:             var(--interactive-hover-subtle);
+  --color-interactive-hover-soft:               var(--interactive-hover-soft);
+  --color-interactive-hover-medium:             var(--interactive-hover-medium);
+  --color-interactive-hover-strong:             var(--interactive-hover-strong);
+  --color-interactive-hover-row:                var(--interactive-hover-row);
+
+  /* DataTable — opaque surfaces for pinned/sticky cells and row states */
+  --color-dt-row-bg:             var(--dt-row-bg);
+  --color-dt-row-hover:          var(--dt-row-hover);
+  --color-dt-row-selected:       var(--dt-row-selected);
+  --color-dt-row-selected-fg:    var(--dt-row-selected-fg);
+  --color-dt-header-bg:          var(--dt-header-bg);
+  --color-dt-group-bg:           var(--dt-group-bg);
+  --color-dt-new-row-bg:         var(--dt-new-row-bg);
+  --color-dt-new-row-border:     var(--dt-new-row-border);
+
+  /* Border-radius scale (4 px base → 8 px default) */
+  --radius-sm:  4px;
+  --radius-md:  8px;
+  --radius-lg:  12px;
+  --radius-xl:  16px;
+  --radius-2xl: 20px;
+  --radius-3xl: 24px;
+
+  /* ============================================================
+     Exxat L0 — Tailwind utility bridges (additive)
+     ------------------------------------------------------------
+     Short utility forms backed by --exxat-* canonical primitives.
+     They coexist with the shadcn-named bridges above. Prefer
+     these for new code; see apps/web/docs/token-taxonomy.md.
+     ============================================================ */
+  --color-surface-1:           var(--exxat-color-surface-1);
+  --color-surface-2:           var(--exxat-color-surface-2);
+  --color-surface-3:           var(--exxat-color-surface-3);
+  --color-surface-muted:       var(--exxat-color-surface-muted);
+  --color-surface-accent:      var(--exxat-color-surface-accent);
+  --color-surface-sidebar:     var(--exxat-color-surface-sidebar);
+  --color-ink-1:               var(--exxat-color-ink-1);
+  --color-ink-2:               var(--exxat-color-ink-2);
+  --color-ink-on-brand:        var(--exxat-color-ink-on-brand);
+  --color-brand-1:             var(--exxat-color-brand-1);
+  --color-brand-2:             var(--exxat-color-brand-2);
+  --color-brand-3:             var(--exxat-color-brand-3);
+  --color-brand-tint-1:        var(--exxat-color-brand-tint-1);
+  --color-brand-tint-2:        var(--exxat-color-brand-tint-2);
+  --color-brand-tint-3:        var(--exxat-color-brand-tint-3);
+  --color-border-1:            var(--exxat-color-border-1);
+  --color-focus-ring:          var(--exxat-color-focus-ring);
+
+  /* Exxat L0 radius scale → rounded-1 … rounded-6 */
+  --radius-1: var(--exxat-radius-1);
+  --radius-2: var(--exxat-radius-2);
+  --radius-3: var(--exxat-radius-3);
+  --radius-4: var(--exxat-radius-4);
+  --radius-5: var(--exxat-radius-5);
+  --radius-6: var(--exxat-radius-6);
+}
+
+/* --------------------------------------------------------------------------
+   Text size (Settings → Appearance)
+   Pattern: root `font-size` steps like iOS Larger Text / Android font scale /
+   browser zoom-at-root so rem-based components track together. We keep steps
+   modest; `compact` redefines `--text-xs` so minimum UI copy stays 11px (Exxat
+   accessibility rule) when the root is slightly below 16px.
+   -------------------------------------------------------------------------- */
+html[data-text-size="compact"] {
+  font-size: 94%;
+  --text-xs: 0.7333rem; /* ~11px when 1rem ≈ 15px */
+}
+html[data-text-size="large"] {
+  font-size: 112.5%;
+}
+
+/* ==========================================================================
+   :root — Exxat One · Light Mode (brand hue 286.1)
+   All contrast ratios verified against oklch(1 0 0) white background.
+   ========================================================================== */
+:root {
+  /* font-size intentionally NOT overridden here.
+     Shadcn components assume 1rem = 16px (browser default).
+     Overriding to 87.5% / 14px breaks rem-based spacing on all devices,
+     and compounds incorrectly at Windows 150% system zoom.
+     If a compact 14px density is needed, apply it at the component/page level
+     via a scoped class, not globally on :root. */
+  /* Minimum readable UI copy: 11px (`text-xs` / --text-xs). Do not use smaller arbitrary sizes. */
+
+  /* ── Layout ─────────────────────────────────────────────────── */
+  /* SiteHeader / breadcrumb height. Mirrored on the SidebarProvider for
+     descendants; declared here too so JS that reads from documentElement
+     (e.g. DataTable sticky-head offset) can resolve it. Plain px so
+     `parseFloat` can read it as a number. Keep in sync with `headerHeight`
+     in components/sidebar-shell.tsx (currently `calc(var(--spacing) * 12)` = 48px). */
+  --header-height: 48px;
+
+  /* ── Typography ─────────────────────────────────────────────── */
+  /* Ivy Presto loaded via Adobe Fonts Kit wuk5wqn (use.typekit.net) */
+  --font-heading: "ivypresto-text";
+
+  /* ── Brand — Exxat One (hue 286.1) ─────────────────────────── */
+  /* Primary surface — requested token */
+  --brand-tint:        oklch(0.9676 0.016 286.1);
+  /* Lighter / darker washes (same hue) for nested UI & hovers */
+  --brand-tint-light:  oklch(0.993 0.007 286.1);
+  --brand-tint-subtle: oklch(0.935 0.024 286.1);
+  /* Interactive accent + scale (readable on white; pairs with --brand-tint) */
+  --brand-color:       oklch(0.50 0.14 286.1);
+  --brand-color-light: oklch(0.78 0.09 286.1);
+  --brand-color-dark:  oklch(0.38 0.11 286.1);
+  --brand-color-deep:  oklch(0.28 0.085 286.1);
+  --brand-foreground:  oklch(0.985 0 0);
+  /* Fixed swatches for brand picker (Exxat One vs Prism), independent of active theme */
+  --brand-preview-one:   var(--brand-tint);
+  --brand-preview-prism: oklch(0.57 0.24 342);
+
+  /**
+   * Ask Leo panel tints (same mixes as the vertical wash). Use for blobs, cards, etc.
+   * `--leo-surface-gradient` is the full linear wash on `AskLeoSidebar`.
+   */
+  --leo-surface-tint-a: color-mix(in oklch, var(--brand-color) 4%, var(--background));
+  --leo-surface-tint-b: color-mix(in oklch, var(--brand-color) 8%, var(--background));
+  --leo-surface-gradient: linear-gradient(180deg, var(--leo-surface-tint-a) 0%, var(--leo-surface-tint-b) 100%);
+
+  /* KeyMetrics `variant="flat"` — no band surface; bottom brand glow only (OKLCH). */
+  --key-metrics-flat-cell-bg: transparent;
+  --key-metrics-flat-divider: color-mix(in oklch, var(--sidebar-border) 55%, transparent);
+  --key-metrics-flat-band-radial: radial-gradient(
+    ellipse 120% 68% at 50% 100%,
+    color-mix(in oklch, var(--brand-color) 20%, transparent) 0%,
+    color-mix(in oklch, var(--brand-color) 8%, transparent) 42%,
+    transparent 72%
+  );
+  --key-metrics-flat-band-shadow: none;
+  --key-metrics-card-glow-radial: radial-gradient(
+    ellipse 110% 90% at 50% 100%,
+    color-mix(in oklch, var(--brand-color) 18%, transparent) 0%,
+    transparent 65%
+  );
+
+  /* ── Surfaces ────────────────────────────────────────────────── */
+  --background:         oklch(1 0 0);
+  --foreground:         oklch(0.145 0 0);           /* ≈ #1A1A1A — 17:1 on white ✓ */
+  --card:               oklch(1 0 0);
+  --card-foreground:    oklch(0.145 0 0);
+  --popover:            oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* ── Primary ─────────────────────────────────────────────────── */
+  /* Default / ghost / solid primary actions — neutral charcoal (style guide) */
+  --primary:            oklch(0.3457 0.0052 286.13);
+  --primary-foreground: oklch(0.985 0 0);
+
+  /* ── Secondary / Muted / Accent ──────────────────────────────── */
+  --secondary:             oklch(0.95 0.0058 264.53);
+  --secondary-foreground:  oklch(0.082 0 0);
+  --muted:                 oklch(0.945 0.002 270);
+  --muted-foreground:      oklch(0.50 0.012 270);   /* 5.5:1 on white ✓ */
+  --accent:                oklch(0.925 0.005 260);
+  --accent-foreground:     oklch(0.082 0 0);
+
+  /* ── Destructive ─────────────────────────────────────────────── */
+  /* oklch(0.55 0.22 25) ≈ #C0392B — 5.1:1 on white ✓             */
+  --destructive:            oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(1 0 0);
+
+  /* ── Borders ─────────────────────────────────────────────────── */
+  /* Decorative: cards, dividers — no AA contrast requirement        */
+  --border: oklch(0.92 0.002 270);
+
+  /* Form-field boundary — WCAG 1.4.11 requires 3:1 against bg.
+     --border-control-3: L=0.62 ≈ #90929A → borderline; use with care.
+     --border-control-35: L=0.25 → ≥ 3.5:1 — recommended for inputs.   */
+  --border-control:    oklch(0.82 0.004 270);   /* subtle (layout use only) */
+  --border-control-3:  oklch(0.6196 0.0092 270); /* ≈ 3:1 on white (minimum) */
+  --border-control-35: oklch(0.25 0.01 270);    /* ≈ 3.5:1+ (recommended)   */
+  --control-border:    var(--border-control-3);  /* default form-field border */
+
+  /* ── Input ───────────────────────────────────────────────────── */
+  /* Raised contrast target for control outlines (>= 3.1:1 on white). */
+  --input:            oklch(0.62 0.01 264.52);
+  --input-background: oklch(0.97 0.002 270);
+
+  /* ── Focus ring ──────────────────────────────────────────────── */
+  /* 3:1+ contrast on both light & dark backgrounds (WCAG 2.4.11)  */
+  --ring: oklch(0.25 0 0);
+
+  /* ── Charts ──────────────────────────────────────────────────── */
+  --chart-1: oklch(0.55 0.22 264.116);
+  --chart-2: oklch(0.48 0.15 184.704);
+  --chart-3: oklch(0.32 0.08 227.392);
+  --chart-4: oklch(0.65 0.18 84.429);
+  --chart-5: oklch(0.58 0.18 70.08);
+
+  /* ── Chip / Badge ────────────────────────────────────────────── */
+  /* AA-compliant on white: all ≥ 4.5:1 (WCAG 1.4.3)              */
+  --chip-1:           oklch(0.38 0.18 264);   /* indigo   */
+  --chip-2:           oklch(0.35 0.14 184);   /* teal     */
+  --chip-3:           oklch(0.32 0.08 227);   /* slate    */
+  --chip-4:           oklch(0.42 0.12 84);    /* amber    */
+  --chip-5:           oklch(0.42 0.14 70);    /* orange   */
+  --chip-destructive: oklch(0.40 0.18 25);    /* red      */
+
+  /* ── Prism promo banner ──────────────────────────────────────── */
+  /* Rose hue 343 — used universally regardless of active theme    */
+  --banner-prism-bg: oklch(0.97 0.02 343);
+
+  /* ── Sidebar — Exxat One brand tint ───────────────────────────── */
+  --sidebar:                    var(--brand-tint);
+  --sidebar-foreground:         oklch(0.145 0 0);
+  --sidebar-primary:            oklch(0.082 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent:             oklch(0.945 0.025 286.1);
+  --sidebar-accent-foreground:  oklch(0.3457 0.0052 286.13);
+  --sidebar-border:             oklch(0.92 0.025 286.1);
+  --sidebar-ring:               oklch(0.25 0 0);
+  /* Nav section titles — ≥4.5:1 vs --sidebar (not vs page white) */
+  --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 58%, var(--sidebar));
+  /* Nested secondary rail — elevation 1: brand wash, lighter than `--sidebar` / `--brand-tint`. */
+  --secondary-panel-bg:         color-mix(in oklch, var(--background) 40%, var(--brand-tint-light) 60%);
+
+  /* Browser UI (meta theme-color) — aligned with --brand-tint */
+  --theme-color-chrome: #f3f2f8;
+
+  /* ── Border radius ───────────────────────────────────────────── */
+  --radius: 0.5rem; /* 8px base */
+
+  /* ── Density / touch targets ─────────────────────────────────── */
+  --scaling:              1;
+  --control-height:       calc(40px * var(--scaling));
+  --control-height-sm:    calc(32px * var(--scaling));
+  /* WCAG 2.5.5 — minimum 44×44 px touch target (mobile only)     */
+  --control-height-touch: 44px;
+  --control-padding-y:    calc(8px  * var(--scaling));
+  --control-padding-x:    calc(12px * var(--scaling));
+  --table-row-height:     calc(48px * var(--scaling));
+
+  /* ── Interactive hover (ties to --muted / --accent — theme overrides apply) ─ */
+  --interactive-hover:            var(--muted);
+  --interactive-hover-foreground: var(--foreground);
+  --interactive-hover-subtle:     color-mix(in oklch, var(--muted) 50%, var(--background));
+  --interactive-hover-soft:       color-mix(in oklch, var(--muted) 40%, var(--background));
+  --interactive-hover-medium:     color-mix(in oklch, var(--muted) 60%, var(--background));
+  --interactive-hover-strong:     color-mix(in oklch, var(--muted) 70%, var(--background));
+  --interactive-hover-row:        color-mix(in oklch, var(--accent) 50%, var(--background));
+
+  /* ── DataTable — opaque row/cell surfaces (pinned cells MUST be opaque) ── */
+  --dt-row-bg:             var(--background);
+  --dt-row-hover:          oklch(0.972 0.001 270);
+  --dt-row-selected:       oklch(0.962 0.003 260);
+  --dt-row-selected-fg:    var(--foreground);
+  --dt-header-bg:          var(--background);
+  --dt-group-bg:           oklch(0.972 0.001 270);
+  --dt-new-row-bg:         oklch(from var(--brand-color) 0.985 0.006 h);
+  --dt-new-row-border:     var(--brand-color);
+
+  /* ── Transitions ─────────────────────────────────────────────── */
+  --transition-fast:   0.15s ease;
+  --transition-normal: 0.25s ease-in-out;
+  --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+
+  /* ── Shadows ─────────────────────────────────────────────────── */
+  --shadow-sm: oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
+  --shadow-md: oklch(0 0 0 / 0.08) 0px 2px 4px -1px, oklch(0 0 0 / 0.06) 0px 1px 2px;
+  --shadow-lg: oklch(0 0 0 / 0.10) 0px 4px 8px -2px, oklch(0 0 0 / 0.06) 0px 2px 4px;
+
+  /* ── Sticky column edge fade (data tables) ───────────────────── */
+  --sticky-edge-fade: oklch(0 0 0 / 0.08);
+
+  /* ── Overlay scrim (Sheet / Drawer / Dialog) ─────────────────── */
+  /* Softer than raw bg-black/10; follows foreground hue (not pure black) */
+  --overlay: color-mix(in oklch, var(--foreground) 5%, transparent);
+
+  /* ── Avatar initials (table) ───────────────────────────────────── */
+  /* Soft brand wash + brand ink — no black fills; ≥4.5:1 on white rows */
+  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 14%, oklch(1 0 0));
+  --avatar-initials-fg: var(--brand-color-dark);
+
+  /* ── KPI insight severity (KeyMetrics) ────────────────────────── */
+  --insight-severity-warning-bg: color-mix(in oklch, var(--chart-4) 15%, transparent);
+  --insight-severity-warning-fg: color-mix(in oklch, var(--chart-4) 75%, var(--foreground));
+  --insight-severity-info-bg: color-mix(in oklch, var(--chart-1) 14%, transparent);
+  --insight-severity-info-fg: color-mix(in oklch, var(--chart-1) 75%, var(--foreground));
+
+  /* ── Tinted icon discs — soft wash (≈14% tint like legacy inline styles); contrast from --chip-* / brand-dark on fg */
+  --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
+  --icon-disc-chart-2-fg: var(--chip-2);
+  --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
+  --icon-disc-chart-4-fg: var(--chip-4);
+  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
+  --icon-disc-brand-fg: var(--brand-color-dark);
+  --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
+  --icon-disc-danger-fg: var(--chip-destructive);
+
+  /* ── Conditional formatting rule backgrounds (table drawer) ─── */
+  --conditional-rule-green: color-mix(in oklch, var(--chart-2) 22%, transparent);
+  --conditional-rule-yellow: color-mix(in oklch, var(--chart-4) 30%, transparent);
+  --conditional-rule-blue: color-mix(in oklch, var(--chart-1) 22%, transparent);
+  --conditional-rule-red: color-mix(in oklch, var(--destructive) 22%, transparent);
+  --conditional-rule-purple: color-mix(in oklch, var(--brand-color) 22%, transparent);
+  --conditional-rule-orange: color-mix(in oklch, var(--chart-5) 25%, transparent);
+
+  /* ============================================================
+     Exxat L0 — canonical namespace (additive aliases)
+     ------------------------------------------------------------
+     SLDS-style flat namespace. These are the official names the
+     DS scales on — components SHOULD migrate to these over time.
+     Existing shadcn-style names above are L1 aliases that resolve
+     to the same values. The L0 names use var(...) so they inherit
+     every theme override (.dark / .theme-one / .theme-prism /
+     [data-contrast="high"]) automatically — no per-theme block
+     needed.
+     Reference: apps/web/docs/token-taxonomy.md (§ L0 Exxat).
+     ============================================================ */
+
+  /* ── Surfaces (canvas → muted → input) ──────────────────────── */
+  --exxat-color-surface-1:         var(--background);
+  --exxat-color-surface-2:         var(--card);
+  --exxat-color-surface-3:         var(--popover);
+  --exxat-color-surface-muted:     var(--muted);
+  --exxat-color-surface-accent:    var(--accent);
+  --exxat-color-surface-secondary: var(--secondary);
+  --exxat-color-surface-sidebar:   var(--sidebar);
+  --exxat-color-surface-input:     var(--input-background);
+
+  /* ── Ink (foreground / on-surface text) ─────────────────────── */
+  --exxat-color-ink-1:              var(--foreground);
+  --exxat-color-ink-2:              var(--muted-foreground);
+  --exxat-color-ink-on-surface-2:   var(--card-foreground);
+  --exxat-color-ink-on-surface-3:   var(--popover-foreground);
+  --exxat-color-ink-on-brand:       var(--brand-foreground);
+  --exxat-color-ink-on-primary:     var(--primary-foreground);
+  --exxat-color-ink-on-secondary:   var(--secondary-foreground);
+  --exxat-color-ink-on-accent:      var(--accent-foreground);
+  --exxat-color-ink-on-destructive: var(--destructive-foreground);
+
+  /* ── Brand (interactive accent + scale) ─────────────────────── */
+  --exxat-color-brand-1:        var(--brand-color);
+  --exxat-color-brand-2:        var(--brand-color-dark);
+  --exxat-color-brand-3:        var(--brand-color-light);
+  --exxat-color-brand-deep:     var(--brand-color-deep);
+  --exxat-color-brand-tint-1:   var(--brand-tint);
+  --exxat-color-brand-tint-2:   var(--brand-tint-subtle);
+  --exxat-color-brand-tint-3:   var(--brand-tint-light);
+
+  /* ── Wordmark ink (Exxat product logo SVG + HTML prefix) ─────
+     Brand-frozen slate/cool-grey pair used by the "Exxat" SVG
+     letters and the HTML wordmark prefix. Held outside the
+     `--foreground` family because the wordmark stays at brand
+     ink even when the rest of the surface inverts. Replaces
+     the bare `#273441` / `#A8B2BA` literals in
+     `apps/web/components/exxat-product-logo.tsx` and
+     `product-wordmark.tsx`. */
+  --exxat-color-wordmark-ink-light: oklch(0.301 0.022 252);   /* ≈ #273441 */
+  --exxat-color-wordmark-ink-dark:  oklch(0.755 0.012 230);   /* ≈ #A8B2BA */
+
+  /* ── Action surfaces ────────────────────────────────────────── */
+  --exxat-color-action-primary:     var(--primary);
+  --exxat-color-action-secondary:   var(--secondary);
+  --exxat-color-action-destructive: var(--destructive);
+
+  /* ── Borders (decorative + form-field ladder) ──────────────── */
+  --exxat-color-border-1:              var(--border);
+  --exxat-color-border-control-subtle: var(--border-control);
+  --exxat-color-border-control-1:      var(--border-control-3);
+  --exxat-color-border-control-2:      var(--border-control-35);
+
+  /* ── Focus + overlay ────────────────────────────────────────── */
+  --exxat-color-focus-ring:  var(--ring);
+  --exxat-color-overlay:     var(--overlay);
+
+  /* ── Chart slots ────────────────────────────────────────────── */
+  --exxat-color-chart-1: var(--chart-1);
+  --exxat-color-chart-2: var(--chart-2);
+  --exxat-color-chart-3: var(--chart-3);
+  --exxat-color-chart-4: var(--chart-4);
+  --exxat-color-chart-5: var(--chart-5);
+
+  /* ── Chip / badge slots ─────────────────────────────────────── */
+  --exxat-color-chip-1:           var(--chip-1);
+  --exxat-color-chip-2:           var(--chip-2);
+  --exxat-color-chip-3:           var(--chip-3);
+  --exxat-color-chip-4:           var(--chip-4);
+  --exxat-color-chip-5:           var(--chip-5);
+  --exxat-color-chip-destructive: var(--chip-destructive);
+
+  /* ── Radius scale ──────────────────────────────────────────── */
+  --exxat-radius-1: 4px;
+  --exxat-radius-2: 8px;
+  --exxat-radius-3: 12px;
+  --exxat-radius-4: 16px;
+  --exxat-radius-5: 20px;
+  --exxat-radius-6: 24px;
+
+  /* ── Spacing scale ─────────────────────────────────────────── */
+  --exxat-spacing-1:  0.25rem;
+  --exxat-spacing-2:  0.5rem;
+  --exxat-spacing-3:  0.75rem;
+  --exxat-spacing-4:  1rem;
+  --exxat-spacing-5:  1.25rem;
+  --exxat-spacing-6:  1.5rem;
+  --exxat-spacing-8:  2rem;
+  --exxat-spacing-12: 3rem;
+
+  /* ── Control height scale ──────────────────────────────────── */
+  --exxat-control-height-1: var(--control-height-sm);
+  --exxat-control-height-2: var(--control-height);
+  --exxat-control-height-3: var(--control-height-touch);
+}
+
+/* ==========================================================================
+   Dark Mode — Exxat One base (neutral surfaces; brand uses --brand-*)
+   ========================================================================== */
+.dark {
+  --sticky-edge-fade: oklch(0 0 0 / 0.32);
+
+  /* Brand-tint scale for dark mode — same hue family as :root but at dark-mode
+     lightness so derived surfaces (`--secondary-panel-bg`, `--sidebar` fallback
+     via `var(--brand-tint)`, etc.) read as dark brand surfaces, not pale
+     pastel washes. Themed `.dark` variants (`.theme-one.dark`,
+     `.theme-prism.dark`, …) override these with their own hue.
+
+     Chroma note: at L≈0.27 the OKLCH hue-discrimination threshold is much
+     higher than at L≈0.97 (Helmholtz–Kohlrausch). The PRIMARY brand surface
+     (`--brand-tint`) needs ~3–4× the chroma of its light-mode counterpart so
+     different products read as visibly different in dark mode. The lighter /
+     subtler scale steps stay low-chroma — they're elevation hints, not the
+     brand carrier. */
+  --brand-tint:         oklch(0.30 0.05 270);
+  --brand-tint-light:   oklch(0.34 0.04 270);
+  --brand-tint-subtle:  oklch(0.26 0.025 270);
+
+  /* Canvas — charcoal grey with a perceptible whisper of brand chroma (still
+     ≥ 12:1 against --foreground). Was 0.008 — below the OKLCH hue-perception
+     threshold at L 0.20, so the canvas read as dead-neutral grey. 0.014 ties
+     the canvas to the theme without compromising readability. */
+  --background:         oklch(0.20 0.014 270);
+  --foreground:         oklch(0.985 0 0);
+  /* Dark surface elevation ladder (see commentary at line ~605 for the full
+     stack across themed blocks):
+       --background          L=0.20    canvas
+       --secondary-panel-bg  L=0.22    nested chrome (between sidebar & canvas)
+       --card                L=0.225   subtle inline elevation
+       --sidebar /input-bg   L=0.245   outer chrome
+       --popover             L=0.275   floating menus / dropdowns
+
+     Card stays at +0.025 above canvas so it reads as the same surface family.
+     Popover lifts further (+0.075) so it visibly floats above the canvas it
+     covers — a too-close popover blends into the page and a dropdown loses
+     its boundary. */
+  --card:               oklch(0.225 0.008 270);
+  --card-foreground:    oklch(0.985 0 0);
+  --popover:            oklch(0.275 0.012 270);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary:            oklch(0.985 0 0);
+  --primary-foreground: oklch(0.3457 0.0052 286.13);
+  --secondary:          oklch(0.31 0.04 270);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted:              oklch(0.31 0.04 270);
+  --muted-foreground:   oklch(0.72 0.012 270);   /* ≥ 4.5:1 on dark bg ✓ */
+  --accent:             oklch(0.33 0.06 270);
+  --accent-foreground:  oklch(0.985 0 0);
+  --destructive:        oklch(0.65 0.20 25);      /* brighter for dark bg */
+  --destructive-foreground: oklch(0.10 0 0);
+
+  /* KeyMetrics flat band — no surface; bottom brand glow only (OKLCH). */
+  --key-metrics-flat-cell-bg: transparent;
+  --key-metrics-flat-divider: color-mix(in oklch, var(--sidebar-border) 55%, transparent);
+  --key-metrics-flat-band-radial: radial-gradient(
+    ellipse 120% 68% at 50% 100%,
+    color-mix(in oklch, var(--brand-color) 26%, transparent) 0%,
+    color-mix(in oklch, var(--brand-color) 10%, transparent) 42%,
+    transparent 72%
+  );
+  --key-metrics-flat-band-shadow: none;
+  --key-metrics-card-glow-radial: radial-gradient(
+    ellipse 110% 90% at 50% 100%,
+    color-mix(in oklch, var(--brand-color) 22%, transparent) 0%,
+    transparent 62%
+  );
+
+  /* Borders — visible but not washed out on dark surfaces */
+  --border:            oklch(0.38 0.008 270);
+  --border-control:    oklch(0.72 0.012 270);
+  --border-control-3:  oklch(0.78 0.012 270);
+  --border-control-35: oklch(0.75 0.012 270);
+  --control-border:    var(--border-control-3);
+
+  --input:             oklch(0.72 0.012 270);
+  --input-background:  oklch(0.245 0 0);
+
+  /* Focus ring — 3:1+ on dark bg */
+  --ring: oklch(0.85 0 0);
+
+  /* Charts — higher lightness for dark surfaces */
+  --chart-1: oklch(0.70 0.22 264.376);
+  --chart-2: oklch(0.75 0.15 162.48);
+  --chart-3: oklch(0.78 0.12 227.392);
+  --chart-4: oklch(0.80 0.18 84.429);
+  --chart-5: oklch(0.75 0.18 70.08);
+
+  /* Chips — AA-compliant on dark bg (L raised) */
+  --chip-1:           oklch(0.72 0.18 264);
+  --chip-2:           oklch(0.72 0.14 184);
+  --chip-3:           oklch(0.78 0.12 227);
+  --chip-4:           oklch(0.78 0.14 84);
+  --chip-5:           oklch(0.78 0.16 70);
+  --chip-destructive: oklch(0.72 0.18 25);
+
+  /* Tinted icon discs — same soft transparency wash; fg stays readable on dark canvas */
+  --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
+  --icon-disc-chart-2-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-2));
+  --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
+  --icon-disc-chart-4-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-4));
+  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
+  --icon-disc-brand-fg: color-mix(in oklch, var(--foreground) 8%, var(--brand-color));
+  --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
+  --icon-disc-danger-fg: color-mix(in oklch, var(--foreground) 8%, var(--destructive));
+
+  /* Sidebar — same chroma-bump principle as `--brand-tint`: at L≈0.245 the
+     OKLCH hue-perception threshold is ~0.04, so 0.015 read as dead grey
+     regardless of brand. 0.04 reads as the brand without competing with the
+     content panel. `.theme-*.dark` blocks restate this scale at their hue. */
+  --sidebar:                    oklch(0.245 0.04 270);
+  --sidebar-foreground:         oklch(0.985 0 0);
+  --sidebar-primary:            oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent:             oklch(0.30 0.035 270);
+  --sidebar-accent-foreground:  oklch(0.985 0 0);
+  --sidebar-border:             oklch(0.38 0.025 270);
+  --sidebar-ring:               oklch(0.85 0 0);
+  --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar));
+  /* Nested secondary rail — nested chrome wedged between the outer sidebar
+     (L=0.245) and the page canvas (L=0.20). Previously this resolved to
+     `var(--brand-tint)` at L=0.30, which made the panel *brighter* than the
+     sidebar — it popped out instead of nestling in. Now L=0.22 places it just
+     above canvas with a whisper of brand chroma; each themed dark block below
+     overrides with the brand hue so it still reads as Exxat One vs Prism vs
+     Assessment vs custom. */
+  --secondary-panel-bg:         oklch(0.22 0.020 270);
+  --theme-color-chrome:         #2f2d36;
+
+  /* Lifted scrim on dark — white-tinted veil, not heavy black */
+  --overlay: color-mix(in oklch, var(--foreground) 10%, transparent);
+
+  /* Mid lavender chip + light text — no black circle; contrasts on dark table rows */
+  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 38%, oklch(0.40 0.05 286.1));
+  --avatar-initials-fg: oklch(0.99 0.01 286.1);
+
+  /* DataTable — opaque surfaces for dark mode */
+  --dt-row-bg:             var(--background);
+  --dt-row-hover:          oklch(0.24 0.01 270);
+  --dt-row-selected:       oklch(0.27 0.02 270);
+  --dt-row-selected-fg:    var(--foreground);
+  --dt-header-bg:          var(--background);
+  --dt-group-bg:           oklch(0.24 0.01 270);
+  --dt-new-row-bg:         oklch(from var(--brand-color) 0.22 0.02 h);
+  --dt-new-row-border:     var(--brand-color);
+}
+
+/* ==========================================================================
+   Theme: Exxat One · Lavender (explicit — also applied as :root default)
+   Usage: <html class="theme-one"> or <html class="theme-lavender">
+   ========================================================================== */
+.theme-one,
+.theme-lavender {
+  --brand-tint:         oklch(0.9676 0.016 286.1);
+  --brand-tint-light:   oklch(0.993 0.007 286.1);
+  --brand-tint-subtle:  oklch(0.935 0.024 286.1);
+  --brand-color:        oklch(0.50 0.14 286.1);
+  --brand-color-light:  oklch(0.78 0.09 286.1);
+  --brand-color-dark:   oklch(0.38 0.11 286.1);
+  --brand-color-deep:   oklch(0.28 0.085 286.1);
+  --ring:               var(--brand-color-dark);
+}
+
+/* Light surfaces only — must NOT override .dark (otherwise muted/accent stay “paper white” in dark mode) */
+.theme-one:not(.dark),
+.theme-lavender:not(.dark) {
+  --sidebar:        var(--brand-tint);
+  --sidebar-accent: oklch(0.945 0.025 286.1);
+  --sidebar-border: oklch(0.92 0.025 286.1);
+  --secondary:      oklch(0.95 0.012 286.1);
+  --accent:         oklch(0.925 0.015 286.1);
+  --muted:          oklch(0.945 0.008 286.1);
+}
+
+.theme-one.dark,
+.dark.theme-one,
+.theme-lavender.dark,
+.dark.theme-lavender {
+  --ring:             var(--brand-color);
+  --background:       oklch(0.20 0.014 286.1);
+  --sidebar:          oklch(0.245 0.04 286.1);
+  --sidebar-accent:   oklch(0.30 0.035 286.1);
+  --sidebar-border:   oklch(0.38 0.025 286.1);
+  /* Restore dark surfaces (base .dark is overridden by :not(.dark) rules above when both classes apply) */
+  --secondary:        oklch(0.31 0.04 286.1);
+  --muted:            oklch(0.31 0.04 286.1);
+  --accent:           oklch(0.33 0.06 286.1);
+  /* Surface elevation ladder — dark mode.
+     Card / input-background are *inline* elevations (same surface family as
+     canvas, small step). Popover is a *floating* surface — lifts further so a
+     dropdown over canvas reads as clearly above it instead of blending in.
+     Secondary panel is nested chrome — wedged between canvas (L=0.20) and
+     sidebar (L=0.245), so it nestles into the shell rather than popping out.
+     Brand chroma stays gentle on all three; the saturated brand expression
+     lives on --brand-tint / --sidebar. */
+  --secondary-panel-bg: oklch(0.22  0.025 286.1);
+  --card:               oklch(0.225 0.017 286.1);
+  --popover:            oklch(0.275 0.022 286.1);
+  --input-background:   oklch(0.245 0.010 286.1);
+  /* Brand-tint scale — same hue (286.1 — Exxat One lavender), dark lightness.
+     PRIMARY (`--brand-tint`) carries enough chroma to read as visibly lavender
+     against the page canvas; LIGHT / SUBTLE steps are elevation aides only. */
+  --brand-tint:        oklch(0.30 0.05 286.1);
+  --brand-tint-light:  oklch(0.34 0.04 286.1);
+  --brand-tint-subtle: oklch(0.26 0.025 286.1);
+}
+
+/* ==========================================================================
+   Theme: Exxat Prism · Rose · hue 343
+   Usage: <html class="theme-prism"> or <html class="theme-rose">
+   ========================================================================== */
+.theme-prism,
+.theme-rose {
+  --brand-tint:         oklch(0.97 0.02 343);
+  --brand-tint-light:   oklch(0.992 0.01 343);
+  --brand-tint-subtle:  oklch(0.93 0.028 343);
+  --brand-color:        oklch(0.57 0.24 342);   /* Prism rose */
+  --brand-color-light:  oklch(0.78 0.14 342);
+  --brand-color-dark:   oklch(0.42 0.24 342);
+  --brand-color-deep:   oklch(0.32 0.20 342);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-prism:not(.dark),
+.theme-rose:not(.dark) {
+  --sidebar:          oklch(0.97 0.02 343);
+  --sidebar-accent:   oklch(0.945 0.025 343);
+  --sidebar-border:   oklch(0.92 0.025 343);
+  --secondary:        oklch(0.95 0.012 343);
+  --accent:           oklch(0.925 0.015 343);
+  --muted:            oklch(0.945 0.008 343);
+  --banner-prism-bg:  oklch(0.97 0.02 343);
+  --theme-color-chrome: #fff5f9;
+}
+
+.theme-prism.dark,
+.dark.theme-prism,
+.theme-rose.dark,
+.dark.theme-rose {
+  --ring:             var(--brand-color);
+  --background:       oklch(0.20 0.014 342);
+  --sidebar:          oklch(0.245 0.045 342);
+  --sidebar-accent:   oklch(0.30 0.04 342);
+  --sidebar-border:   oklch(0.38 0.028 342);
+  --secondary:        oklch(0.31 0.04 342);
+  --muted:              oklch(0.31 0.04 342);
+  --accent:             oklch(0.33 0.06 342);
+  --theme-color-chrome: #2a2428;
+  /* Surface elevation ladder — see commentary in .theme-one.dark. Chroma is a
+     touch higher than lavender at every step because rose reads slightly
+     dimmer at equal chroma at these lightnesses. */
+  --secondary-panel-bg: oklch(0.22  0.030 342);
+  --card:               oklch(0.225 0.020 342);
+  --popover:            oklch(0.275 0.026 342);
+  --input-background:   oklch(0.245 0.011 342);
+  /* Brand-tint scale — same hue (342 — Prism rose), dark lightness. Rose can
+     carry slightly higher chroma without warming-shift on dark surfaces. */
+  --brand-tint:        oklch(0.30 0.055 342);
+  --brand-tint-light:  oklch(0.34 0.045 342);
+  --brand-tint-subtle: oklch(0.26 0.028 342);
+}
+
+/* ==========================================================================
+   Theme: Exxat Assessment · Green · hue 159.88
+   Usage: <html class="theme-assessment">
+   ========================================================================== */
+.theme-assessment {
+  --brand-tint:         oklch(0.965 0.018 159.88);
+  --brand-tint-light:   oklch(0.992 0.008 159.88);
+  --brand-tint-subtle:  oklch(0.93 0.028 159.88);
+  --brand-color:        oklch(0.7 0.0913 159.88);
+  --brand-color-light:  oklch(0.82 0.072 159.88);
+  --brand-color-dark:   oklch(0.48 0.0913 159.88);
+  --brand-color-deep:   oklch(0.34 0.075 159.88);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-assessment:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(0.945 0.026 159.88);
+  --sidebar-border:     oklch(0.90 0.026 159.88);
+  --secondary:          oklch(0.95 0.012 159.88);
+  --accent:             oklch(0.925 0.016 159.88);
+  --muted:              oklch(0.945 0.008 159.88);
+  --theme-color-chrome: #f1faf5;
+}
+
+.theme-assessment.dark,
+.dark.theme-assessment {
+  --ring:               var(--brand-color);
+  --background:         oklch(0.20 0.014 159.88);
+  --sidebar:            oklch(0.245 0.04 159.88);
+  --sidebar-accent:     oklch(0.30 0.035 159.88);
+  --sidebar-border:     oklch(0.38 0.025 159.88);
+  --secondary:          oklch(0.31 0.04 159.88);
+  --muted:              oklch(0.31 0.04 159.88);
+  --accent:             oklch(0.33 0.06 159.88);
+  --theme-color-chrome: #242a27;
+  /* Surface elevation ladder — see commentary in .theme-one.dark. */
+  --secondary-panel-bg: oklch(0.22  0.025 159.88);
+  --card:               oklch(0.225 0.017 159.88);
+  --popover:            oklch(0.275 0.022 159.88);
+  --input-background:   oklch(0.245 0.010 159.88);
+  /* Brand-tint scale — same hue (159.88 — Assessment teal-green), dark
+     lightness. Green at this lightness reads cleanly against the dark canvas. */
+  --brand-tint:         oklch(0.30 0.05 159.88);
+  --brand-tint-light:   oklch(0.34 0.04 159.88);
+  --brand-tint-subtle:  oklch(0.26 0.025 159.88);
+}
+
+/* ==========================================================================
+   Theme: Custom product · user-selected hue
+   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">
+   ========================================================================== */
+/*
+ * Tint chroma is **derived from the source's chroma** so neighbouring hues
+ * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale
+ * tints instead of collapsing to the same near-white. The earlier formula
+ * pinned chroma to a fixed `0.018`, which is below the hue-discrimination
+ * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo /
+ * Purple looked identical in the sidebar.
+ *
+ * `max(<floor>, calc(c * <fraction>))` rules:
+ *   - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted
+ *     sidebar / accent / muted scale → product chrome visibly changes per
+ *     pick
+ *   - low-chroma custom-hex picks (greys) fall back to the floor so they
+ *     don't render as pure white
+ *   - lightness + hue stay pinned to the original mock-up values, so the
+ *     overall "very pale background" feel is unchanged
+ */
+.theme-custom {
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.93  max(0.028, calc(c * 0.30)) h);
+  --brand-color:        var(--custom-product-brand-color);
+  --brand-color-light:  oklch(from var(--custom-product-brand-color) 0.82 c h);
+  --brand-color-dark:   oklch(from var(--custom-product-brand-color) 0.48 c h);
+  --brand-color-deep:   oklch(from var(--custom-product-brand-color) 0.34 c h);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-custom:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.90  max(0.026, calc(c * 0.28)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.95  max(0.012, calc(c * 0.14)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white);
+}
+
+.theme-custom.dark,
+.dark.theme-custom {
+  --ring:               var(--brand-color);
+  --background:         oklch(from var(--custom-product-brand-color) 0.20  max(0.014, calc(c * 0.12)) h);
+  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.035, calc(c * 0.28)) h);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.030, calc(c * 0.24)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.022, calc(c * 0.18)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.33  max(0.06,  calc(c * 0.50)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 12%, black);
+  /* Surface elevation ladder — derived from the custom picked hue. See
+     commentary in .theme-one.dark for the full ladder. Chroma scales with
+     the source colour (~13% for inline cards / 16% for floating popovers /
+     20% for secondary panel) with floors that keep near-grey picks from
+     collapsing back to neutral. */
+  --secondary-panel-bg: oklch(from var(--custom-product-brand-color) 0.22  max(0.020, calc(c * 0.20)) h);
+  --card:               oklch(from var(--custom-product-brand-color) 0.225 max(0.015, calc(c * 0.13)) h);
+  --popover:            oklch(from var(--custom-product-brand-color) 0.275 max(0.018, calc(c * 0.16)) h);
+  --input-background:   oklch(from var(--custom-product-brand-color) 0.245 max(0.008, calc(c * 0.08)) h);
+  /* Brand-tint scale — derived from the picked hue, dark lightness. PRIMARY
+     carries chroma high enough for the secondary panel to read as the brand
+     hue; floor 0.04 prevents low-chroma picks (greys) from collapsing back to
+     a flat surface. */
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.30 max(0.04,  calc(c * 0.30)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.34 max(0.03,  calc(c * 0.24)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.26 max(0.022, calc(c * 0.20)) h);
+}
+
+/* ==========================================================================
+   HIGH CONTRAST MODE
+   ──────────────────────────────────────────────────────────────────────────
+   Three guiding principles (WCAG 1.4.6 Enhanced + research-backed UX):
+
+   1. FORCED-COLORS APPROACH
+      Strip gradients, shadows, and background images.
+      Use borders to define shape and elevation — not fills.
+      Limited palette: 4–6 named tokens, nothing decorative.
+
+   2. DON'T RELY ON COLOR ALONE
+      Error/warning states get a thick border AND an icon differentiator.
+      Charts and badges use luminance separation (grayscale steps), not hue.
+      Interactive state (hover / focus / active) is communicated via outline,
+      not background-color change alone.
+
+   3. DARK MODE ≠ HIGH CONTRAST
+      Dark mode  = aesthetic; uses subtle greys.
+      High-contrast dark = functional; uses near-black grey canvas, pure white
+      (#FFF), and a "hot" neon-yellow focus accent for maximum visibility.
+   ========================================================================== */
+
+/* ── Light High Contrast ─────────────────────────────────────────────────── */
+/*    Fluent 2 / Microsoft 6-color strategy.                                 */
+/*    Highlight = saturated bright brand color (follows theme hue).           */
+html[data-contrast="high"]:not(.dark) {
+  --hc-highlight: oklch(from var(--brand-color) 0.35 0.30 h);
+  --hc-highlight-text: oklch(1 0 0);
+
+  --background:         oklch(1 0 0);
+  --foreground:         oklch(0.14 0 0);
+  --card:               oklch(1 0 0);
+  --card-foreground:    oklch(0.14 0 0);
+  --popover:            oklch(1 0 0);
+  --popover-foreground: oklch(0.14 0 0);
+  --primary:            oklch(0.14 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary:            oklch(1 0 0);
+  --secondary-foreground: oklch(0.14 0 0);
+  --muted:            oklch(0.94 0 0);
+  --muted-foreground: oklch(0.14 0 0);
+  --accent:            var(--hc-highlight);
+  --accent-foreground: var(--hc-highlight-text);
+  --destructive:            oklch(0.45 0.24 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border:            oklch(0.14 0 0);
+  --border-control:    oklch(0.14 0 0);
+  --border-control-3:  oklch(0.14 0 0);
+  --border-control-35: oklch(0.14 0 0);
+  --control-border:    oklch(0.14 0 0);
+  --input:            oklch(0.14 0 0);
+  --input-background: oklch(1 0 0);
+  --ring: var(--hc-highlight);
+  --sidebar:                    oklch(1 0 0);
+  --sidebar-foreground:         oklch(0.14 0 0);
+  --sidebar-primary:            oklch(0.14 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent:             oklch(0.90 0 0);
+  --sidebar-accent-foreground:  oklch(0.14 0 0);
+  --sidebar-border:             oklch(0.14 0 0);
+  --sidebar-ring:               var(--hc-highlight);
+  --sidebar-section-label-foreground: oklch(0.40 0 0);
+  --chart-1: oklch(0.14 0 0);
+  --chart-2: oklch(0.35 0 0);
+  --chart-3: oklch(0.55 0 0);
+  --chart-4: oklch(0.72 0 0);
+  --chart-5: oklch(0.86 0 0);
+  --chip-1:           oklch(0.14 0 0);
+  --chip-2:           oklch(0.14 0 0);
+  --chip-3:           oklch(0.14 0 0);
+  --chip-4:           oklch(0.14 0 0);
+  --chip-5:           oklch(0.14 0 0);
+  --chip-destructive: oklch(0.45 0.24 25);
+  --interactive-hover:            oklch(0.88 0 0);
+  --interactive-hover-foreground: oklch(0.14 0 0);
+  --interactive-hover-subtle:     oklch(0.92 0 0);
+  --interactive-hover-soft:       oklch(0.92 0 0);
+  --interactive-hover-medium:     oklch(0.86 0 0);
+  --interactive-hover-strong:     oklch(0.82 0 0);
+  --interactive-hover-row:        oklch(0.88 0 0);
+  --overlay: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --dt-row-bg:          oklch(1 0 0);
+  --dt-row-hover:       oklch(0.92 0 0);
+  --dt-row-selected:    var(--accent);
+  --dt-row-selected-fg: var(--accent-foreground);
+  --dt-header-bg:       oklch(1 0 0);
+  --dt-group-bg:        oklch(0.92 0 0);
+  --dt-new-row-bg:      oklch(1 0 0);
+  --dt-new-row-border:  oklch(0.14 0 0);
+}
+
+/* ── Dark High Contrast ──────────────────────────────────────────────────── */
+/*    Same 6-color strategy inverted for dark canvas.                        */
+/*    Highlight = very bright saturated brand (like MS cyan but brand hue).  */
+html[data-contrast="high"].dark {
+  --hc-highlight: oklch(from var(--brand-color) 0.78 0.30 h);
+  --hc-highlight-text: oklch(0.08 0 0);
+
+  --background:         oklch(0.14 0 0);
+  --foreground:         oklch(0.96 0 0);
+  --card:               oklch(0.14 0 0);
+  --card-foreground:    oklch(0.96 0 0);
+  --popover:            oklch(0.20 0 0);
+  --popover-foreground: oklch(0.96 0 0);
+  --primary:            oklch(0.96 0 0);
+  --primary-foreground: oklch(0.10 0 0);
+  --secondary:            oklch(0.14 0 0);
+  --secondary-foreground: oklch(0.96 0 0);
+  --muted:            oklch(0.22 0 0);
+  --muted-foreground: oklch(0.96 0 0);
+  --accent:            var(--hc-highlight);
+  --accent-foreground: var(--hc-highlight-text);
+  --destructive:            oklch(0.72 0.18 18);
+  --destructive-foreground: oklch(0.10 0 0);
+  --border:            oklch(0.75 0 0);
+  --border-control:    oklch(0.75 0 0);
+  --border-control-3:  oklch(0.75 0 0);
+  --border-control-35: oklch(0.75 0 0);
+  --control-border:    oklch(0.75 0 0);
+  --input:            oklch(0.75 0 0);
+  --input-background: oklch(0.14 0 0);
+  --ring: var(--hc-highlight);
+  --sidebar:                    oklch(0.14 0 0);
+  --sidebar-foreground:         oklch(0.96 0 0);
+  --sidebar-primary:            oklch(0.96 0 0);
+  --sidebar-primary-foreground: oklch(0.10 0 0);
+  --sidebar-accent:             oklch(0.24 0 0);
+  --sidebar-accent-foreground:  oklch(0.96 0 0);
+  --sidebar-border:             oklch(0.75 0 0);
+  --sidebar-ring:               var(--hc-highlight);
+  --sidebar-section-label-foreground: oklch(0.65 0 0);
+  --chart-1: oklch(0.96 0 0);
+  --chart-2: oklch(0.75 0 0);
+  --chart-3: oklch(0.55 0 0);
+  --chart-4: oklch(0.38 0 0);
+  --chart-5: oklch(0.22 0 0);
+  --chip-1:           oklch(0.96 0 0);
+  --chip-2:           oklch(0.96 0 0);
+  --chip-3:           oklch(0.96 0 0);
+  --chip-4:           oklch(0.96 0 0);
+  --chip-5:           oklch(0.96 0 0);
+  --chip-destructive: oklch(0.72 0.18 18);
+  --interactive-hover:            oklch(0.26 0 0);
+  --interactive-hover-foreground: oklch(0.96 0 0);
+  --interactive-hover-subtle:     oklch(0.22 0 0);
+  --interactive-hover-soft:       oklch(0.22 0 0);
+  --interactive-hover-medium:     oklch(0.28 0 0);
+  --interactive-hover-strong:     oklch(0.32 0 0);
+  --interactive-hover-row:        oklch(0.26 0 0);
+  --overlay: color-mix(in oklch, var(--foreground) 22%, transparent);
+  --dt-row-bg:          oklch(0.14 0 0);
+  --dt-row-hover:       oklch(0.22 0 0);
+  --dt-row-selected:    var(--accent);
+  --dt-row-selected-fg: var(--accent-foreground);
+  --dt-header-bg:       oklch(0.14 0 0);
+  --dt-group-bg:        oklch(0.22 0 0);
+  --dt-new-row-bg:      oklch(0.14 0 0);
+  --dt-new-row-border:  oklch(0.96 0 0);
+}
+
+/* Neutralize brand tint washes in HC so bg-brand-tint doesn't compete     */
+html:is([data-contrast="high"], [data-contrast="windows"]):not(.dark) {
+  --brand-tint:        oklch(0.94 0 0);
+  --brand-tint-light:  oklch(0.97 0 0);
+  --brand-tint-subtle: oklch(0.98 0 0);
+}
+html:is([data-contrast="high"], [data-contrast="windows"]).dark {
+  --brand-tint:        oklch(0.22 0 0);
+  --brand-tint-light:  oklch(0.18 0 0);
+  --brand-tint-subtle: oklch(0.16 0 0);
+}
+
+/* ── Structural rules shared by BOTH light and dark HC ──────────────────── */
+/*    Pattern 1: "Borders over Fills" — strip decorative chrome              */
+html:is([data-contrast="high"], [data-contrast="windows"]) {
+
+  /* 1a. Remove ALL box-shadows (elevation via outline, not shadow) */
+  & * {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  /* 1b. Strip gradient fills from cards; use border to define shape */
+  & [data-slot="card"] {
+    background-image: none !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  /* 1c. Thicker borders on all form controls (WCAG 1.4.11: 3:1 UI contrast) */
+  & [data-slot="input"],
+  & [data-slot="select-trigger"],
+  & [data-slot="textarea"],
+  & [data-slot="checkbox"],
+  & [data-slot="switch"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+  }
+
+  /* 1d. Sidebar defined by its edge border, not background colour */
+  & [data-slot="sidebar"] {
+    border-inline-end: 2px solid var(--sidebar-border) !important;
+  }
+
+  /* 1e. Tab list — border not fill */
+  & [data-slot="tabs-list"] {
+    background-color: transparent !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  /* 1f. Badge / chip — border-based; no decorative fills */
+  & [data-slot="badge"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="badge"] * {
+    color: var(--foreground) !important;
+  }
+
+  /* Status chip — same treatment as Badge (border-based, no decorative fill) */
+  & [data-slot="status-badge"] {
+    border-width: 2px !important;
+    border-color: var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Sidebar wrapper is positioning-only when it wraps Badge/StatusBadge — avoid double border */
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]),
+  & [data-slot="sidebar-menu-badge"]:has([data-slot="status-badge"]) {
+    border-width: 0 !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+  & [data-slot="view-toolbar-count"] {
+    border-width: 2px !important;
+    border-color: currentColor !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+  & [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])):not(:has([data-slot="status-badge"])) {
+    border-width: 2px !important;
+    border-color: currentColor !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Segmented tab buttons: global HC button border + count pill border = double ring */
+  & button[data-slot="view-segmented-item"] {
+    border-width: 0 !important;
+    border-color: transparent !important;
+  }
+
+  /* Radix Tabs — active state must not rely on muted fill / pseudo underline only */
+  & [data-slot="tabs-trigger"] {
+    color: var(--foreground) !important;
+    opacity: 1 !important;
+  }
+
+  & [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+    font-weight: 600 !important;
+  }
+
+  /* KPI strip + chart card mini-metrics — force readable copy (muted grays fail in HC) */
+  & [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="key-metrics"] :where(svg) {
+    color: var(--foreground) !important;
+  }
+
+  /* List / menu rows — Highlight brand color for selection */
+  & [data-slot="dropdown-menu-item"][data-highlighted],
+  & [data-slot="dropdown-menu-checkbox-item"][data-highlighted],
+  & [data-slot="dropdown-menu-radio-item"][data-highlighted],
+  & [data-slot="dropdown-menu-sub-trigger"][data-highlighted],
+  & [data-slot="select-item"][data-highlighted],
+  & [data-slot="command-item"][data-selected],
+  & [data-slot="command-item"][aria-selected="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  & [data-slot="dropdown-menu-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-radio-item"][data-highlighted] *,
+  & [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *,
+  & [data-slot="select-item"][data-highlighted] *,
+  & [data-slot="command-item"][data-selected] *,
+  & [data-slot="command-item"][aria-selected="true"] * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* List hub views toolbar + segmented radiogroup (not Radix Tabs / tabs-list) */
+  & [data-slot="view-segmented-toolbar"] {
+    background-color: transparent !important;
+    border: 2px solid var(--foreground) !important;
+  }
+
+  & [data-slot="view-segmented-item"][aria-pressed="true"],
+  & [data-slot="view-segmented-item"][aria-checked="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+  }
+
+  /* Floating surfaces — portal menus, popovers, sheets, dialogs */
+  & [data-slot="dropdown-menu-content"],
+  & [data-slot="dropdown-menu-sub-content"],
+  & [data-slot="popover-content"],
+  & [data-slot="select-content"],
+  & [data-slot="dialog-content"],
+  & [data-slot="sheet-content"],
+  & [data-slot="drawer-content"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  & [data-slot="command"] {
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  /* Strip conditional-formatting inline bg from table cells in HC */
+  & td[style*="background"] {
+    background: var(--dt-row-bg) !important;
+  }
+  & td.pinned-cell {
+    background-color: var(--dt-row-bg) !important;
+  }
+  & tr:hover td.pinned-cell,
+  & tr:hover td {
+    background-color: var(--dt-row-hover) !important;
+  }
+  & tr[data-state="selected"] td.pinned-cell,
+  & tr[data-state="selected"] td {
+    background-color: var(--dt-row-selected) !important;
+    color: var(--dt-row-selected-fg) !important;
+  }
+
+  /* Table selected rows — Highlight brand color (like MS Teams selection) */
+  & tr[data-state="selected"] {
+    background-color: var(--dt-row-selected) !important;
+    color: var(--dt-row-selected-fg) !important;
+  }
+  & tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
+    color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="badge"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="badge"] * {
+    color: var(--accent) !important;
+  }
+
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: var(--accent-foreground) !important;
+    border-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+  }
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
+  & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: var(--accent) !important;
+  }
+  & tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
+    background-color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 2: Stronger focus ring (WCAG 2.4.11 / 2.4.12) ── */
+  & :focus-visible {
+    outline: 3px solid var(--ring) !important;
+    outline-offset: 3px !important;
+  }
+
+  /* ── Pattern 2: Error state — thick border + no colour-only signal ── */
+  & [aria-invalid="true"],
+  & [data-invalid] {
+    border-width: 3px !important;
+    border-color: var(--destructive) !important;
+    /* Downstream: pair with a ⚠ icon in the component for non-colour signal */
+  }
+
+  /* ── Pattern 3: Active nav — Highlight brand fill (like MS Teams) ── */
+  & [data-slot="sidebar-menu-button"][data-active="true"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    outline: none !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] * {
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+    border-color: var(--accent-foreground) !important;
+  }
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
+  & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
+    color: var(--accent) !important;
+  }
+  & [data-slot="toggle-group-item"][data-state="on"] {
+    outline: 2px solid var(--accent) !important;
+    outline-offset: -2px !important;
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3b: Checked checkboxes — Highlight brand fill ── */
+  & [data-slot="checkbox"][data-state="checked"],
+  & [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="checkbox"][data-state="checked"] *,
+  & [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3c: Checked radio buttons — Highlight brand fill ── */
+  & [data-slot="radio-group-item"][data-state="checked"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="radio-group-item"][data-state="checked"] [data-slot="radio-group-indicator"] span {
+    background-color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3d: Toggle on state — Highlight brand fill ── */
+  & [data-slot="toggle"][data-state="on"] {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+    border: 2px solid var(--accent) !important;
+  }
+
+  /* ── Pattern 3e: Switch (toggle-switch) — visible track + knob ── */
+  & [role="switch"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+  }
+  & [role="switch"][aria-checked="true"] {
+    background-color: var(--accent) !important;
+    border-color: var(--accent) !important;
+  }
+  & [role="switch"] > span {
+    background-color: var(--foreground) !important;
+  }
+  & [role="switch"][aria-checked="true"] > span {
+    background-color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3f: Select / dropdown item focus — Highlight brand fill ── */
+  & [data-slot="select-item"]:focus,
+  & [data-slot="dropdown-menu-item"]:focus,
+  & [data-slot="dropdown-menu-checkbox-item"]:focus,
+  & [data-slot="dropdown-menu-radio-item"]:focus,
+  & [data-slot="dropdown-menu-sub-trigger"]:focus {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+  & [data-slot="select-item"]:focus *,
+  & [data-slot="dropdown-menu-item"]:focus *,
+  & [data-slot="dropdown-menu-checkbox-item"]:focus *,
+  & [data-slot="dropdown-menu-radio-item"]:focus *,
+  & [data-slot="dropdown-menu-sub-trigger"]:focus * {
+    color: var(--accent-foreground) !important;
+  }
+
+  /* ── Pattern 3g: Dropdown check / radio indicator — inherit from parent ── */
+  & [data-slot="dropdown-menu-checkbox-item"][data-state="checked"],
+  & [data-slot="dropdown-menu-radio-item"][data-state="checked"] {
+    font-weight: 700 !important;
+  }
+
+  /* ── Pattern 4: Board cards — border-defined, no decorative fills ── */
+  & [data-slot="board-card"] {
+    border: 2px solid var(--foreground) !important;
+    background-image: none !important;
+  }
+
+  /* ── Pattern 6: List hub status badges — border not fill ── */
+  & [data-slot="list-hub-status-badge"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    font-weight: 700 !important;
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 7: Insight cards — border-based, strip gradient bg ── */
+  & [aria-label="Insight"],
+  & [data-slot="insight-card"] {
+    border: 2px solid var(--foreground) !important;
+    background-image: none !important;
+    background: var(--background) !important;
+  }
+
+  /* ── Pattern 8: Coach marks — strong border + readable text ── */
+  & [data-slot="coach-mark"] {
+    border: 2px solid var(--foreground) !important;
+    background: var(--background) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+    background-image: none !important;
+    opacity: 1 !important;
+  }
+  & [data-slot="coach-mark"] *:not(button):not(button *) {
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 9: Avatars — thicken ring, strip blend modes, force contrast ── */
+  & [data-slot="avatar"] {
+    border: 2px solid var(--foreground) !important;
+  }
+  & [data-slot="avatar"]::after {
+    display: none !important;
+  }
+  & [data-slot="avatar-fallback"] {
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="avatar"] {
+    border-color: var(--accent-foreground) !important;
+  }
+  & tr[data-state="selected"] [data-slot="avatar-fallback"] {
+    background-color: var(--accent-foreground) !important;
+    color: var(--accent) !important;
+  }
+
+  /* ── Pattern 10: Breadcrumbs — ensure separators are visible ── */
+  & [data-slot="breadcrumb-separator"] {
+    color: var(--foreground) !important;
+  }
+  & [data-slot="breadcrumb-link"] {
+    color: var(--foreground) !important;
+    text-decoration: underline !important;
+  }
+  & [data-slot="breadcrumb-page"] {
+    color: var(--foreground) !important;
+    font-weight: 700 !important;
+  }
+
+  /* ── Pattern 11: Tooltip / popover arrow — match border ── */
+  & [data-slot="tooltip-content"] {
+    border: 2px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+    color: var(--foreground) !important;
+  }
+
+  /* ── Pattern 12: Separator — visible in HC ── */
+  & [data-slot="separator"] {
+    background-color: var(--foreground) !important;
+    opacity: 1 !important;
+  }
+
+  /* ── Pattern 13: Strip ALL hardcoded Tailwind palette colors ──────────── */
+  & [data-slot="banner"],
+  & [data-slot="local-banner"] {
+    background-color: var(--background) !important;
+    background-image: none !important;
+    border: 2px solid var(--foreground) !important;
+    color: var(--foreground) !important;
+  }
+  & [data-slot="banner"] *,
+  & [data-slot="local-banner"] * {
+    color: var(--foreground) !important;
+  }
+
+  & .recharts-bar-rectangle,
+  & .recharts-funnel-trapezoid {
+    stroke: var(--background) !important;
+    stroke-width: 2 !important;
+  }
+
+  & [role="progressbar"] {
+    border: 1px solid var(--foreground) !important;
+    background-color: var(--background) !important;
+  }
+  & [role="progressbar"] > * {
+    background-color: var(--foreground) !important;
+  }
+
+  & [class*="text-emerald"],
+  & [class*="text-amber"],
+  & [class*="text-red-"],
+  & [class*="text-blue-"],
+  & [class*="text-green-"],
+  & [class*="text-yellow-"],
+  & [class*="text-slate-"],
+  & [class*="text-orange-"],
+  & [class*="text-pink-"],
+  & [class*="text-purple-"] {
+    color: var(--foreground) !important;
+  }
+
+  & [class*="text-brand"] {
+    color: var(--accent) !important;
+  }
+  & [class*="bg-brand"]:not([data-slot="coach-mark"]) {
+    background-color: var(--background) !important;
+  }
+  & [class*="border-brand"] {
+    border-color: var(--foreground) !important;
+  }
+
+  & [class*="bg-emerald"],
+  & [class*="bg-amber"],
+  & [class*="bg-red-"],
+  & [class*="bg-blue-"],
+  & [class*="bg-green-"],
+  & [class*="bg-yellow-"],
+  & [class*="bg-slate-"],
+  & [class*="bg-orange-"],
+  & [class*="bg-pink-"],
+  & [class*="bg-purple-"] {
+    background-color: var(--background) !important;
+  }
+
+  & [class*="border-emerald"],
+  & [class*="border-amber"],
+  & [class*="border-red-"],
+  & [class*="border-blue-"],
+  & [class*="border-green-"],
+  & [class*="border-yellow-"],
+  & [class*="border-slate-"],
+  & [class*="border-orange-"],
+  & [class*="border-pink-"],
+  & [class*="border-purple-"] {
+    border-color: var(--foreground) !important;
+  }
+}
+
+/* Coach mark HC override (top-level, outside nesting — bulletproof for portaled content) */
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] {
+  border: 2px solid var(--foreground) !important;
+  background: var(--background) !important;
+  background-color: var(--background) !important;
+  color: var(--foreground) !important;
+  background-image: none !important;
+  opacity: 1 !important;
+}
+html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] *:not(button):not(button *) {
+  color: var(--foreground) !important;
+}
+
+/* ── OS-level "Increase Contrast" — macOS / iOS / Android ───────────────── */
+@media (prefers-contrast: more) {
+  :root:not([data-contrast="off"]):not([data-contrast="windows"]) {
+    --foreground:        oklch(0.06 0 0);
+    --muted-foreground:  oklch(0.10 0 0);
+    --border:            oklch(0.10 0 0);
+    --border-control:    oklch(0.06 0 0);
+    --border-control-35: oklch(0.06 0 0);
+    --border-control-3:  oklch(0.06 0 0);
+    --ring:              oklch(0.06 0 0);
+  }
+  .dark:not([data-contrast="off"]):not([data-contrast="windows"]) {
+    --foreground:        oklch(1 0 0);
+    --muted-foreground:  oklch(0.88 0 0);
+    --border:            oklch(1 0 0);
+    --border-control:    oklch(0.88 0 0);
+    --border-control-35: oklch(0.88 0 0);
+    --border-control-3:  oklch(0.88 0 0);
+    --ring:              oklch(0.97 0.19 110);  /* neon yellow on dark */
+  }
+}
+
+/* ── Windows Forced Colors (High Contrast Mode in OS) ───────────────────── */
+/*    When `forced-colors: active`, Windows REPLACES our colours entirely.   */
+/*    Our job: map semantic roles to system palette keywords so the OS       */
+/*    colouring makes sense, and ensure borders/outlines remain visible.     */
+@media (forced-colors: active) {
+  :root {
+    --border:            CanvasText;
+    --border-control:    CanvasText;
+    --border-control-35: CanvasText;
+    --border-control-3:  CanvasText;
+    --ring:              Highlight;
+    --destructive:       LinkText;
+  }
+
+  /* Always show a 2px outline so focus is forced-color-safe */
+  :focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px !important;
+  }
+
+  body {
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  a          { color: LinkText; }
+  button     { border: 1px solid ButtonText !important; }
+
+  /* Cards: OS strips bg fills — add explicit border so shape is preserved */
+  [data-slot="card"],
+  .card {
+    border: 2px solid CanvasText !important;
+  }
+
+  /* Sidebar edge */
+  [data-slot="sidebar"] {
+    border-inline-end: 2px solid CanvasText !important;
+  }
+
+  /* Wrapper-only sidebar badge (no inner Badge) — rare; keep single ring */
+  [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])) {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Positioning shell around <Badge/> — do not draw a second ring */
+  [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]) {
+    border: none !important;
+    background: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot="badge"],
+  [data-slot="view-toolbar-count"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot="badge"] *,
+  [data-slot="view-toolbar-count"] * {
+    color: CanvasText !important;
+  }
+
+  /* Avoid button chrome + inner count pill = double border */
+  button[data-slot="view-segmented-item"] {
+    border: none !important;
+  }
+
+  /* Radix Tabs (ChartCard, library, etc.) — gray inactive + invisible active in OS HC */
+  [data-slot="tabs-list"] {
+    border: 2px solid CanvasText !important;
+    background-color: transparent !important;
+  }
+
+  [data-slot="tabs-trigger"] {
+    color: CanvasText !important;
+    background-color: transparent !important;
+    opacity: 1 !important;
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+    font-weight: 600 !important;
+  }
+
+  /* Key metrics strip — labels/values/trend icons must not stay muted */
+  [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) {
+    color: CanvasText !important;
+  }
+
+  /* Menu / select / command palette — accent fill is often low-contrast in forced mode */
+  [data-slot="dropdown-menu-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-checkbox-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-radio-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="dropdown-menu-sub-trigger"][data-highlighted]:not([data-disabled]),
+  [data-slot="select-item"][data-highlighted]:not([data-disabled]),
+  [data-slot="command-item"][data-selected]:not([data-disabled]),
+  [data-slot="command-item"][aria-selected="true"]:not([data-disabled]) {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  [data-slot="dropdown-menu-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-radio-item"][data-highlighted] *,
+  [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *,
+  [data-slot="select-item"][data-highlighted] *,
+  [data-slot="command-item"][data-selected] *,
+  [data-slot="command-item"][aria-selected="true"] * {
+    color: HighlightText !important;
+  }
+
+  /* Views toolbar (list hubs) + segmented radiogroup — selection via outline, not fill */
+  [data-slot="view-segmented-toolbar"] {
+    border: 2px solid CanvasText !important;
+    background: transparent !important;
+  }
+
+  [data-slot="view-segmented-item"] {
+    color: CanvasText !important;
+    background: transparent !important;
+  }
+
+  [data-slot="view-segmented-item"][aria-pressed="true"],
+  [data-slot="view-segmented-item"][aria-checked="true"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+  }
+
+  /* Sidebar active item — Highlight brand fill */
+  [data-slot="sidebar-menu-button"][data-active="true"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    outline: none !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] * {
+    color: HighlightText !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"],
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+    border-color: HighlightText !important;
+  }
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *,
+  [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * {
+    color: Highlight !important;
+  }
+
+  /* Strip conditional-formatting inline bg in forced-colors */
+  td[style*="background"] {
+    background: Canvas !important;
+  }
+  td.pinned-cell {
+    background-color: Canvas !important;
+  }
+  tr:hover td,
+  tr:hover td.pinned-cell {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  /* Table selected rows — Highlight brand fill */
+  tr[data-state="selected"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] td {
+    background: Highlight !important;
+    background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) {
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"],
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: HighlightText !important;
+    border-color: HighlightText !important;
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *,
+  tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) {
+    background-color: Highlight !important;
+    border-color: HighlightText !important;
+    color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="badge"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+    border-color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="badge"] * {
+    color: Highlight !important;
+  }
+  tr[data-state="selected"] [data-slot="avatar"] {
+    border-color: HighlightText !important;
+  }
+  tr[data-state="selected"] [data-slot="avatar-fallback"] {
+    background-color: HighlightText !important;
+    color: Highlight !important;
+  }
+  /* Badge in forced-colors — opaque canvas bg */
+  [data-slot="badge"] {
+    background-color: Canvas !important;
+    border-color: CanvasText !important;
+    color: CanvasText !important;
+  }
+
+  /* Checked checkboxes — Highlight fill */
+  [data-slot="checkbox"][data-state="checked"] *,
+  [data-slot="checkbox"][data-state="indeterminate"] * {
+    color: HighlightText !important;
+  }
+
+  /* Avatar in forced-colors */
+  [data-slot="avatar"] {
+    border: 2px solid CanvasText !important;
+  }
+  [data-slot="avatar"]::after {
+    display: none !important;
+  }
+  [data-slot="avatar-fallback"] {
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Checked checkboxes / radios — Highlight fill */
+  [data-slot="checkbox"][data-state="checked"],
+  [data-slot="checkbox"][data-state="indeterminate"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+    color: HighlightText !important;
+  }
+  [data-slot="radio-group-item"][data-state="checked"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+  }
+
+  /* Switch ON — Highlight fill */
+  [role="switch"][aria-checked="true"] {
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+  }
+  [role="switch"][aria-checked="true"] > span {
+    background-color: HighlightText !important;
+  }
+
+  /* Toggle ON — Highlight fill */
+  [data-slot="toggle"][data-state="on"],
+  [data-slot="toggle-group-item"][data-state="on"] {
+    background-color: Highlight !important;
+    color: HighlightText !important;
+    border-color: Highlight !important;
+  }
+
+  /* Progress bars — bordered track with CanvasText fill */
+  [role="progressbar"] {
+    border: 1px solid CanvasText !important;
+    background-color: Canvas !important;
+  }
+  [role="progressbar"] > * {
+    background-color: CanvasText !important;
+  }
+
+  /* Portal overlays — explicit Canvas pairing (OS often strips popover fills) */
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"],
+  [data-slot="dialog-content"],
+  [data-slot="sheet-content"],
+  [data-slot="drawer-content"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  [data-slot="command"] {
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Board cards — border-defined shape when fills are stripped */
+  [data-slot="board-card"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* List hub status badges — border-only, text readable */
+  [data-slot="list-hub-status-badge"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+    font-weight: 700 !important;
+  }
+
+  /* Insight cards — strip gradient, add border */
+  [aria-label="Insight"],
+  [data-slot="insight-card"] {
+    border: 2px solid CanvasText !important;
+    background: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Coach marks / guided tours */
+  [data-slot="coach-mark"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+  [data-slot="coach-mark"] * {
+    color: CanvasText !important;
+  }
+
+  /* Avatars — thicken existing ::after ring */
+  [data-slot="avatar"]::after {
+    border-width: 2px !important;
+    border-color: CanvasText !important;
+  }
+
+  /* Breadcrumbs */
+  [data-slot="breadcrumb-separator"] {
+    color: CanvasText !important;
+  }
+  [data-slot="breadcrumb-link"] {
+    color: LinkText !important;
+  }
+  [data-slot="breadcrumb-page"] {
+    color: CanvasText !important;
+    font-weight: 700 !important;
+  }
+
+  /* Tooltip */
+  [data-slot="tooltip-content"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Export drawer */
+  [data-slot="export-drawer"] {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+    color: CanvasText !important;
+  }
+
+  /* Separators */
+  [data-slot="separator"] {
+    background-color: CanvasText !important;
+    opacity: 1 !important;
+  }
+
+  /* Charts — forced-colors strips SVG fills; add stroke as fallback */
+  svg path, svg rect, svg circle {
+    forced-color-adjust: none;
+  }
+
+  /* Recharts radial bars, lines, and area — explicit stroke fallbacks */
+  .recharts-radial-bar-sector,
+  .recharts-line-curve,
+  .recharts-area-curve {
+    forced-color-adjust: none;
+    stroke: CanvasText !important;
+  }
+
+  .recharts-radial-bar-background-sector {
+    forced-color-adjust: none;
+    fill: Canvas !important;
+    stroke: GrayText !important;
+  }
+
+  .recharts-cartesian-axis-tick-value {
+    fill: CanvasText !important;
+  }
+
+  .recharts-cartesian-grid line {
+    stroke: GrayText !important;
+  }
+
+  .recharts-legend-item-text {
+    color: CanvasText !important;
+  }
+
+  .recharts-tooltip-wrapper {
+    border: 2px solid CanvasText !important;
+    background-color: Canvas !important;
+  }
+}
+
+/* ==========================================================================
+   Base layer — global element defaults with AA focus management
+   ========================================================================== */
+@layer base {
+  /* Reset + border-color default */
+  *, *::before, *::after {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  /* Body — outer canvas matches sidebar; main column uses bg-background (white in light) */
+  body {
+    @apply bg-sidebar text-foreground antialiased;
+    font-family: var(--font-sans);
+    /* 14px baseline on body. 1rem stays = 16px so all shadcn rem-based
+       layout (spacing, heights, radii) is unaffected at any zoom level. */
+    font-size: 0.875rem;
+    line-height: 1.5;
+    /* Font smoothing (Tailwind `antialiased` = -webkit-font-smoothing + -moz-osx):
+       Industry practice per Josh Comeau’s CSS reset and 2024 cross-browser testing
+       (e.g. David Bushell): the -webkit property affects macOS WebKit browsers only —
+       it tones down browser-only subpixel AA (Mojave+ system UI already moved away).
+       Windows/Linux/iOS/Android: no practical effect; OS font rasterizer (ClearType, etc.)
+       owns rendering. Safe to apply on body for Mac parity without changing Windows output. */
+  }
+
+  html {
+    @apply font-sans;
+    color-scheme: light;
+    /* Match sidebar canvas (body) on overscroll */
+    background-color: var(--sidebar);
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  /* ── Focus management (WCAG 2.4.11 / 2.4.7) ──────────────────── */
+  /* Visible on keyboard navigation only; hidden for mouse users    */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm, 4px);
+  }
+
+  /* Suppress outline for mouse/touch (Safari workaround) */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* ── Reduced motion (WCAG 2.3.3) ────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* ── Touch targets (WCAG 2.5.5) ─────────────────────────────── */
+  /* Applied via utility: min-h-[var(--control-height-touch)]      */
+  /* Coarse pointer only: browser zoom (200–400%) shrinks the *layout* viewport
+     in CSS px, so max-width: 767px becomes true on desktop — without pointer: coarse,
+     44px min-height hits every button and [role=checkbox], stretching 16px-wide
+     checkboxes into tall pills and blowing up table/toolbar controls. Real phones
+     and tablets report pointer: coarse. */
+  @media (max-width: 767px) and (pointer: coarse) {
+    button,
+    [role="button"],
+    [role="radio"],
+    [role="switch"],
+    [role="menuitem"],
+    [role="tab"],
+    a {
+      min-height: var(--control-height-touch, 44px);
+    }
+  }
+  /* Checkboxes use compact box + pseudo-element hit slop (see ui/checkbox). */
+
+  /* ── Heading hierarchy ───────────────────────────────────────── */
+  /* Ivy Presto (font-heading) applied ONLY via explicit class/inline style
+     on PageHeader <h1>. All other headings use Inter (font-sans). */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-sans);
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--foreground);
+  }
+
+  /* ── Skip to main content (WCAG 2.4.1) ─────────────────────── */
+  .skip-to-content {
+    position: absolute;
+    left: -9999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    z-index: 9999;
+  }
+
+  .skip-to-content:focus {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    padding: 0.75rem 1.25rem;
+    background: var(--background);
+    color: var(--foreground);
+    border: 2px solid var(--ring);
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-size: 1rem;
+    z-index: 9999;
+  }
+}
+
+/* ==========================================================================
+   Utility layer — design-system helpers
+   ========================================================================== */
+@layer utilities {
+  /* Visually hidden but accessible to screen readers (WCAG 1.3.1) */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* AA-safe muted text — use instead of text-muted-foreground on light bg */
+  .text-aa-muted {
+    color: oklch(0.50 0.012 270); /* 5.5:1 on white ✓ */
+  }
+
+  /* Touch-target wrapper for icon buttons (mobile only) */
+  .touch-target {
+    min-height: var(--control-height-touch, 44px);
+    min-width:  var(--control-height-touch, 44px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (min-width: 768px) {
+    .touch-target {
+      min-height: unset;
+      min-width:  unset;
+    }
+  }
+
+  /* Form field border — use --control-border (3:1 minimum) */
+  .field-border {
+    border-color: var(--control-border);
+  }
+
+  /* Exxat Prism highlight banner */
+  .banner-prism {
+    background-color: var(--banner-prism-bg);
+  }
+
+  /* Sidebar nav — little pop when an item becomes active. Key swap on the
+     wrapper remounts the span, so the animation replays on selection. */
+  @keyframes sidebar-icon-pop {
+    0%   { opacity: 0.4; transform: scale(0.7)  rotate(-6deg); }
+    60%  { opacity: 1;   transform: scale(1.15) rotate(2deg); }
+    100% { opacity: 1;   transform: scale(1)    rotate(0); }
+  }
+
+  /* Radix Collapsible / Accordion — slide the children open/closed using the
+     `--radix-collapsible-content-height` CSS var that Radix sets on the
+     content element. Mirrors the shadcn accordion pattern (Tailwind v3
+     "accordion-down" / "accordion-up"); we keep our own name so it can be
+     reused by both Collapsible and Accordion primitives. */
+  @keyframes collapsible-down {
+    from { height: 0; }
+    to   { height: var(--radix-collapsible-content-height); }
+  }
+  @keyframes collapsible-up {
+    from { height: var(--radix-collapsible-content-height); }
+    to   { height: 0; }
+  }
+
+  /* Ask Leo suggestion chips — staggered fade-in + lift on first render. */
+  @keyframes leo-chip-in {
+    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
+    100% { opacity: 1; transform: translateY(0)   scale(1); }
+  }
+
+  /* Leo typing indicator — 3 dots bouncing opacity/scale, staggered via delay. */
+  @keyframes leo-typing-dot {
+    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+    40%           { opacity: 1;   transform: scale(1); }
+  }
+
+  /* Whole-panel brand radial glow pulse — runs on the BG layer while Leo thinks. */
+  @keyframes leo-panel-pulse {
+    0%, 100% { opacity: 0.5;  transform: scale(1); }
+    50%      { opacity: 0.75; transform: scale(1.01); }
+  }
+
+  /* Chart “Leo insight” marker — soft breathing halo behind the chip. */
+  @keyframes leo-chart-insight-halo {
+    0%, 100% { opacity: 0.45; transform: scale(1); }
+    50%      { opacity: 0.72; transform: scale(1.12); }
+  }
+
+  /* Accent dot on the insight marker — gentle pulse (respect motion-reduce in markup). */
+  @keyframes leo-chart-insight-dot {
+    0%, 100% { opacity: 0.9; transform: scale(1); }
+    50%      { opacity: 1; transform: scale(1.35); }
+  }
+}
+
+/* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */
+button:not(:disabled):not([disabled]),
+[role="button"]:not([aria-disabled="true"]):not([data-disabled]) {
+  cursor: pointer;
+}