/* ==========================================================================
   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. */

/* --------------------------------------------------------------------------
   Self-describing Tailwind sources — see docs/migrations/0003-globals-css-canonical.md
   --------------------------------------------------------------------------
   Tailwind v4 only emits a utility when it sees the class string in a scanned
   file. The package's component classes live in two different places depending
   on how the package is consumed:

     • Published npm install:  node_modules/@exxatdesignux/ui/dist/  (compiled JS)
     • Monorepo workspace dev: packages/ui/src/                     (.tsx sources)

   @source paths resolve relative to THIS file. Both forms below resolve
   correctly under both consumption modes; the missing branch (e.g. `./components`
   in a published install where src/components/ isn't shipped) is silently
   skipped by Tailwind, so leaving them both in is safe. This frees consumer
   apps from having to know the path — their globals.css just needs
   `@import "@exxatdesignux/ui/globals.css";` plus their own folders.
   -------------------------------------------------------------------------- */
@source "../dist";
@source "./components";
@source "./hooks";
@source "./lib";
@source "./product-framework";

/* RTL layout direction support */
@custom-variant dark (&:is(.dark *));

/* High-contrast variant — in-app High or Windows (JSON) contrast */
@custom-variant hc (&:is([data-contrast="high"] *, [data-contrast="windows"] *));

/* --------------------------------------------------------------------------
   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, AND so the rendered breadcrumb
     height does not drift under `data-text-size` font-size scaling. Keep
     in sync with `headerHeight` in components/sidebar-shell.tsx (also
     literal `48px` — the previous `calc(var(--spacing) * 12)` form
     resolved to ~45.12px in compact mode and ~54px in large mode, which
     opened a sub-pixel gap or overlap between the stuck breadcrumb and
     the floating table column header). */
  --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);
  /* Horizontal radius is intentionally < 50% of the band width so the
     glow fades to fully transparent before reaching the band's left
     and right edges. The band sits inside the page chrome with no
     border of its own — leaving tint at the edges read as a hard seam
     where the band meets the surrounding canvas. */
  --key-metrics-flat-band-radial: radial-gradient(
    ellipse 60% 70% 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);           /* near-black — 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) — destructive red, 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 neutral grey → 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: oklch(0.9635 0.0071 295.8);

  /* ── 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);

  /* ── Switch (ToggleSwitch) — "on" track ──────────────────────── */
  /* iOS-style affirmative green so the on/off semantic reads at a glance.
     Knob keeps --primary-foreground (white in light mode) for ≥3:1 contrast
     against the green track per WCAG 1.4.11. The high-contrast mode override
     in the [data-contrast="high"] block continues to use --accent — green
     stays constant across brand themes (Prism rose / One lavender) since it
     encodes "on", not brand identity. */
  --switch-on: oklch(0.62 0.16 150);

  /* ============================================================
     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 light/dark wordmark literals in
     `apps/web/components/exxat-product-logo.tsx` and
     `product-wordmark.tsx`. */
  --exxat-color-wordmark-ink-light: oklch(0.301 0.022 252);
  --exxat-color-wordmark-ink-dark:  oklch(0.755 0.012 230);

  /* ── 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);
  /* See the light-theme block above for the rationale: horizontal
     radius < 50% so the glow lives in the middle and fades fully
     transparent at the band edges. */
  --key-metrics-flat-band-radial: radial-gradient(
    ellipse 60% 70% 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);

  /* Switch "on" track — slightly lighter L so the green still reads as
     vibrant against the dark canvas; knob picks up --primary-foreground
     (charcoal) for clear knob/track separation in dark mode. */
  --switch-on: oklch(0.66 0.17 150);

  /* 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:         oklch(0.2950 0.0143 303.3);

  /* 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 {
  /* Prism rose washes — base tint sampled from the approved Prism shell
     reference. Keep the scale pale; Prism should read as a soft
     rose canvas, not a saturated pink sidebar. */
  --brand-tint:         oklch(0.9695 0.0158 341.4);
  --brand-tint-light:   oklch(0.9834 0.0100 345.4);
  --brand-tint-subtle:  oklch(0.9465 0.0247 348.5);
  --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:          var(--brand-tint);
  --sidebar-accent:   oklch(0.9465 0.0247 348.5);
  --sidebar-border:   oklch(0.9152 0.0394 347.1);
  --secondary:        oklch(0.9601 0.0120 345);
  --accent:           oklch(0.9465 0.0180 348);
  --muted:            oklch(0.9560 0.0080 345);
  --banner-prism-bg:  var(--brand-tint);
  --theme-color-chrome: oklch(0.9695 0.0158 341.4);
}

