@exxatdesignux/ui 0.2.18 → 0.2.19

package/src/tokens/layers.css

@@ -0,0 +1,224 @@
+/* ==========================================================================
+   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;
+}

package/src/tokens/tailwind-bridge.css

@@ -0,0 +1,118 @@
+/* --------------------------------------------------------------------------
+   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);
+  --color-secondary-panel-bg:         var(--secondary-panel-bg);
+
+  /* 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;
+}
+
+/* --------------------------------------------------------------------------
+   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%;
+}

package/src/tokens/themes.css

@@ -0,0 +1,201 @@
+/* ==========================================================================
+   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.008 286.1);
+  --sidebar:          oklch(0.245 0.015 286.1);
+  --sidebar-accent:   oklch(0.30 0.012 286.1);
+  --sidebar-border:   oklch(0.38 0.010 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);
+  --brand-tint:       oklch(0.28 0.014 286.1);
+  --brand-tint-light: oklch(0.30 0.014 286.1);
+  --brand-tint-subtle: oklch(0.24 0.018 286.1);
+  --secondary-panel-bg: oklch(0.262 0.012 286.1);
+}
+
+/* ==========================================================================
+   Theme: Exxat Prism · Rose · hue 343
+   Usage: <html class="theme-prism"> or <html class="theme-rose">
+   ========================================================================== */
+.theme-prism,
+.theme-rose {
+  --brand-tint:         oklch(0.97 0.02 343);
+  --brand-tint-light:   oklch(0.992 0.01 343);
+  --brand-tint-subtle:  oklch(0.93 0.028 343);
+  --brand-color:        oklch(0.57 0.24 342);   /* Prism rose */
+  --brand-color-light:  oklch(0.78 0.14 342);
+  --brand-color-dark:   oklch(0.42 0.24 342);
+  --brand-color-deep:   oklch(0.32 0.20 342);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-prism:not(.dark),
+.theme-rose:not(.dark) {
+  --sidebar:          oklch(0.97 0.02 343);
+  --sidebar-accent:   oklch(0.945 0.025 343);
+  --sidebar-border:   oklch(0.92 0.025 343);
+  --secondary:        oklch(0.95 0.012 343);
+  --accent:           oklch(0.925 0.015 343);
+  --muted:            oklch(0.945 0.008 343);
+  --banner-prism-bg:  oklch(0.97 0.02 343);
+  --theme-color-chrome: #fff5f9;
+}
+
+.theme-prism.dark,
+.dark.theme-prism,
+.theme-rose.dark,
+.dark.theme-rose {
+  --ring:             var(--brand-color);
+  --background:       oklch(0.20 0.008 342);
+  --sidebar:          oklch(0.245 0.015 342);
+  --sidebar-accent:   oklch(0.30 0.012 342);
+  --sidebar-border:   oklch(0.38 0.010 342);
+  --secondary:        oklch(0.31 0.04 342);
+  --muted:              oklch(0.31 0.04 342);
+  --accent:             oklch(0.33 0.06 342);
+  --theme-color-chrome: #2a2428;
+  --brand-tint:         oklch(0.28 0.014 342);
+  --brand-tint-light:   oklch(0.30 0.014 342);
+  --brand-tint-subtle:  oklch(0.24 0.018 342);
+  --card:               oklch(0.27 0.012 342);
+  --secondary-panel-bg: oklch(0.262 0.012 342);
+}
+
+/* ==========================================================================
+   Theme: Exxat Assessment · Green · hue 159.88
+   Usage: <html class="theme-assessment">
+   ========================================================================== */
+.theme-assessment {
+  --brand-tint:         oklch(0.965 0.018 159.88);
+  --brand-tint-light:   oklch(0.992 0.008 159.88);
+  --brand-tint-subtle:  oklch(0.93 0.028 159.88);
+  --brand-color:        oklch(0.7 0.0913 159.88);
+  --brand-color-light:  oklch(0.82 0.072 159.88);
+  --brand-color-dark:   oklch(0.48 0.0913 159.88);
+  --brand-color-deep:   oklch(0.34 0.075 159.88);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-assessment:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(0.945 0.026 159.88);
+  --sidebar-border:     oklch(0.90 0.026 159.88);
+  --secondary:          oklch(0.95 0.012 159.88);
+  --accent:             oklch(0.925 0.016 159.88);
+  --muted:              oklch(0.945 0.008 159.88);
+  --theme-color-chrome: #f1faf5;
+}
+
+.theme-assessment.dark,
+.dark.theme-assessment {
+  --ring:               var(--brand-color);
+  --background:         oklch(0.20 0.008 159.88);
+  --sidebar:            oklch(0.245 0.015 159.88);
+  --sidebar-accent:     oklch(0.30 0.012 159.88);
+  --sidebar-border:     oklch(0.38 0.010 159.88);
+  --secondary:          oklch(0.31 0.04 159.88);
+  --muted:              oklch(0.31 0.04 159.88);
+  --accent:             oklch(0.33 0.06 159.88);
+  --theme-color-chrome: #242a27;
+  --brand-tint:         oklch(0.28 0.014 159.88);
+  --brand-tint-light:   oklch(0.30 0.014 159.88);
+  --brand-tint-subtle:  oklch(0.24 0.018 159.88);
+  --card:               oklch(0.27 0.012 159.88);
+  --secondary-panel-bg: oklch(0.262 0.012 159.88);
+}
+
+/* ==========================================================================
+   Theme: Custom product · user-selected hue
+   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">
+   ========================================================================== */
+/*
+ * Tint chroma is **derived from the source's chroma** so neighbouring hues
+ * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale
+ * tints instead of collapsing to the same near-white. The earlier formula
+ * pinned chroma to a fixed `0.018`, which is below the hue-discrimination
+ * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo /
+ * Purple looked identical in the sidebar.
+ *
+ * `max(<floor>, calc(c * <fraction>))` rules:
+ *   - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted
+ *     sidebar / accent / muted scale → product chrome visibly changes per
+ *     pick
+ *   - low-chroma custom-hex picks (greys) fall back to the floor so they
+ *     don't render as pure white
+ *   - lightness + hue stay pinned to the original mock-up values, so the
+ *     overall "very pale background" feel is unchanged
+ */
+.theme-custom {
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.93  max(0.028, calc(c * 0.30)) h);
+  --brand-color:        var(--custom-product-brand-color);
+  --brand-color-light:  oklch(from var(--custom-product-brand-color) 0.82 c h);
+  --brand-color-dark:   oklch(from var(--custom-product-brand-color) 0.48 c h);
+  --brand-color-deep:   oklch(from var(--custom-product-brand-color) 0.34 c h);
+  --ring:               var(--brand-color-dark);
+}
+
+.theme-custom:not(.dark) {
+  --sidebar:            var(--brand-tint);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.90  max(0.026, calc(c * 0.28)) h);
+  --secondary:          oklch(from var(--custom-product-brand-color) 0.95  max(0.012, calc(c * 0.14)) h);
+  --accent:             oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h);
+  --muted:              oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h);
+  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white);
+}
+
+.theme-custom.dark,
+.dark.theme-custom {
+  --ring:               var(--brand-color);
+  --background:         oklch(from var(--custom-product-brand-color) 0.20  max(0.008, calc(c * 0.10)) h);
+  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.015, calc(c * 0.18)) h);
+  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.012, calc(c * 0.14)) h);
+  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.010, calc(c * 0.12)) 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);
+  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.28  max(0.014, calc(c * 0.20)) h);
+  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.30  max(0.014, calc(c * 0.20)) h);
+  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.24  max(0.018, calc(c * 0.28)) h);
+  --card:               oklch(from var(--custom-product-brand-color) 0.27  max(0.012, calc(c * 0.16)) h);
+  --secondary-panel-bg: oklch(from var(--custom-product-brand-color) 0.262 max(0.012, calc(c * 0.14)) h);
+}
+
+/* Nested secondary panel — always paint from token (not Tailwind arbitrary var) */
+[data-slot="secondary-panel"][data-state="open"] {
+  background-color: var(--secondary-panel-bg);
+}