.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: oklch(0.2657 0.0107 353.7);
  /* 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: Dynamic accent override · user-selected hue
   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">

   Activated by `ProductProvider` whenever the user sets a per-product brand
   color override in Settings → Appearance (across any of the three built-in
   products). The default look for each product still flows from
   `theme-one` / `theme-prism`; this block kicks in only when an override is
   present. The `exxat-custom` product was removed in a prior cleanup, so
   this is now a generic accent-override mechanism.
   ========================================================================== */
/*
 * 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
      (white), 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;
  }

  /* 1d-bis. Secondary panel (nested rail — Library, Tokens, …) — HC chrome.
     Normal mode reads the panel via `--secondary-panel-bg` (brand-tinted
     OKLCH) + `ring-1 ring-sidebar-border shadow-sm`. In HC mode the
     brand wash collapses to ~white/near-canvas and `box-shadow: none`
     above kills the ring, leaving the panel invisible against the
     background. Force a flat canvas fill and a 2px solid border so the
     panel reads as a distinct chrome surface — same treatment cards and
     the sidebar receive. */
  & [data-slot="secondary-panel"] {
    background-color: var(--background) !important;
    background-image: none !important;
    border: 2px solid var(--sidebar-border) !important;
  }

  /* 1d-bis2. Secondary panel — active row uses the HC --accent highlight
     (saturated brand) instead of the normal-mode --sidebar-accent grey
     wash. The Library/Tokens nav rows are raw <Link> elements (not
     SidebarMenuButton), so the existing 'Pattern 3: Active nav' rule on
     [data-slot="sidebar-menu-button"][data-active="true"] doesn't fire.

     Two selectors:
       1. `[aria-current="page"]` — the active link itself (NavRow,
          IconNavRow, the inner Link inside LibraryFolderTreeBranch).
       2. `[class~="bg-sidebar-accent"]` — the folder-tree row WRAPPER
          (a <div> that puts the active fill class on the row and has
          its own `rounded-md`). The `~=` matcher is whole-token only
          so we don't accidentally match `hover:bg-sidebar-accent/50`.

     Both targets already carry `rounded-md` (or `rounded-sm` for the
     inner folder-tree link), so the bg fill follows that radius and
     reads as a pill. We deliberately avoid `:has(> [aria-current])`
     here because that also matched <li> wrappers which don't have a
     border-radius — painting them yielded a flat-cornered fill. */
  & [data-slot="secondary-panel"] [aria-current="page"],
  & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] {
    background-color: var(--accent) !important;
    color: var(--accent-foreground) !important;
    /* No ring/outline — `outline` ignores border-radius and would
       render a square ring on top of the rounded bg. */
    box-shadow: none !important;
  }
  & [data-slot="secondary-panel"] [aria-current="page"] *,
  & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] * {
    color: var(--accent-foreground) !important;
  }
  /* Active row count chip — invert against the highlighted row so the
     count remains legible on the saturated accent fill (same trick used
     by the SidebarMenuButton active-state rule above). */
  & [data-slot="secondary-panel"] [aria-current="page"] [data-slot="badge"],
  & [data-slot="secondary-panel"] [aria-current="page"] [data-slot="sidebar-menu-badge"],
  & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] [data-slot="badge"],
  & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] [data-slot="sidebar-menu-badge"] {
    background-color: var(--accent-foreground) !important;
    color: var(--accent) !important;
    border-color: var(--accent-foreground) !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;
  }

  /* Composed view-tab active shell (list-page.tsx) — wraps the label button
     and its chevron disclosure. Fill the shell so the chevron sibling sits
     on the same `--accent` highlight as the label, then cascade
     `--accent-foreground` to descendants so the chevron glyph stays legible. */
  & [data-slot="view-segmented-item-shell"] {
    background-color: var(--accent) !important;
    color: var(--accent-foreground) !important;
    outline: none !important;
  }

  & [data-slot="view-segmented-item-shell"] * {
    color: var(--accent-foreground) !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;
  }

  /* Composed view-tab active shell — see the html[data-contrast="high"] block
     above for rationale. Fill the shell + cascade `HighlightText` so the
     chevron disclosure stays attached to the active fill in forced-colors. */
  [data-slot="view-segmented-item-shell"] {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: none !important;
  }

  [data-slot="view-segmented-item-shell"] * {
    color: HighlightText !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;
}
