@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Montserrat:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* TPB canonical theme pack — entry point.
   Imports the full 4-layer architecture in cascade order:

   0. fonts/_google-fonts.css  MUST BE FIRST — CSS spec : @import rules
                               (incl. external font URLs) are invalid
                               if they follow any non-@import rule.
   1. base-tokens.css        Layer 1 raw scales (color, text, space, radius, shadow, motion).
   2. palettes/*             Layer 1 palette-specific token overrides scoped by `html[data-palette="X"][data-mode="Y"]`.
   3. fonts/*                Font stacks scoped by `html[data-font="X"]`.
   4. aliases.css            Layer 2 neutral semantic aliases (`--brand`, `--bg-base`, `--text-primary`, etc.).
   5. high-contrast.css      Layer 2 high-contrast variant scoped by `.high-contrast` class.
   6. effects/tpb-effects.css TPB-effects layer scoped by `.tpb-effects` class.

   Consumer apps import this one file via `@import "@the-play-button/tpb-sdk-js/theme/pack/index.css"`. */

/* Step 0 — Google Fonts loader (MUST be first per CSS @import spec) */

/* --- inlined from ./fonts/_google-fonts.css --- */
/* Google Fonts loader — MUST be imported FIRST in the SDK pack so
   `@import url(...)` statements appear at the top of the bundle.
   CSS spec : `@import` rules are invalid if they follow any other
   rule and are silently discarded by browsers.

   Single CSS file bundling all 8 font families used across the 4
   `data-font` variants (Space Grotesk / DM Sans / Montserrat / Plus
   Jakarta Sans + their body/mono companions). Loaded once globally.

   If a consumer app uses `next/font` it will set `--font-{name}` at
   runtime and the literal fallback in `--bi-font-*` is bypassed. */

/* --- end ./fonts/_google-fonts.css --- */

/* Layer 1 — raw scales */

/* --- inlined from ./base-tokens.css --- */
/* ==========================================================
   Base Tokens — Shared across all themes
   Scope: :root (always active)
   Namespace: --bi-*
   ========================================================== */

:root {
  /* ── Status (universal) ────────────────────────────────── */
  --bi-color-status-success: #22C55E;
  --bi-color-status-success-rgb: 34, 197, 94;
  --bi-color-status-warning: #F59E0B;
  --bi-color-status-warning-rgb: 245, 158, 11;
  --bi-color-status-error:   #EF4444;
  --bi-color-status-error-rgb: 239, 68, 68;
  --bi-color-status-info:    #3B82F6;
  --bi-color-status-info-rgb: 59, 130, 246;

  /* ── Hygiene scores (universal) ────────────────────────── */
  --bi-color-score-excellent: #22C55E;
  --bi-color-score-good:      #84CC16;
  --bi-color-score-fair:      #F59E0B;
  --bi-color-score-poor:      #EF4444;

  /* ── RAG (universal) ───────────────────────────────────── */
  --bi-color-rag-green:  #22C55E;
  --bi-color-rag-amber:  #F59E0B;
  --bi-color-rag-red:    #EF4444;

  /* ── Score gradients (universal) ───────────────────────── */
  --bi-gradient-score-excellent: linear-gradient(90deg, #22C55E 0%, #16A34A 100%);
  --bi-gradient-score-good:      linear-gradient(90deg, #84CC16 0%, #65A30D 100%);
  --bi-gradient-score-fair:      linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
  --bi-gradient-score-poor:      linear-gradient(90deg, #EF4444 0%, #DC2626 100%);

  /* ── Typography sizing ─────────────────────────────────── */
  --bi-text-xs:  11px;
  --bi-text-sm:  13px;
  --bi-text-base: 14px;
  --bi-text-md:  16px;
  --bi-text-lg:  18px;
  --bi-text-xl:  20px;
  --bi-text-2xl: 24px;
  --bi-text-3xl: 30px;
  --bi-text-4xl: 36px;
  --bi-font-weight-normal: 400;
  --bi-font-weight-medium: 500;
  --bi-font-weight-semibold: 600;
  --bi-font-weight-bold: 700;
  --bi-line-height-tight: 1.25;
  --bi-line-height-normal: 1.5;
  --bi-line-height-relaxed: 1.75;
  --bi-letter-spacing-tight: -0.02em;
  --bi-letter-spacing-normal: 0;
  --bi-letter-spacing-wide: 0.05em;

  /* ── Radius ────────────────────────────────────────────── */
  --bi-radius-sm:   4px;
  --bi-radius-md:   6px;
  --bi-radius-lg:   8px;
  --bi-radius-xl:   12px;
  --bi-radius-2xl:  16px;
  --bi-radius-full: 9999px;

  /* ── Motion ────────────────────────────────────────────── */
  --bi-duration-instant: 100ms;
  --bi-duration-fast:    150ms;
  --bi-duration-normal:  250ms;
  --bi-duration-slow:    400ms;
  --bi-duration-shimmer: 2s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --bi-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing ───────────────────────────────────────────── */
  --bi-spacing-1: 2px;   --bi-spacing-2: 4px;
  --bi-spacing-3: 8px;   --bi-spacing-4: 12px;
  --bi-spacing-5: 16px;  --bi-spacing-6: 20px;
  --bi-spacing-7: 24px;  --bi-spacing-8: 32px;
  --bi-spacing-9: 48px;  --bi-spacing-10: 64px;

  /* ── Layout ────────────────────────────────────────────── */
  --bi-layout-sidebar-bc-width: 64px;
  --bi-layout-sidebar-dashboard-width: 240px;
  --bi-layout-header-height: 48px;
  --bi-layout-content-max-width: 1400px;
  --bi-layout-content-padding: 24px;
  --bi-breakpoint-mobile: 768px;
  --bi-breakpoint-tablet: 1024px;
  --bi-breakpoint-desktop: 1280px;

  /* ── Borders (shorthand templates — resolve via palette color vars) */
  --bi-border-subtle:  1px solid var(--bi-color-border-subtle);
  --bi-border-default: 1px solid var(--bi-color-border-default);
  --bi-border-strong:  1px solid var(--bi-color-border-strong);

  /* ── Blur ───────────────────────────────────────────────── */
  --bi-blur-sm: 8px;
  --bi-blur-md: 16px;
  --bi-blur-lg: 24px;

  /* ── Defaults for tokens not covered by every palette ───────
     The 9 absorbed palettes (vault-obsidian, forest-canopy, etc.)
     don't all define these. Defaults here so consumers using Layer 2
     aliases (--border-subtle, --feature-error, --shadow-card) get a
     working value regardless of palette. Per-palette overrides win
     via cascade specificity (html[data-palette="X"] selector). */
  --bi-color-border-subtle:  rgba(255, 255, 255, 0.08);
  --bi-color-border-default: rgba(255, 255, 255, 0.12);
  --bi-color-border-strong:  rgba(255, 255, 255, 0.18);
  --bi-color-border-light:   rgba(255, 255, 255, 0.10);
  --bi-color-border-medium:  rgba(255, 255, 255, 0.14);
  /* Plan 17 — defaults for vars BI native palettes don't define but
     aliases.css depends on. Absorbed palettes (carbon-teal, deep-gold,
     electric-storm, forest-canopy, red-cyber-tokyo, velvet-crimson-rose,
     vault-obsidian, wondergrip) override these where they ship their own
     values. Without defaults, BI native palettes (amber, cobalt, navy,
     violet, gold-storm) would have these aliases resolve to undefined. */
  --bi-color-bg-white-light:  rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.07);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.10);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-text-dim:        rgba(255, 255, 255, 0.45);
  --bi-color-text-tertiary:   rgba(255, 255, 255, 0.35);
  /* Brand fallbacks — palette-specific palette files override. */
  --bi-color-brand-primary-muted:    rgba(255, 255, 255, 0.10);
  --bi-color-brand-secondary-bright: var(--bi-color-brand-primary-bright, #FFE85C);
  --bi-color-brand-secondary-muted:  rgba(255, 255, 255, 0.10);
  --bi-color-brand-accent:           var(--bi-color-brand-primary, #FFD700);
  --bi-color-brand-accent-rgb:       var(--bi-color-brand-primary-rgb, 255, 215, 0);
  /* Bg fallbacks. */
  --bi-color-bg-muted:    rgba(255, 255, 255, 0.04);
  --bi-color-bg-overlay:  rgba(0, 0, 0, 0.6);
  --bi-color-bg-card:     var(--bi-color-bg-elevated, #171717);
  --bi-color-bg-panel:    var(--bi-color-bg-elevated, #171717);
  --bi-color-bg-dark:     var(--bi-color-bg-base, #0A0A0A);
  --bi-color-bg-code:     var(--bi-color-bg-elevated, #171717);
  /* Border fallbacks. */
  --bi-color-border-primary: var(--bi-color-brand-primary, #FFD700);
  /* Shadow fallbacks — neutral generic glows where palette-specific
     intensity isn't shipped. */
  --bi-shadow-glow-secondary:  0 0 12px rgba(255, 255, 255, 0.15);
  --bi-shadow-glow-success:    0 0 12px rgba(34, 197, 94, 0.4);
  --bi-shadow-modal:           0 24px 48px rgba(0, 0, 0, 0.5);
  --bi-shadow-recording:       0 0 20px rgba(239, 68, 68, 0.4);
  --bi-shadow-recording-intense: 0 0 32px rgba(239, 68, 68, 0.6);
  --bi-shadow-elevation:       0 8px 24px rgba(0, 0, 0, 0.4);
  --bi-shadow-text-glow:       0 0 12px rgba(255, 255, 255, 0.3);
  /* Interactive state bg fallbacks. */
  --bi-color-bg-sidebar:  var(--bi-color-bg-elevated, #171717);
  --bi-color-bg-hover:    rgba(255, 255, 255, 0.06);
  --bi-color-bg-active:   rgba(255, 255, 255, 0.10);
  --bi-color-bg-input:    rgba(255, 255, 255, 0.04);
  /* Inverse text (light-on-dark contexts). */
  --bi-color-text-inverse: #0A0A0A;
  /* Brand tertiary fallback (3rd accent for charts). */
  --bi-color-brand-tertiary:     var(--bi-color-brand-primary, #FFD700);
  --bi-color-brand-tertiary-rgb: var(--bi-color-brand-primary-rgb, 255, 215, 0);
  --bi-color-brand-secondary-rgb: var(--bi-color-brand-primary-rgb, 255, 215, 0);
  /* Shadow scale fallbacks. */
  --bi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  /* Glow fallbacks. */
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb, 255, 215, 0), 0.3);
  --bi-glow-secondary: 0 0 12px rgba(255, 255, 255, 0.15);
  --bi-glow-teal:      rgba(20, 184, 166, 0.3);
  --bi-gradient-header: linear-gradient(180deg, var(--bi-color-bg-elevated, #171717), var(--bi-color-bg-base, #0A0A0A));
  --bi-color-feature-error:   #EF4444;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-info:    #3B82F6;
  --bi-color-feature-danger:  #DC2626;
  /* --bi-color-status-{error,warning,success,info} are defined above
     in the "Status (universal)" section (lines 9-12). Only -danger is
     new here (no canonical pre-Plan-11 definition existed). */
  --bi-color-status-danger:  #DC2626;
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Plan 15 — palette-independent splash gradients consumed by splash CSS */
  --bi-gradient-splash-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  --bi-gradient-text-shine:     linear-gradient(90deg, var(--bi-color-text-primary, #FAFAFA), var(--bi-color-brand-primary, #FFD700), var(--bi-color-text-primary, #FAFAFA));
  --bi-gradient-splash-bg:      radial-gradient(circle at center, var(--bi-color-bg-elevated, #171717) 0%, var(--bi-color-bg-base, #0A0A0A) 80%);
  --bi-gradient-brand:          linear-gradient(135deg, var(--bi-color-brand-primary, #FFD700) 0%, var(--bi-color-brand-primary-bright, #FFE85C) 100%);

  /* ── Plan 02 of 2026-06-15_hitl-theme-canonicalize ─────────────────
     Extended motion vocabulary promoted from tpb-approval/frontend/src/
     index.css. Available cross-app for any animation pattern that needs
     longer/themed durations or finer-grained motion semantics. */

  /* Extended duration vocabulary */
  --duration-shimmer:           3s;
  --duration-shine:             3s;
  --duration-blink:             1s;
  --duration-gradient-shift:    4s;
  --duration-lightning-flicker: 1.5s;

  /* Motion distances + scales */
  --motion-distance-sm:       2px;
  --motion-distance-lg:       20px;
  --motion-scale-normal:      1;
  --motion-scale-grow:        1.05;
  --motion-scale-burst:       1.2;
  --motion-scale-lightning:   1.15;

  /* Easing + opacity utilities */
  --easing-linear:  linear;
  --easing-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --opacity-subtle: 0.5;
  --opacity-light:  0.8;

  /* ── ReactBits Batch A — Branding tokens (Plan 34 of initiative
     2026-06-24_tpb-lrm-app). Used by TpbDock, TpbGlassIcon,
     TpbBorderGlowCard, TpbElectricCard + utility classes
     .tpb-electric-border, .tpb-glass-pane, .tpb-glow-violet,
     .tpb-glow-amber, .tpb-card-border-glow. ─────────────────────── */

  /* Electric palette — used by ElectricCard animated border. */
  --brand-electric-blue:      #38bdf8;
  --brand-electric-cyan:      #06b6d4;
  --brand-electric-violet:    #a78bfa;
  --brand-electric-glow:      rgba(56, 189, 248, 0.42);
  --gradient-electric-storm: conic-gradient(
    from 0deg,
    var(--brand-electric-blue) 0%,
    var(--brand-electric-cyan) 25%,
    var(--brand-electric-violet) 50%,
    var(--brand-electric-cyan) 75%,
    var(--brand-electric-blue) 100%
  );

  /* Glow halos. */
  --brand-glow-violet:        rgba(167, 139, 250, 0.55);
  --brand-glow-amber:         rgba(251, 191, 36, 0.55);
  --shadow-glow-violet:       0 0 24px var(--brand-glow-violet);
  --shadow-glow-amber:        0 0 24px var(--brand-glow-amber);
  --shadow-glow-electric:     0 0 32px var(--brand-electric-glow);

  /* Glass tint — used by .tpb-glass-pane and TpbGlassIcon. */
  --brand-glass-tint:         rgba(255, 255, 255, 0.06);
  --brand-glass-tint-strong:  rgba(255, 255, 255, 0.12);
  --brand-glass-blur:         18px;
  --brand-glass-border:       rgba(255, 255, 255, 0.16);

  /* Dock magnification timing. */
  --duration-dock-magnify:    220ms;
  --ease-dock-magnify:        cubic-bezier(0.25, 0.8, 0.35, 1);

  /* ── ReactBits Batch B — Branding tokens (Plan 35) ──────── */
  --brand-blinds-stop-1:        var(--brand-electric-blue);
  --brand-blinds-stop-2:        var(--brand-electric-violet);
  --brand-blinds-stop-3:        var(--brand-electric-cyan);
  --gradient-blinds-base: repeating-linear-gradient(
    115deg,
    var(--brand-blinds-stop-1) 0%,  var(--brand-blinds-stop-1) 8%,
    var(--brand-blinds-stop-2) 12%, var(--brand-blinds-stop-2) 18%,
    var(--brand-blinds-stop-3) 22%, var(--brand-blinds-stop-3) 30%
  );
  --duration-blinds-sweep:      12s;
  --duration-glitch-flicker:    2s;
  --duration-electric-rotate:   4s;
  --duration-glare-hover:       120ms;
  --brand-glitch-channel-red:   #f43f5e;
  --brand-glitch-channel-cyan:  #22d3ee;
  --mask-gradual-blur-bottom: linear-gradient(
    to bottom, transparent 0%, black 30%, black 70%, transparent 100%
  );
}

/* --- end ./base-tokens.css --- */

/* Layer 1 — palettes (14 × dark/light = 28) */

/* --- inlined from ./palettes/palette-amber-dark.css --- */
/* Amber palette — dark mode */
html[data-palette="amber"][data-mode="dark"], [data-palette="amber"][data-mode="dark"] {
  --bi-color-brand-primary:     #FFD700;
  --bi-color-brand-secondary:   #3B82F6;
  --bi-color-brand-tertiary:    #A855F7;
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-secondary-rgb: 59, 130, 246;
  --bi-color-brand-tertiary-rgb: 168, 85, 247;

  --bi-color-bg-base:      #0A0A0B;
  --bi-color-bg-surface:   #141416;
  --bi-color-bg-elevated:  #1C1C1F;
  --bi-color-bg-sidebar:   #111113;
  --bi-color-bg-hover:     #1E1E22;
  --bi-color-bg-active:    #27272B;
  --bi-color-bg-input:     #18181B;

  --bi-color-text-primary:   #F5F5F5;
  --bi-color-text-secondary: #A1A1AA;
  --bi-color-text-muted:     #71717A;
  --bi-color-text-inverse:   #0A0A0B;

  --bi-color-border-default: #27272A;
  --bi-color-border-subtle:  #1E1E21;
  --bi-color-border-strong:  #3F3F46;

  --bi-color-chart-1:  #3B82F6;  --bi-color-chart-2:  #A855F7;
  --bi-color-chart-3:  #22C55E;  --bi-color-chart-4:  #EC4899;
  --bi-color-chart-5:  #06B6D4;  --bi-color-chart-6:  #F97316;
  --bi-color-chart-7:  #FFD700;  --bi-color-chart-8:  #8B5CF6;
  --bi-color-chart-9:  #14B8A6;  --bi-color-chart-10: #F59E0B;
  --bi-color-chart-11: #84CC16;  --bi-color-chart-12: #DC2626;
  --bi-color-chart-13: #E11D48;  --bi-color-chart-14: #7C3AED;
  --bi-color-chart-15: #64748B;  --bi-color-chart-16: #FB923C;
  --bi-color-chart-17: #4ADE80;  --bi-color-chart-18: #C084FC;
  --bi-color-chart-19: #B45309;  --bi-color-chart-20: #2563EB;
  --bi-color-chart-21: #9333EA;  --bi-color-chart-22: #15803D;
  --bi-color-chart-23: #BE185D;  --bi-color-chart-24: #0891B2;

  --bi-color-waterfall-positive: #22C55E;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #3B82F6;
  --bi-color-sequential-1: #e0f3f8;
  --bi-color-sequential-2: #abd9e9;
  --bi-color-sequential-3: #74add1;
  --bi-color-sequential-4: #4575b4;
  --bi-color-sequential-5: #313695;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.15);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);
  --bi-glow-success:   0 0 12px rgba(34, 197, 94, 0.15);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.15);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #F59E0B 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%);

  --bi-opacity-subtle: 0.05;
  --bi-opacity-light:  0.1;
  --bi-opacity-medium: 0.15;
  --bi-opacity-strong: 0.4;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #FFE34D;
  --bi-color-brand-primary-dim: #B29600;
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: rgba(255, 215, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- end ./palettes/palette-amber-dark.css --- */


/* --- inlined from ./palettes/palette-amber-light.css --- */
/* Amber palette — light mode */
html[data-palette="amber"][data-mode="light"], [data-palette="amber"][data-mode="light"] {
  --bi-color-brand-primary:     #FFD700;
  --bi-color-brand-secondary:   #3B82F6;
  --bi-color-brand-tertiary:    #A855F7;
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-secondary-rgb: 59, 130, 246;
  --bi-color-brand-tertiary-rgb: 168, 85, 247;

  --bi-color-bg-base:      #FAFAF9;
  --bi-color-bg-surface:   #FFFFFF;
  --bi-color-bg-elevated:  #FFFFFF;
  --bi-color-bg-sidebar:   #F5F5F4;
  --bi-color-bg-hover:     #F5F5F4;
  --bi-color-bg-active:    #E7E5E4;
  --bi-color-bg-input:     #FFFFFF;

  --bi-color-text-primary:   #1C1917;
  --bi-color-text-secondary: #57534E;
  --bi-color-text-muted:     #A8A29E;
  /* text-dim : sans override, le :root dark default rgba(255,255,255,.45) = texte/icône blanc invisible
     sur fond clair (SearchBox icône/placeholder, badge neutral). Stone-350, visible mais discret. */
  --bi-color-text-dim:       #B0ABA6;
  --bi-color-text-inverse:   #FFFFFF;

  --bi-color-border-default: #E7E5E4;
  --bi-color-border-subtle:  #F5F5F4;
  --bi-color-border-strong:  #D6D3D1;
  /* border-light : sans override, dark default rgba(255,255,255,.10) = bordure blanche invisible sur clair. */
  --bi-color-border-light:   #E7E5E4;

  --bi-color-chart-1:  #3B82F6;  --bi-color-chart-2:  #A855F7;
  --bi-color-chart-3:  #22C55E;  --bi-color-chart-4:  #EC4899;
  --bi-color-chart-5:  #06B6D4;  --bi-color-chart-6:  #F97316;
  --bi-color-chart-7:  #B8860B;  --bi-color-chart-8:  #8B5CF6;
  --bi-color-chart-9:  #14B8A6;  --bi-color-chart-10: #D97706;
  --bi-color-chart-11: #84CC16;  --bi-color-chart-12: #DC2626;
  --bi-color-chart-13: #E11D48;  --bi-color-chart-14: #7C3AED;
  --bi-color-chart-15: #64748B;  --bi-color-chart-16: #FB923C;
  --bi-color-chart-17: #4ADE80;  --bi-color-chart-18: #C084FC;
  --bi-color-chart-19: #B45309;  --bi-color-chart-20: #2563EB;
  --bi-color-chart-21: #9333EA;  --bi-color-chart-22: #15803D;
  --bi-color-chart-23: #BE185D;  --bi-color-chart-24: #0891B2;

  --bi-color-waterfall-positive: #22C55E;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #3B82F6;
  --bi-color-sequential-1: #e0f3f8;
  --bi-color-sequential-2: #abd9e9;
  --bi-color-sequential-3: #74add1;
  --bi-color-sequential-4: #4575b4;
  --bi-color-sequential-5: #313695;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.1);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.1);
  --bi-glow-success:   0 0 12px rgba(34, 197, 94, 0.1);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.1);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #F59E0B 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, rgba(245, 158, 11, 0.03) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.02) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%);

  --bi-opacity-subtle: 0.04;
  --bi-opacity-light:  0.08;
  --bi-opacity-medium: 0.12;
  --bi-opacity-strong: 0.3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #FFE34D;
  --bi-color-brand-primary-dim: #B29600;
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: rgba(255, 215, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- end ./palettes/palette-amber-light.css --- */


/* --- inlined from ./palettes/palette-cobalt-dark.css --- */
/* Cobalt palette — dark mode */
html[data-palette="cobalt"][data-mode="dark"], [data-palette="cobalt"][data-mode="dark"] {
  --bi-color-brand-primary:     #60A5FA;
  --bi-color-brand-secondary:   #34D399;
  --bi-color-brand-tertiary:    #C084FC;
  --bi-color-brand-primary-rgb: 96, 165, 250;
  --bi-color-brand-secondary-rgb: 52, 211, 153;
  --bi-color-brand-tertiary-rgb: 192, 132, 252;

  --bi-color-bg-base:      #070B14;
  --bi-color-bg-surface:   #0F1629;
  --bi-color-bg-elevated:  #162036;
  --bi-color-bg-sidebar:   #0A0F1E;
  --bi-color-bg-hover:     #182540;
  --bi-color-bg-active:    #1E2D4A;
  --bi-color-bg-input:     #0D1323;

  --bi-color-text-primary:   #F1F5F9;
  --bi-color-text-secondary: #94A3B8;
  --bi-color-text-muted:     #64748B;
  --bi-color-text-inverse:   #0F172A;

  --bi-color-border-default: #1E293B;
  --bi-color-border-subtle:  #172033;
  --bi-color-border-strong:  #334155;

  --bi-color-chart-1:  #60A5FA;  --bi-color-chart-2:  #34D399;
  --bi-color-chart-3:  #C084FC;  --bi-color-chart-4:  #FB7185;
  --bi-color-chart-5:  #38BDF8;  --bi-color-chart-6:  #FBBF24;
  --bi-color-chart-7:  #A78BFA;  --bi-color-chart-8:  #2DD4BF;
  --bi-color-chart-9:  #F472B6;  --bi-color-chart-10: #4ADE80;
  --bi-color-chart-11: #818CF8;  --bi-color-chart-12: #F87171;
  --bi-color-chart-13: #22D3EE;  --bi-color-chart-14: #E879F9;
  --bi-color-chart-15: #94A3B8;  --bi-color-chart-16: #FCD34D;
  --bi-color-chart-17: #6EE7B7;  --bi-color-chart-18: #D8B4FE;
  --bi-color-chart-19: #FB923C;  --bi-color-chart-20: #3B82F6;
  --bi-color-chart-21: #10B981;  --bi-color-chart-22: #8B5CF6;
  --bi-color-chart-23: #F43F5E;  --bi-color-chart-24: #0EA5E9;

  --bi-color-waterfall-positive: #22C55E;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #60A5FA;
  --bi-color-sequential-1: #dbeafe;
  --bi-color-sequential-2: #93c5fd;
  --bi-color-sequential-3: #60a5fa;
  --bi-color-sequential-4: #3b82f6;
  --bi-color-sequential-5: #1d4ed8;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.06);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.12);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.15);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);
  --bi-glow-success:   0 0 12px rgba(34, 197, 94, 0.15);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.15);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #3B82F6 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%);

  --bi-opacity-subtle: 0.05;
  --bi-opacity-light:  0.1;
  --bi-opacity-medium: 0.15;
  --bi-opacity-strong: 0.4;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #AACFFC;
  --bi-color-brand-primary-dim: #167BF8;
  --bi-glow-primary: rgba(96, 165, 250, 0.4);
  --bi-glow-primary-subtle: rgba(96, 165, 250, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(96, 165, 250, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(96, 165, 250, 0.4);
}

/* --- end ./palettes/palette-cobalt-dark.css --- */


/* --- inlined from ./palettes/palette-cobalt-light.css --- */
/* Cobalt palette — light mode */
html[data-palette="cobalt"][data-mode="light"], [data-palette="cobalt"][data-mode="light"] {
  --bi-color-brand-primary:     #60A5FA;
  --bi-color-brand-secondary:   #34D399;
  --bi-color-brand-tertiary:    #C084FC;
  --bi-color-brand-primary-rgb: 96, 165, 250;
  --bi-color-brand-secondary-rgb: 52, 211, 153;
  --bi-color-brand-tertiary-rgb: 192, 132, 252;

  --bi-color-bg-base:      #F8FAFC;
  --bi-color-bg-surface:   #FFFFFF;
  --bi-color-bg-elevated:  #FFFFFF;
  --bi-color-bg-sidebar:   #F1F5F9;
  --bi-color-bg-hover:     #F1F5F9;
  --bi-color-bg-active:    #E2E8F0;
  --bi-color-bg-input:     #FFFFFF;

  --bi-color-text-primary:   #0F172A;
  --bi-color-text-secondary: #475569;
  --bi-color-text-muted:     #94A3B8;
  --bi-color-text-inverse:   #FFFFFF;

  --bi-color-border-default: #E2E8F0;
  --bi-color-border-subtle:  #F1F5F9;
  --bi-color-border-strong:  #CBD5E1;

  --bi-color-chart-1:  #3B82F6;  --bi-color-chart-2:  #059669;
  --bi-color-chart-3:  #8B5CF6;  --bi-color-chart-4:  #E11D48;
  --bi-color-chart-5:  #0284C7;  --bi-color-chart-6:  #D97706;
  --bi-color-chart-7:  #6D28D9;  --bi-color-chart-8:  #0D9488;
  --bi-color-chart-9:  #DB2777;  --bi-color-chart-10: #15803D;
  --bi-color-chart-11: #4F46E5;  --bi-color-chart-12: #DC2626;
  --bi-color-chart-13: #0891B2;  --bi-color-chart-14: #9333EA;
  --bi-color-chart-15: #64748B;  --bi-color-chart-16: #CA8A04;
  --bi-color-chart-17: #047857;  --bi-color-chart-18: #7C3AED;
  --bi-color-chart-19: #C2410C;  --bi-color-chart-20: #1D4ED8;
  --bi-color-chart-21: #065F46;  --bi-color-chart-22: #6D28D9;
  --bi-color-chart-23: #9F1239;  --bi-color-chart-24: #155E75;

  --bi-color-waterfall-positive: #22C55E;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #3B82F6;
  --bi-color-sequential-1: #dbeafe;
  --bi-color-sequential-2: #93c5fd;
  --bi-color-sequential-3: #60a5fa;
  --bi-color-sequential-4: #3b82f6;
  --bi-color-sequential-5: #1d4ed8;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.1);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.1);
  --bi-glow-success:   0 0 12px rgba(34, 197, 94, 0.1);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.1);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #3B82F6 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, rgba(59, 130, 246, 0.03) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.02) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%);

  --bi-opacity-subtle: 0.04;
  --bi-opacity-light:  0.08;
  --bi-opacity-medium: 0.12;
  --bi-opacity-strong: 0.3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #AACFFC;
  --bi-color-brand-primary-dim: #167BF8;
  --bi-glow-primary: rgba(96, 165, 250, 0.4);
  --bi-glow-primary-subtle: rgba(96, 165, 250, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(96, 165, 250, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(96, 165, 250, 0.4);
}

/* --- end ./palettes/palette-cobalt-light.css --- */


/* --- inlined from ./palettes/palette-navy-dark.css --- */
/* Navy palette — dark mode */
html[data-palette="navy"][data-mode="dark"], [data-palette="navy"][data-mode="dark"] {
  --bi-color-brand-primary:     #1B365D;
  --bi-color-brand-secondary:   #2563EB;
  --bi-color-brand-tertiary:    #7C3AED;
  --bi-color-brand-primary-rgb: 27, 54, 93;
  --bi-color-brand-secondary-rgb: 37, 99, 235;
  --bi-color-brand-tertiary-rgb: 124, 58, 237;

  --bi-color-bg-base:      #0A0A0B;
  --bi-color-bg-surface:   #141416;
  --bi-color-bg-elevated:  #1C1C1F;
  --bi-color-bg-sidebar:   #111113;
  --bi-color-bg-hover:     #1E1E22;
  --bi-color-bg-active:    #27272B;
  --bi-color-bg-input:     #18181B;

  --bi-color-text-primary:   #F5F5F5;
  --bi-color-text-secondary: #A1A1AA;
  --bi-color-text-muted:     #71717A;
  --bi-color-text-inverse:   #0A0A0B;

  --bi-color-border-default: #27272A;
  --bi-color-border-subtle:  #1E1E21;
  --bi-color-border-strong:  #3F3F46;

  --bi-color-chart-1:  #1B365D;  --bi-color-chart-2:  #2563EB;
  --bi-color-chart-3:  #059669;  --bi-color-chart-4:  #DC2626;
  --bi-color-chart-5:  #7C3AED;  --bi-color-chart-6:  #D97706;
  --bi-color-chart-7:  #0891B2;  --bi-color-chart-8:  #BE185D;
  --bi-color-chart-9:  #4F46E5;  --bi-color-chart-10: #15803D;
  --bi-color-chart-11: #9333EA;  --bi-color-chart-12: #B91C1C;
  --bi-color-chart-13: #0369A1;  --bi-color-chart-14: #A16207;
  --bi-color-chart-15: #64748B;  --bi-color-chart-16: #DB2777;
  --bi-color-chart-17: #047857;  --bi-color-chart-18: #6D28D9;
  --bi-color-chart-19: #C2410C;  --bi-color-chart-20: #1D4ED8;
  --bi-color-chart-21: #065F46;  --bi-color-chart-22: #7E22CE;
  --bi-color-chart-23: #9F1239;  --bi-color-chart-24: #155E75;

  --bi-color-waterfall-positive: #059669;
  --bi-color-waterfall-negative: #DC2626;
  --bi-color-waterfall-total:    #1B365D;
  --bi-color-sequential-1: #dbeafe;
  --bi-color-sequential-2: #93c5fd;
  --bi-color-sequential-3: #3b82f6;
  --bi-color-sequential-4: #1d4ed8;
  --bi-color-sequential-5: #1e3a5f;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.15);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);
  --bi-glow-success:   0 0 12px rgba(5, 150, 105, 0.15);
  --bi-glow-error:     0 0 12px rgba(220, 38, 38, 0.15);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #2563EB 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.1) 0%, rgba(var(--bi-color-brand-secondary-rgb), 0.05) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%);

  --bi-opacity-subtle: 0.05;
  --bi-opacity-light:  0.1;
  --bi-opacity-medium: 0.15;
  --bi-opacity-strong: 0.4;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #2C5898;
  --bi-color-brand-primary-dim: #0A1422;
  --bi-glow-primary: rgba(27, 54, 93, 0.4);
  --bi-glow-primary-subtle: rgba(27, 54, 93, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(27, 54, 93, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(27, 54, 93, 0.4);
}

/* --- end ./palettes/palette-navy-dark.css --- */


/* --- inlined from ./palettes/palette-navy-light.css --- */
/* Navy palette — light mode */
html[data-palette="navy"][data-mode="light"], [data-palette="navy"][data-mode="light"] {
  --bi-color-brand-primary:     #1B365D;
  --bi-color-brand-secondary:   #2563EB;
  --bi-color-brand-tertiary:    #7C3AED;
  --bi-color-brand-primary-rgb: 27, 54, 93;
  --bi-color-brand-secondary-rgb: 37, 99, 235;
  --bi-color-brand-tertiary-rgb: 124, 58, 237;

  --bi-color-bg-base:      #F8FAFC;
  --bi-color-bg-surface:   #FFFFFF;
  --bi-color-bg-elevated:  #FFFFFF;
  --bi-color-bg-sidebar:   #F1F5F9;
  --bi-color-bg-hover:     #F1F5F9;
  --bi-color-bg-active:    #E2E8F0;
  --bi-color-bg-input:     #FFFFFF;

  --bi-color-text-primary:   #0F172A;
  --bi-color-text-secondary: #475569;
  --bi-color-text-muted:     #94A3B8;
  --bi-color-text-inverse:   #FFFFFF;

  --bi-color-border-default: #E2E8F0;
  --bi-color-border-subtle:  #F1F5F9;
  --bi-color-border-strong:  #CBD5E1;

  --bi-color-chart-1:  #1B365D;  --bi-color-chart-2:  #2563EB;
  --bi-color-chart-3:  #059669;  --bi-color-chart-4:  #DC2626;
  --bi-color-chart-5:  #7C3AED;  --bi-color-chart-6:  #D97706;
  --bi-color-chart-7:  #0891B2;  --bi-color-chart-8:  #BE185D;
  --bi-color-chart-9:  #4F46E5;  --bi-color-chart-10: #15803D;
  --bi-color-chart-11: #9333EA;  --bi-color-chart-12: #B91C1C;
  --bi-color-chart-13: #0369A1;  --bi-color-chart-14: #A16207;
  --bi-color-chart-15: #64748B;  --bi-color-chart-16: #DB2777;
  --bi-color-chart-17: #047857;  --bi-color-chart-18: #6D28D9;
  --bi-color-chart-19: #C2410C;  --bi-color-chart-20: #1D4ED8;
  --bi-color-chart-21: #065F46;  --bi-color-chart-22: #7E22CE;
  --bi-color-chart-23: #9F1239;  --bi-color-chart-24: #155E75;

  --bi-color-waterfall-positive: #059669;
  --bi-color-waterfall-negative: #DC2626;
  --bi-color-waterfall-total:    #1B365D;
  --bi-color-sequential-1: #dbeafe;
  --bi-color-sequential-2: #93c5fd;
  --bi-color-sequential-3: #3b82f6;
  --bi-color-sequential-4: #1d4ed8;
  --bi-color-sequential-5: #1e3a5f;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.1);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.1);
  --bi-glow-success:   0 0 12px rgba(5, 150, 105, 0.1);
  --bi-glow-error:     0 0 12px rgba(220, 38, 38, 0.1);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #2563EB 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, rgba(var(--bi-color-brand-secondary-rgb), 0.03) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.02) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%);

  --bi-opacity-subtle: 0.04;
  --bi-opacity-light:  0.08;
  --bi-opacity-medium: 0.12;
  --bi-opacity-strong: 0.3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #2C5898;
  --bi-color-brand-primary-dim: #0A1422;
  --bi-glow-primary: rgba(27, 54, 93, 0.4);
  --bi-glow-primary-subtle: rgba(27, 54, 93, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(27, 54, 93, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(27, 54, 93, 0.4);
}

/* --- end ./palettes/palette-navy-light.css --- */


/* --- inlined from ./palettes/palette-violet-dark.css --- */
/* Violet palette — dark mode */
html[data-palette="violet"][data-mode="dark"], [data-palette="violet"][data-mode="dark"] {
  --bi-color-brand-primary:     #7C3AED;
  --bi-color-brand-secondary:   #06B6D4;
  --bi-color-brand-tertiary:    #F59E0B;
  --bi-color-brand-primary-rgb: 124, 58, 237;
  --bi-color-brand-secondary-rgb: 6, 182, 212;
  --bi-color-brand-tertiary-rgb: 245, 158, 11;

  --bi-color-bg-base:      #0A0A0B;
  --bi-color-bg-surface:   #141416;
  --bi-color-bg-elevated:  #1C1C1F;
  --bi-color-bg-sidebar:   #111113;
  --bi-color-bg-hover:     #1E1E22;
  --bi-color-bg-active:    #27272B;
  --bi-color-bg-input:     #18181B;

  --bi-color-text-primary:   #F5F5F5;
  --bi-color-text-secondary: #A1A1AA;
  --bi-color-text-muted:     #71717A;
  --bi-color-text-inverse:   #0A0A0B;

  --bi-color-border-default: #27272A;
  --bi-color-border-subtle:  #1E1E21;
  --bi-color-border-strong:  #3F3F46;

  --bi-color-chart-1:  #7C3AED;  --bi-color-chart-2:  #06B6D4;
  --bi-color-chart-3:  #F59E0B;  --bi-color-chart-4:  #EC4899;
  --bi-color-chart-5:  #10B981;  --bi-color-chart-6:  #3B82F6;
  --bi-color-chart-7:  #EF4444;  --bi-color-chart-8:  #8B5CF6;
  --bi-color-chart-9:  #14B8A6;  --bi-color-chart-10: #F97316;
  --bi-color-chart-11: #6366F1;  --bi-color-chart-12: #D946EF;
  --bi-color-chart-13: #0891B2;  --bi-color-chart-14: #CA8A04;
  --bi-color-chart-15: #A8A29E;  --bi-color-chart-16: #DB2777;
  --bi-color-chart-17: #059669;  --bi-color-chart-18: #A78BFA;
  --bi-color-chart-19: #EA580C;  --bi-color-chart-20: #2563EB;
  --bi-color-chart-21: #4F46E5;  --bi-color-chart-22: #C026D3;
  --bi-color-chart-23: #0E7490;  --bi-color-chart-24: #A16207;

  --bi-color-waterfall-positive: #10B981;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #7C3AED;
  --bi-color-sequential-1: #ede9fe;
  --bi-color-sequential-2: #c4b5fd;
  --bi-color-sequential-3: #8b5cf6;
  --bi-color-sequential-4: #6d28d9;
  --bi-color-sequential-5: #4c1d95;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.15);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);
  --bi-glow-success:   0 0 12px rgba(16, 185, 129, 0.15);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.15);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #A855F7 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%, transparent 50%);

  --bi-opacity-subtle: 0.05;
  --bi-opacity-light:  0.1;
  --bi-opacity-medium: 0.15;
  --bi-opacity-strong: 0.4;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #AB80F3;
  --bi-color-brand-primary-dim: #5512C8;
  --bi-glow-primary: rgba(124, 58, 237, 0.4);
  --bi-glow-primary-subtle: rgba(124, 58, 237, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(124, 58, 237, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(124, 58, 237, 0.4);
}

/* --- end ./palettes/palette-violet-dark.css --- */


/* --- inlined from ./palettes/palette-violet-light.css --- */
/* Violet palette — light mode */
html[data-palette="violet"][data-mode="light"], [data-palette="violet"][data-mode="light"] {
  --bi-color-brand-primary:     #7C3AED;
  --bi-color-brand-secondary:   #06B6D4;
  --bi-color-brand-tertiary:    #F59E0B;
  --bi-color-brand-primary-rgb: 124, 58, 237;
  --bi-color-brand-secondary-rgb: 6, 182, 212;
  --bi-color-brand-tertiary-rgb: 245, 158, 11;

  --bi-color-bg-base:      #FAFAF9;
  --bi-color-bg-surface:   #FFFFFF;
  --bi-color-bg-elevated:  #FFFFFF;
  --bi-color-bg-sidebar:   #F5F5F4;
  --bi-color-bg-hover:     #F5F5F4;
  --bi-color-bg-active:    #E7E5E4;
  --bi-color-bg-input:     #FFFFFF;

  --bi-color-text-primary:   #1C1917;
  --bi-color-text-secondary: #57534E;
  --bi-color-text-muted:     #A8A29E;
  /* text-dim : la teinte de texte la plus faible (icônes de champ, placeholders). SANS cet override, le
     :root dark default rgba(255,255,255,.45) restait actif → texte/icône BLANC sur fond clair = invisible
     (ex : icône + placeholder de la SearchBox, badge neutral = "ghost"). Stone-350, visible mais discret. */
  --bi-color-text-dim:       #B0ABA6;
  --bi-color-text-inverse:   #FFFFFF;

  --bi-color-border-default: #E7E5E4;
  --bi-color-border-subtle:  #F5F5F4;
  --bi-color-border-strong:  #D6D3D1;
  /* border-light : bordure subtile (ex : SearchBox). SANS override, dark default rgba(255,255,255,.10) =
     bordure blanche invisible sur fond clair. Stone-200, subtile mais présente. */
  --bi-color-border-light:   #E7E5E4;

  --bi-color-chart-1:  #7C3AED;  --bi-color-chart-2:  #06B6D4;
  --bi-color-chart-3:  #F59E0B;  --bi-color-chart-4:  #EC4899;
  --bi-color-chart-5:  #10B981;  --bi-color-chart-6:  #3B82F6;
  --bi-color-chart-7:  #EF4444;  --bi-color-chart-8:  #8B5CF6;
  --bi-color-chart-9:  #14B8A6;  --bi-color-chart-10: #F97316;
  --bi-color-chart-11: #6366F1;  --bi-color-chart-12: #D946EF;
  --bi-color-chart-13: #0891B2;  --bi-color-chart-14: #CA8A04;
  --bi-color-chart-15: #A8A29E;  --bi-color-chart-16: #DB2777;
  --bi-color-chart-17: #059669;  --bi-color-chart-18: #A78BFA;
  --bi-color-chart-19: #EA580C;  --bi-color-chart-20: #2563EB;
  --bi-color-chart-21: #4F46E5;  --bi-color-chart-22: #C026D3;
  --bi-color-chart-23: #0E7490;  --bi-color-chart-24: #A16207;

  --bi-color-waterfall-positive: #10B981;
  --bi-color-waterfall-negative: #EF4444;
  --bi-color-waterfall-total:    #7C3AED;
  --bi-color-sequential-1: #ede9fe;
  --bi-color-sequential-2: #c4b5fd;
  --bi-color-sequential-3: #8b5cf6;
  --bi-color-sequential-4: #6d28d9;
  --bi-color-sequential-5: #4c1d95;

  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --bi-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);
  --bi-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --bi-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--bi-color-brand-primary-rgb), 0.08);
  --bi-glow-brand:     0 0 12px rgba(var(--bi-color-brand-primary-rgb), 0.1);
  --bi-glow-secondary: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.1);
  --bi-glow-success:   0 0 12px rgba(16, 185, 129, 0.1);
  --bi-glow-error:     0 0 12px rgba(239, 68, 68, 0.1);

  --bi-gradient-brand:         linear-gradient(135deg, var(--bi-color-brand-primary) 0%, #A855F7 100%);
  --bi-gradient-brand-subtle:  linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, rgba(168, 85, 247, 0.03) 100%);
  --bi-gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100%);
  --bi-gradient-surface-glow:  radial-gradient(ellipse at top, rgba(var(--bi-color-brand-primary-rgb), 0.02) 0%, transparent 70%);
  --bi-gradient-atmosphere:
    radial-gradient(ellipse at 20% 0%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--bi-color-brand-primary-rgb), 0.03) 0%, transparent 50%);

  --bi-opacity-subtle: 0.04;
  --bi-opacity-light:  0.08;
  --bi-opacity-medium: 0.12;
  --bi-opacity-strong: 0.3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #AB80F3;
  --bi-color-brand-primary-dim: #5512C8;
  --bi-glow-primary: rgba(124, 58, 237, 0.4);
  --bi-glow-primary-subtle: rgba(124, 58, 237, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(124, 58, 237, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(124, 58, 237, 0.4);
}

/* --- end ./palettes/palette-violet-light.css --- */


/* --- inlined from ./palettes/palette-vault-obsidian-dark.css --- */
/* ============================================
   Vault Obsidian — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: vault-obsidian
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="vault-obsidian"][data-mode="dark"], [data-palette="vault-obsidian"][data-mode="dark"] {
  /* background */
  --bi-color-bg-base: #0A0A0A;
  --bi-color-bg-elevated: #171717;
  --bi-color-bg-surface: #1F1F1F;

  /* border */
  --bi-color-border-default: #262626;
  --bi-color-border-subtle: #1F1F1F;

  /* brand */
  --bi-color-brand-primary: #FFD700;
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-primary-muted: rgba(255, 215, 0, 0.15);
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);

  /* effects */
  --bi-hover-glow: 0 0 12px 2px rgba(255, 255, 255, 0.08);
  --bi-shadow-elevation: 0 8px 30px rgba(0, 0, 0, 0.12);
  --bi-shadow-recording: 0 0 32px 8px rgba(239, 68, 68, 0.5);
  --bi-shadow-recording-intense: 0 0 48px 16px rgba(239, 68, 68, 0.8);

  /* interaction */
  --bi-color-hover-bg: rgba(255, 255, 255, 0.05);
  --bi-focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.2);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 1.5s;
  --bi-duration-shine: 5s;
  --bi-duration-slow: 0.4s;

  /* other */
  --bi-radius: 0.625rem;

  /* status */
  --bi-color-status-error: #EF4444;
  --bi-color-status-info: #3B82F6;
  --bi-color-status-success: #22C55E;
  --bi-color-status-warning: #F59E0B;

  /* text */
  --bi-color-text-muted: #737373;
  --bi-color-text-primary: #FAFAFA;
  --bi-color-text-secondary: #A3A3A3;
  --bi-shadow-text-glow: 0 0 16px rgba(255, 255, 255, 0.5);

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #FFE34D;
  --bi-color-brand-primary-dim: #B29600;
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: rgba(255, 215, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- end ./palettes/palette-vault-obsidian-dark.css --- */


/* --- inlined from ./palettes/palette-vault-obsidian-light.css --- */
/* ============================================
   Vault Obsidian — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: vault-obsidian
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="vault-obsidian"][data-mode="light"], [data-palette="vault-obsidian"][data-mode="light"] {
  /* background */
  --bi-color-bg-base: #FAFAFA;
  --bi-color-bg-elevated: #FFFFFF;
  --bi-color-bg-surface: #F5F5F5;

  /* border */
  --bi-color-border-default: #E5E5E5;
  --bi-color-border-subtle: #F0F0F0;

  /* brand */
  --bi-color-brand-primary: #D4A800;
  --bi-color-brand-primary-rgb: 212, 168, 0;
  --bi-color-brand-primary-muted: rgba(212, 168, 0, 0.15);
  --bi-color-brand-secondary: #2563EB;
  --bi-color-brand-secondary-bright: #3B82F6;
  --bi-color-brand-secondary-muted: rgba(37, 99, 235, 0.15);

  /* effects */
  --bi-hover-glow: 0 0 12px 2px rgba(0, 0, 0, 0.06);
  --bi-shadow-elevation: 0 8px 30px rgba(0, 0, 0, 0.12);
  --bi-shadow-recording: 0 0 32px 8px rgba(239, 68, 68, 0.5);
  --bi-shadow-recording-intense: 0 0 48px 16px rgba(239, 68, 68, 0.8);

  /* interaction */
  --bi-color-hover-bg: rgba(0, 0, 0, 0.03);
  --bi-focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.1);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 1.5s;
  --bi-duration-shine: 5s;
  --bi-duration-slow: 0.4s;

  /* other */
  --bi-radius: 0.625rem;

  /* status */
  --bi-color-status-error: #DC2626;
  --bi-color-status-info: #2563EB;
  --bi-color-status-success: #16A34A;
  --bi-color-status-warning: #D97706;

  /* text */
  --bi-color-text-muted: #A3A3A3;
  --bi-color-text-primary: #0A0A0A;
  --bi-color-text-secondary: #525252;
  --bi-shadow-text-glow: 0 0 16px rgba(255, 255, 255, 0.5);

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-color-brand-primary-bright: #FFD121;
  --bi-color-brand-primary-dim: #886B00;
  --bi-glow-primary: rgba(212, 168, 0, 0.4);
  --bi-glow-primary-subtle: rgba(212, 168, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(212, 168, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(212, 168, 0, 0.4);
}

/* --- end ./palettes/palette-vault-obsidian-light.css --- */


/* --- inlined from ./palettes/palette-forest-canopy-dark.css --- */
/* ============================================
   Forest Canopy — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: forest-canopy
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="forest-canopy"][data-mode="dark"], [data-palette="forest-canopy"][data-mode="dark"] {
  /* background */
  --bi-color-bg-base: #0B0F0D;
  --bi-color-bg-base-rgb: 11, 15, 13;
  --bi-color-bg-card: rgba(16, 185, 129, 0.025);
  --bi-color-bg-elevated: #1C2320;
  --bi-color-bg-hover: #25302C;
  --bi-color-bg-input: #0E1311;
  --bi-color-bg-overlay: rgba(11, 15, 13, 0.92);
  --bi-color-bg-surface: #131815;

  /* border */
  --bi-border-color-brand: rgba(16, 185, 129, 0.5);
  --bi-color-border-default: rgba(255, 255, 255, 0.12);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);

  /* brand */
  --bi-color-brand-accent: #C9A66B;
  --bi-color-brand-accent-rgb: 201, 166, 107;
  --bi-color-brand-gold: #FFD700;
  --bi-color-brand-gold-rgb: 255, 215, 0;
  --bi-color-brand-primary: #10B981;
  --bi-color-brand-primary-bright: #34D399;
  --bi-color-brand-primary-dim: #059669;
  --bi-color-brand-primary-light: #6EE7B7;
  --bi-color-brand-primary-muted: rgba(16, 185, 129, 0.15);
  --bi-color-brand-primary-rgb: 16, 185, 129;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-danger: 0 0 16px rgba(239, 68, 68, 0.3);
  --bi-glow-gold: 0 0 20px rgba(255, 215, 0, 0.25);
  --bi-glow-primary: 0 0 20px rgba(16, 185, 129, 0.25);
  --bi-glow-primary-strong: 0 0 32px rgba(16, 185, 129, 0.4);
  --bi-shadow-elevated: 0 12px 40px rgba(0,0,0,0.55);
  --bi-shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  --bi-shadow-md: 0 4px 14px rgba(0,0,0,0.4);
  --bi-shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --bi-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);

  /* gradient */
  --bi-gradient-atmosphere: radial-gradient(circle at 50% 30%, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, transparent 60%);
  --bi-gradient-glossy: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  --bi-gradient-header: linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.08) 0%, transparent 60%);
  --bi-gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(var(--bi-color-brand-primary-rgb), 0.18) 50%, transparent 100%);
  --bi-gradient-splash-bg: radial-gradient(ellipse at 50% 40%,
      rgba(16, 185, 129, 0.18) 0%,
      rgba(11, 15, 13, 0.95) 70%);
  --bi-gradient-splash-shimmer: linear-gradient(90deg, transparent 0%,
      rgba(var(--bi-color-brand-primary-rgb), 0.35) 50%,
      transparent 100%);

  /* motion */
  --bi-duration-fast: 160ms;
  --bi-duration-instant: 80ms;
  --bi-duration-normal: 240ms;
  --bi-duration-slow: 380ms;
  --bi-transition-fast: var(--bi-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  --bi-transition-normal: var(--bi-duration-normal) cubic-bezier(0, 0, 0.2, 1);

  /* other */
  --bi-blur-md: blur(16px);
  --bi-blur-sm: blur(8px);
  --bi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.65;
  --bi-leading-snug: 1.35;
  --bi-leading-tight: 1.2;
  --bi-list-width: 420px;
  --bi-opacity-light: 0.12;
  --bi-opacity-medium: 0.25;
  --bi-opacity-subtle: 0.06;
  --bi-priority-high: #F97316;
  --bi-priority-low: #94A3B8;
  --bi-priority-normal: #6B7280;
  --bi-priority-urgent: #EF4444;
  --bi-weight-bold: 700;
  --bi-weight-medium: 500;
  --bi-weight-regular: 400;
  --bi-weight-semibold: 600;

  /* spacing */
  --bi-radius-full: 9999px;
  --bi-radius-lg: 10px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 14px;
  --bi-radius-xs: 2px;
  --bi-space-0: 0;
  --bi-space-1: 0.25rem;
  --bi-space-10: 2.5rem;
  --bi-space-12: 3rem;
  --bi-space-16: 4rem;
  --bi-space-2: 0.5rem;
  --bi-space-3: 0.75rem;
  --bi-space-4: 1rem;
  --bi-space-5: 1.25rem;
  --bi-space-6: 1.5rem;
  --bi-space-8: 2rem;

  /* status */
  --bi-color-feature-danger: #EF4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-info: #3B82F6;
  --bi-color-feature-info-rgb: 59, 130, 246;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;
  --bi-status-closed: #6B7280;
  --bi-status-new: #3B82F6;
  --bi-status-open: #F59E0B;
  --bi-status-pending: #A855F7;
  --bi-status-solved: #10B981;

  /* text */
  --bi-color-text-dim: #4B5752;
  --bi-color-text-inverse: #0B0F0D;
  --bi-color-text-muted: #6F7E78;
  --bi-color-text-primary: #E8EFEC;
  --bi-color-text-secondary: #A3B0AB;
  --bi-gradient-text-shine: linear-gradient(90deg,
      var(--bi-color-brand-primary) 0%,
      var(--bi-color-brand-primary-bright) 40%,
      var(--bi-color-brand-primary) 80%);
  --bi-text-2xl: 1.5rem;
  --bi-text-3xl: 1.875rem;
  --bi-text-base: 0.875rem;
  --bi-text-lg: 1.0625rem;
  --bi-text-md: 0.9375rem;
  --bi-text-sm: 0.8125rem;
  --bi-text-xl: 1.25rem;
  --bi-text-xs: 0.6875rem;

  /* typography */
  --bi-font-body: var(--font-inter), 'Inter', system-ui, sans-serif;
  --bi-font-display: var(--font-grotesk), 'Space Grotesk', system-ui, sans-serif;
  --bi-font-mono: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary-subtle: rgba(16, 185, 129, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* --- end ./palettes/palette-forest-canopy-dark.css --- */


/* --- inlined from ./palettes/palette-forest-canopy-light.css --- */
/* ============================================
   Forest Canopy — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: forest-canopy
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="forest-canopy"][data-mode="light"], [data-palette="forest-canopy"][data-mode="light"] {
  /* background */
  --bi-color-bg-base: #0B0F0D;
  --bi-color-bg-base-rgb: 11, 15, 13;
  --bi-color-bg-card: rgba(16, 185, 129, 0.025);
  --bi-color-bg-elevated: #1C2320;
  --bi-color-bg-hover: #25302C;
  --bi-color-bg-input: #0E1311;
  --bi-color-bg-overlay: rgba(11, 15, 13, 0.92);
  --bi-color-bg-surface: #131815;

  /* border */
  --bi-border-color-brand: rgba(16, 185, 129, 0.5);
  --bi-color-border-default: rgba(255, 255, 255, 0.12);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);

  /* brand */
  --bi-color-brand-accent: #C9A66B;
  --bi-color-brand-accent-rgb: 201, 166, 107;
  --bi-color-brand-gold: #FFD700;
  --bi-color-brand-gold-rgb: 255, 215, 0;
  --bi-color-brand-primary: #10B981;
  --bi-color-brand-primary-bright: #34D399;
  --bi-color-brand-primary-dim: #059669;
  --bi-color-brand-primary-light: #6EE7B7;
  --bi-color-brand-primary-muted: rgba(16, 185, 129, 0.15);
  --bi-color-brand-primary-rgb: 16, 185, 129;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-danger: 0 0 16px rgba(239, 68, 68, 0.3);
  --bi-glow-gold: 0 0 20px rgba(255, 215, 0, 0.25);
  --bi-glow-primary: 0 0 20px rgba(16, 185, 129, 0.25);
  --bi-glow-primary-strong: 0 0 32px rgba(16, 185, 129, 0.4);
  --bi-shadow-elevated: 0 12px 40px rgba(0,0,0,0.55);
  --bi-shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  --bi-shadow-md: 0 4px 14px rgba(0,0,0,0.4);
  --bi-shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --bi-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);

  /* gradient */
  --bi-gradient-atmosphere: radial-gradient(circle at 50% 30%, rgba(var(--bi-color-brand-primary-rgb), 0.06) 0%, transparent 60%);
  --bi-gradient-glossy: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  --bi-gradient-header: linear-gradient(135deg, rgba(var(--bi-color-brand-primary-rgb), 0.08) 0%, transparent 60%);
  --bi-gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(var(--bi-color-brand-primary-rgb), 0.18) 50%, transparent 100%);
  --bi-gradient-splash-bg: radial-gradient(ellipse at 50% 40%,
      rgba(16, 185, 129, 0.18) 0%,
      rgba(11, 15, 13, 0.95) 70%);
  --bi-gradient-splash-shimmer: linear-gradient(90deg, transparent 0%,
      rgba(var(--bi-color-brand-primary-rgb), 0.35) 50%,
      transparent 100%);

  /* motion */
  --bi-duration-fast: 160ms;
  --bi-duration-instant: 80ms;
  --bi-duration-normal: 240ms;
  --bi-duration-slow: 380ms;
  --bi-transition-fast: var(--bi-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  --bi-transition-normal: var(--bi-duration-normal) cubic-bezier(0, 0, 0.2, 1);

  /* other */
  --bi-blur-md: blur(16px);
  --bi-blur-sm: blur(8px);
  --bi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.65;
  --bi-leading-snug: 1.35;
  --bi-leading-tight: 1.2;
  --bi-list-width: 420px;
  --bi-opacity-light: 0.12;
  --bi-opacity-medium: 0.25;
  --bi-opacity-subtle: 0.06;
  --bi-priority-high: #F97316;
  --bi-priority-low: #94A3B8;
  --bi-priority-normal: #6B7280;
  --bi-priority-urgent: #EF4444;
  --bi-weight-bold: 700;
  --bi-weight-medium: 500;
  --bi-weight-regular: 400;
  --bi-weight-semibold: 600;

  /* spacing */
  --bi-radius-full: 9999px;
  --bi-radius-lg: 10px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 14px;
  --bi-radius-xs: 2px;
  --bi-space-0: 0;
  --bi-space-1: 0.25rem;
  --bi-space-10: 2.5rem;
  --bi-space-12: 3rem;
  --bi-space-16: 4rem;
  --bi-space-2: 0.5rem;
  --bi-space-3: 0.75rem;
  --bi-space-4: 1rem;
  --bi-space-5: 1.25rem;
  --bi-space-6: 1.5rem;
  --bi-space-8: 2rem;

  /* status */
  --bi-color-feature-danger: #EF4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-info: #3B82F6;
  --bi-color-feature-info-rgb: 59, 130, 246;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;
  --bi-status-closed: #6B7280;
  --bi-status-new: #3B82F6;
  --bi-status-open: #F59E0B;
  --bi-status-pending: #A855F7;
  --bi-status-solved: #10B981;

  /* text */
  --bi-color-text-dim: #4B5752;
  --bi-color-text-inverse: #0B0F0D;
  --bi-color-text-muted: #6F7E78;
  --bi-color-text-primary: #E8EFEC;
  --bi-color-text-secondary: #A3B0AB;
  --bi-gradient-text-shine: linear-gradient(90deg,
      var(--bi-color-brand-primary) 0%,
      var(--bi-color-brand-primary-bright) 40%,
      var(--bi-color-brand-primary) 80%);
  --bi-text-2xl: 1.5rem;
  --bi-text-3xl: 1.875rem;
  --bi-text-base: 0.875rem;
  --bi-text-lg: 1.0625rem;
  --bi-text-md: 0.9375rem;
  --bi-text-sm: 0.8125rem;
  --bi-text-xl: 1.25rem;
  --bi-text-xs: 0.6875rem;

  /* typography */
  --bi-font-body: var(--font-inter), 'Inter', system-ui, sans-serif;
  --bi-font-display: var(--font-grotesk), 'Space Grotesk', system-ui, sans-serif;
  --bi-font-mono: var(--font-mono), 'JetBrains Mono', ui-monospace, monospace;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary-subtle: rgba(16, 185, 129, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* --- end ./palettes/palette-forest-canopy-light.css --- */


/* --- inlined from ./palettes/palette-velvet-crimson-rose-dark.css --- */
/* ============================================
   Velvet Crimson Rose — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: velvet-crimson-rose
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="velvet-crimson-rose"][data-mode="dark"], [data-palette="velvet-crimson-rose"][data-mode="dark"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0C0610;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-elevated: #1F1522;
  --bi-color-bg-hover: #2D1F30;
  --bi-color-bg-overlay: rgba(12, 6, 16, 0.95);
  --bi-color-bg-surface: #150D18;

  /* border */
  --bi-border-accent: 1px solid rgba(225, 29, 72, 0.2);
  --bi-border-card: 1px solid rgba(225, 29, 72, 0.12);
  --bi-border-color-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.12);
  --bi-color-border-primary: rgba(225, 29, 72, 0.3);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.08);
  --bi-border-subtle: 1px solid rgba(225, 29, 72, 0.08);

  /* brand */
  --bi-color-brand-accent: #FFD700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-primary: #E11D48;
  --bi-color-brand-primary-bright: #FB7185;
  --bi-color-brand-primary-dim: #9F1239;
  --bi-color-brand-primary-rgb: 225, 29, 72;
  --bi-color-brand-secondary: #A855F7;
  --bi-color-brand-secondary-dim: #7C3AED;
  --bi-color-brand-secondary-rgb: 168, 85, 247;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(225, 29, 72, 0.4);
  --bi-glow-primary-subtle: rgba(225, 29, 72, 0.15);
  --bi-glow-secondary: rgba(168, 85, 247, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(225, 29, 72, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(225, 29, 72, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(225, 29, 72, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(168, 85, 247, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(225, 29, 72, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-danger: #F87171;
  --bi-color-feature-danger-rgb: 248, 113, 113;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-info: #6366F1;
  --bi-color-feature-info-rgb: 99, 102, 241;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #6B5563;
  --bi-color-text-inverse: #0C0610;
  --bi-color-text-muted: #9E7A8A;
  --bi-color-text-primary: #FDF2F8;
  --bi-color-text-secondary: #D4A0B0;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-family-body: 'Inter', system-ui, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-velvet-crimson-rose-dark.css --- */


/* --- inlined from ./palettes/palette-velvet-crimson-rose-light.css --- */
/* ============================================
   Velvet Crimson Rose — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: velvet-crimson-rose
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="velvet-crimson-rose"][data-mode="light"], [data-palette="velvet-crimson-rose"][data-mode="light"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0C0610;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-elevated: #1F1522;
  --bi-color-bg-hover: #2D1F30;
  --bi-color-bg-overlay: rgba(12, 6, 16, 0.95);
  --bi-color-bg-surface: #150D18;

  /* border */
  --bi-border-accent: 1px solid rgba(225, 29, 72, 0.2);
  --bi-border-card: 1px solid rgba(225, 29, 72, 0.12);
  --bi-border-color-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.12);
  --bi-color-border-primary: rgba(225, 29, 72, 0.3);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.08);
  --bi-border-subtle: 1px solid rgba(225, 29, 72, 0.08);

  /* brand */
  --bi-color-brand-accent: #FFD700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-primary: #E11D48;
  --bi-color-brand-primary-bright: #FB7185;
  --bi-color-brand-primary-dim: #9F1239;
  --bi-color-brand-primary-rgb: 225, 29, 72;
  --bi-color-brand-secondary: #A855F7;
  --bi-color-brand-secondary-dim: #7C3AED;
  --bi-color-brand-secondary-rgb: 168, 85, 247;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(225, 29, 72, 0.4);
  --bi-glow-primary-subtle: rgba(225, 29, 72, 0.15);
  --bi-glow-secondary: rgba(168, 85, 247, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(225, 29, 72, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(225, 29, 72, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(225, 29, 72, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(168, 85, 247, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(225, 29, 72, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-danger: #F87171;
  --bi-color-feature-danger-rgb: 248, 113, 113;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-info: #6366F1;
  --bi-color-feature-info-rgb: 99, 102, 241;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #6B5563;
  --bi-color-text-inverse: #0C0610;
  --bi-color-text-muted: #9E7A8A;
  --bi-color-text-primary: #FDF2F8;
  --bi-color-text-secondary: #D4A0B0;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-family-body: 'Inter', system-ui, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-velvet-crimson-rose-light.css --- */


/* --- inlined from ./palettes/palette-velvet-blood-orange-dark.css --- */
/* ============================================
   Velvet Blood Orange — DARK mode
   Derived from velvet-crimson-rose-dark.css at 2026-06-01.
   Brand-accent swapped from gold #FFD700 → blood orange #D2461C
   per user 2026-06-01 « le jaune c'est overused ».
   ============================================ */

html[data-palette="velvet-blood-orange"][data-mode="dark"], [data-palette="velvet-blood-orange"][data-mode="dark"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0C0610;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-elevated: #1F1522;
  --bi-color-bg-hover: #2D1F30;
  --bi-color-bg-overlay: rgba(12, 6, 16, 0.95);
  --bi-color-bg-surface: #150D18;

  /* border */
  --bi-border-accent: 1px solid rgba(225, 29, 72, 0.2);
  --bi-border-card: 1px solid rgba(225, 29, 72, 0.12);
  --bi-border-color-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.12);
  --bi-color-border-primary: rgba(225, 29, 72, 0.3);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.08);
  --bi-border-subtle: 1px solid rgba(225, 29, 72, 0.08);

  /* brand */
  --bi-color-brand-accent: #D2461C;
  --bi-color-brand-accent-rgb: 210, 70, 28;
  --bi-color-brand-primary: #E11D48;
  --bi-color-brand-primary-bright: #FB7185;
  --bi-color-brand-primary-dim: #9F1239;
  --bi-color-brand-primary-rgb: 225, 29, 72;
  --bi-color-brand-secondary: #A855F7;
  --bi-color-brand-secondary-dim: #7C3AED;
  --bi-color-brand-secondary-rgb: 168, 85, 247;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(210, 70, 28, 0.35);
  --bi-glow-primary: rgba(225, 29, 72, 0.4);
  --bi-glow-primary-subtle: rgba(225, 29, 72, 0.15);
  --bi-glow-secondary: rgba(168, 85, 247, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(225, 29, 72, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(225, 29, 72, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(225, 29, 72, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(168, 85, 247, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(225, 29, 72, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-danger: #F87171;
  --bi-color-feature-danger-rgb: 248, 113, 113;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-info: #6366F1;
  --bi-color-feature-info-rgb: 99, 102, 241;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #6B5563;
  --bi-color-text-inverse: #0C0610;
  --bi-color-text-muted: #9E7A8A;
  --bi-color-text-primary: #FDF2F8;
  --bi-color-text-secondary: #D4A0B0;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-family-body: 'Inter', system-ui, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-velvet-blood-orange-dark.css --- */


/* --- inlined from ./palettes/palette-velvet-blood-orange-light.css --- */
/* ============================================
   Velvet Blood Orange — LIGHT mode
   Derived from velvet-crimson-rose-light.css at 2026-06-01.
   Brand-accent swapped from gold #FFD700 → blood orange #E94E1B
   per user 2026-06-01 « le jaune c'est overused ».
   ============================================ */

html[data-palette="velvet-blood-orange"][data-mode="light"], [data-palette="velvet-blood-orange"][data-mode="light"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0C0610;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-elevated: #1F1522;
  --bi-color-bg-hover: #2D1F30;
  --bi-color-bg-overlay: rgba(12, 6, 16, 0.95);
  --bi-color-bg-surface: #150D18;

  /* border */
  --bi-border-accent: 1px solid rgba(225, 29, 72, 0.2);
  --bi-border-card: 1px solid rgba(225, 29, 72, 0.12);
  --bi-border-color-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.12);
  --bi-color-border-primary: rgba(225, 29, 72, 0.3);
  --bi-color-border-strong: rgba(255, 255, 255, 0.18);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.08);
  --bi-border-subtle: 1px solid rgba(225, 29, 72, 0.08);

  /* brand */
  --bi-color-brand-accent: #E94E1B;
  --bi-color-brand-accent-rgb: 233, 78, 27;
  --bi-color-brand-primary: #E11D48;
  --bi-color-brand-primary-bright: #FB7185;
  --bi-color-brand-primary-dim: #9F1239;
  --bi-color-brand-primary-rgb: 225, 29, 72;
  --bi-color-brand-secondary: #A855F7;
  --bi-color-brand-secondary-dim: #7C3AED;
  --bi-color-brand-secondary-rgb: 168, 85, 247;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(233, 78, 27, 0.35);
  --bi-glow-primary: rgba(225, 29, 72, 0.4);
  --bi-glow-primary-subtle: rgba(225, 29, 72, 0.15);
  --bi-glow-secondary: rgba(168, 85, 247, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(225, 29, 72, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(225, 29, 72, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(225, 29, 72, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(168, 85, 247, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(225, 29, 72, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-danger: #F87171;
  --bi-color-feature-danger-rgb: 248, 113, 113;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-info: #6366F1;
  --bi-color-feature-info-rgb: 99, 102, 241;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #6B5563;
  --bi-color-text-inverse: #0C0610;
  --bi-color-text-muted: #9E7A8A;
  --bi-color-text-primary: #FDF2F8;
  --bi-color-text-secondary: #D4A0B0;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-family-body: 'Inter', system-ui, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-velvet-blood-orange-light.css --- */


/* --- inlined from ./palettes/palette-electric-storm-dark.css --- */
/* ============================================
   Electric Storm — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: electric-storm-hitl, electric-storm-slider
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="electric-storm"][data-mode="dark"], [data-palette="electric-storm"][data-mode="dark"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #050510;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #1a1a2e;
  --bi-color-bg-elevated: #0f0f24;
  --bi-color-bg-github-dark: #0d1117;
  --bi-color-bg-hover: #141432;
  --bi-color-bg-light: #f5f5f5;
  --bi-color-bg-light-blue: #f0f4ff;
  --bi-color-bg-overlay: rgba(5, 5, 16, 0.95);
  --bi-color-bg-panel: #2a3a6a;
  --bi-color-bg-surface: #0a0a1a;

  /* border */
  --bi-border-accent: 1px solid rgba(0, 212, 255, 0.2);
  --bi-border-card: 2px solid rgba(0, 212, 255, 0.2);
  --bi-border-color-error: rgba(255, 107, 107, 0.3);
  --bi-border-color-error-strong: rgba(255, 107, 107, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-color-border-primary: rgba(0, 212, 255, 0.3);
  --bi-border-color-primary-strong: rgba(0, 212, 255, 0.4);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(0, 184, 148, 0.4);
  --bi-border-color-success-muted: rgba(0, 184, 148, 0.15);
  --bi-border-color-warning: rgba(253, 203, 110, 0.3);
  --bi-border-color-warning-strong: rgba(255, 152, 0, 0.4);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.1);
  --bi-border-subtle: 1px solid rgba(0, 212, 255, 0.1);

  /* brand */
  --bi-color-brand-accent: #ffd700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-primary: #00d4ff;
  --bi-color-brand-primary-bright: #4de8ff;
  --bi-color-brand-primary-dim: #0099cc;
  --bi-color-brand-primary-rgb: 0, 212, 255;
  --bi-color-brand-purple: #a371f7;
  --bi-color-brand-purple-light: #c49fff;
  --bi-color-brand-secondary: #8b5cf6;
  --bi-color-brand-secondary-dim: #8957e5;
  --bi-color-brand-secondary-rgb: 139, 92, 246;

  /* effects */
  --bi-glow-blue: rgba(88, 166, 255, 0.3);
  --bi-glow-error: rgba(255, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(0, 212, 255, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(0, 212, 255, 0.2);
  --bi-glow-secondary: rgba(139, 92, 246, 0.4);
  --bi-glow-success: rgba(0, 184, 148, 0.3);
  --bi-glow-warning: rgba(255, 152, 0, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.2);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
  --bi-shadow-color-heavy: rgba(0, 0, 0, 0.4);
  --bi-shadow-color-medium: rgba(0, 0, 0, 0.2);
  --bi-shadow-color-subtle: rgba(0, 0, 0, 0.1);
  --bi-shadow-deep: 0 0 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-blue: 0 8px 25px rgba(88, 166, 255, 0.12);
  --bi-shadow-glow-gold: 0 0 10px rgba(255, 215, 0, 0.3);
  --bi-shadow-glow-primary: 0 0 20px rgba(0, 212, 255, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(0, 212, 255, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(0, 184, 148, 0.2);
  --bi-shadow-glow-success-strong: 0 0 20px rgba(0, 184, 148, 0.3);
  --bi-shadow-glow-warning: 0 0 20px rgba(255, 152, 0, 0.2);
  --bi-shadow-glow-warning-strong: 0 0 40px rgba(255, 152, 0, 0.4);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --bi-shadow-lifted: 0 8px 24px rgba(0, 212, 255, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);
  --bi-transition-glow: 0.3s ease;

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-reveal: 0.15s;
  --bi-motion-reveal-slow: 1s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-color-warning: var(--bi-color-feature-warning);
  --bi-ring-error: 0 0 0 2px rgba(255, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(0, 212, 255, 0.2);
  --bi-ring-pulse: 0 0 0 6px rgba(0, 212, 255, 0);
  --bi-ring-pulse-error: 0 0 0 6px rgba(255, 68, 68, 0);
  --bi-ring-warning: 0 0 0 2px rgba(255, 152, 0, 0.2);
  --bi-table-border: rgba(255, 255, 255, 0.1);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #2196f3;
  --bi-color-feature-blue-dim: #1158c7;
  --bi-color-feature-danger: #ff6b6b;
  --bi-color-feature-danger-rgb: 255, 107, 107;
  --bi-color-feature-error: #ff4757;
  --bi-color-feature-error-rgb: 255, 71, 87;
  --bi-color-feature-green: #4caf50;
  --bi-color-feature-orange: #ff9800;
  --bi-color-feature-pink: #e91e63;
  --bi-color-feature-red: #ff4444;
  --bi-color-feature-success: #00b894;
  --bi-color-feature-success-dim: #196c2e;
  --bi-color-feature-success-rgb: 0, 184, 148;
  --bi-color-feature-warning: #ff9800;
  --bi-color-feature-warning-alt: #fdcb6e;
  --bi-color-feature-warning-alt-rgb: 253, 203, 110;
  --bi-color-feature-warning-rgb: 255, 152, 0;

  /* text */
  --bi-color-text-black: #1A1A1A;
  --bi-color-text-dim: #6b7a8c;
  --bi-color-text-inverse: #0d1117;
  --bi-color-text-muted: #8899aa;
  --bi-color-text-primary: #f0f4ff;
  --bi-color-text-secondary: #a0b0c8;
  --bi-text-10xl: 144px;
  --bi-text-11xl: 196px;
  --bi-text-12xl: 240px;
  --bi-text-2xl: 20px;
  --bi-text-2xs: 9px;
  --bi-text-3xl: 24px;
  --bi-text-3xs: 8px;
  --bi-text-4xl: 32px;
  --bi-text-5xl: 48px;
  --bi-text-6xl: 64px;
  --bi-text-7xl: 72px;
  --bi-text-8xl: 96px;
  --bi-text-9xl: 120px;
  --bi-text-base: 13px;
  --bi-text-code: 13px;
  --bi-text-lg: 16px;
  --bi-text-md: 14px;
  --bi-text-sm: 12px;
  --bi-text-xl: 18px;
  --bi-text-xs: 10px;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Roboto', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-heading: 'Space Grotesk', var(--bi-font-family-base);
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 13px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-weight-thin: 100;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-electric-storm-dark.css --- */


/* --- inlined from ./palettes/palette-electric-storm-light.css --- */
/* ============================================
   Electric Storm — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: electric-storm-hitl, electric-storm-slider
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="electric-storm"][data-mode="light"], [data-palette="electric-storm"][data-mode="light"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.05);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.1);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.15);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #050510;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #1a1a2e;
  --bi-color-bg-elevated: #0f0f24;
  --bi-color-bg-github-dark: #0d1117;
  --bi-color-bg-hover: #141432;
  --bi-color-bg-light: #f5f5f5;
  --bi-color-bg-light-blue: #f0f4ff;
  --bi-color-bg-overlay: rgba(5, 5, 16, 0.95);
  --bi-color-bg-panel: #2a3a6a;
  --bi-color-bg-surface: #0a0a1a;

  /* border */
  --bi-border-accent: 1px solid rgba(0, 212, 255, 0.2);
  --bi-border-card: 2px solid rgba(0, 212, 255, 0.2);
  --bi-border-color-error: rgba(255, 107, 107, 0.3);
  --bi-border-color-error-strong: rgba(255, 107, 107, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.08);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-color-border-primary: rgba(0, 212, 255, 0.3);
  --bi-border-color-primary-strong: rgba(0, 212, 255, 0.4);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.05);
  --bi-border-color-success: rgba(0, 184, 148, 0.4);
  --bi-border-color-success-muted: rgba(0, 184, 148, 0.15);
  --bi-border-color-warning: rgba(253, 203, 110, 0.3);
  --bi-border-color-warning-strong: rgba(255, 152, 0, 0.4);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.1);
  --bi-border-subtle: 1px solid rgba(0, 212, 255, 0.1);

  /* brand */
  --bi-color-brand-accent: #ffd700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-primary: #00d4ff;
  --bi-color-brand-primary-bright: #4de8ff;
  --bi-color-brand-primary-dim: #0099cc;
  --bi-color-brand-primary-rgb: 0, 212, 255;
  --bi-color-brand-purple: #a371f7;
  --bi-color-brand-purple-light: #c49fff;
  --bi-color-brand-secondary: #8b5cf6;
  --bi-color-brand-secondary-dim: #8957e5;
  --bi-color-brand-secondary-rgb: 139, 92, 246;

  /* effects */
  --bi-glow-blue: rgba(88, 166, 255, 0.3);
  --bi-glow-error: rgba(255, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(0, 212, 255, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(0, 212, 255, 0.2);
  --bi-glow-secondary: rgba(139, 92, 246, 0.4);
  --bi-glow-success: rgba(0, 184, 148, 0.3);
  --bi-glow-warning: rgba(255, 152, 0, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.2);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
  --bi-shadow-color-heavy: rgba(0, 0, 0, 0.4);
  --bi-shadow-color-medium: rgba(0, 0, 0, 0.2);
  --bi-shadow-color-subtle: rgba(0, 0, 0, 0.1);
  --bi-shadow-deep: 0 0 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-blue: 0 8px 25px rgba(88, 166, 255, 0.12);
  --bi-shadow-glow-gold: 0 0 10px rgba(255, 215, 0, 0.3);
  --bi-shadow-glow-primary: 0 0 20px rgba(0, 212, 255, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(0, 212, 255, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(0, 184, 148, 0.2);
  --bi-shadow-glow-success-strong: 0 0 20px rgba(0, 184, 148, 0.3);
  --bi-shadow-glow-warning: 0 0 20px rgba(255, 152, 0, 0.2);
  --bi-shadow-glow-warning-strong: 0 0 40px rgba(255, 152, 0, 0.4);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --bi-shadow-lifted: 0 8px 24px rgba(0, 212, 255, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);
  --bi-transition-glow: 0.3s ease;

  /* motion */
  --bi-easing-default: ease;
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: ease-out;
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.6s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.3s;
  --bi-motion-reveal: 0.15s;
  --bi-motion-reveal-slow: 1s;
  --bi-motion-slow: 0.5s;
  --bi-transition-fast: 0.15s ease;
  --bi-transition-normal: 0.3s ease;
  --bi-transition-slow: 0.5s ease;

  /* other */
  --bi-blur-lg: 30px;
  --bi-blur-md: 20px;
  --bi-blur-sm: 10px;
  --bi-color-warning: var(--bi-color-feature-warning);
  --bi-ring-error: 0 0 0 2px rgba(255, 68, 68, 0.2);
  --bi-ring-primary: 0 0 0 2px rgba(0, 212, 255, 0.2);
  --bi-ring-pulse: 0 0 0 6px rgba(0, 212, 255, 0);
  --bi-ring-pulse-error: 0 0 0 6px rgba(255, 68, 68, 0);
  --bi-ring-warning: 0 0 0 2px rgba(255, 152, 0, 0.2);
  --bi-table-border: rgba(255, 255, 255, 0.1);

  /* spacing */
  --bi-radius-2xl: 12px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 10px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #2196f3;
  --bi-color-feature-blue-dim: #1158c7;
  --bi-color-feature-danger: #ff6b6b;
  --bi-color-feature-danger-rgb: 255, 107, 107;
  --bi-color-feature-error: #ff4757;
  --bi-color-feature-error-rgb: 255, 71, 87;
  --bi-color-feature-green: #4caf50;
  --bi-color-feature-orange: #ff9800;
  --bi-color-feature-pink: #e91e63;
  --bi-color-feature-red: #ff4444;
  --bi-color-feature-success: #00b894;
  --bi-color-feature-success-dim: #196c2e;
  --bi-color-feature-success-rgb: 0, 184, 148;
  --bi-color-feature-warning: #ff9800;
  --bi-color-feature-warning-alt: #fdcb6e;
  --bi-color-feature-warning-alt-rgb: 253, 203, 110;
  --bi-color-feature-warning-rgb: 255, 152, 0;

  /* text */
  --bi-color-text-black: #1A1A1A;
  --bi-color-text-dim: #6b7a8c;
  --bi-color-text-inverse: #0d1117;
  --bi-color-text-muted: #8899aa;
  --bi-color-text-primary: #f0f4ff;
  --bi-color-text-secondary: #a0b0c8;
  --bi-text-10xl: 144px;
  --bi-text-11xl: 196px;
  --bi-text-12xl: 240px;
  --bi-text-2xl: 20px;
  --bi-text-2xs: 9px;
  --bi-text-3xl: 24px;
  --bi-text-3xs: 8px;
  --bi-text-4xl: 32px;
  --bi-text-5xl: 48px;
  --bi-text-6xl: 64px;
  --bi-text-7xl: 72px;
  --bi-text-8xl: 96px;
  --bi-text-9xl: 120px;
  --bi-text-base: 13px;
  --bi-text-code: 13px;
  --bi-text-lg: 16px;
  --bi-text-md: 14px;
  --bi-text-sm: 12px;
  --bi-text-xl: 18px;
  --bi-text-xs: 10px;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Roboto', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --bi-font-heading: 'Space Grotesk', var(--bi-font-family-base);
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-weight-thin: 100;
  --bi-font-xl: 18px;
  --bi-font-xs: 10px;
}

/* --- end ./palettes/palette-electric-storm-light.css --- */


/* --- inlined from ./palettes/palette-carbon-teal-dark.css --- */
/* ============================================
   Carbon Teal — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: carbon-teal
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="carbon-teal"][data-mode="dark"], [data-palette="carbon-teal"][data-mode="dark"] {
  /* background */
  --bi-bg-brand-active: rgba(0, 189, 130, 0.1);
  --bi-bg-brand-hover: rgba(0, 189, 130, 0.06);
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0B100E;
  --bi-color-bg-base-rgb: 11, 16, 14;
  --bi-color-bg-card: rgba(0, 189, 130, 0.02);
  --bi-color-bg-dark: #080D0B;
  --bi-color-bg-elevated: #1A2420;
  --bi-color-bg-hover: #22302B;
  --bi-color-bg-input: #0E1412;
  --bi-color-bg-muted: #1A2420;
  --bi-color-bg-overlay: rgba(11, 16, 14, 0.95);
  --bi-color-bg-panel: #121A17;
  --bi-color-bg-surface: #121A17;

  /* border */
  --bi-border-accent: 1px solid rgba(0, 189, 130, 0.2);
  --bi-border-card: 1px solid rgba(0, 189, 130, 0.08);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-color-border-light: rgba(0, 189, 130, 0.08);
  --bi-color-border-medium: rgba(0, 189, 130, 0.12);
  --bi-color-border-primary: rgba(0, 189, 130, 0.2);
  --bi-border-color-secondary: rgba(59, 130, 246, 0.2);
  --bi-color-border-strong: rgba(0, 189, 130, 0.18);
  --bi-color-border-subtle: rgba(0, 189, 130, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-teal: rgba(16, 185, 129, 0.15);
  --bi-border-color-warning: rgba(243, 162, 87, 0.3);
  --bi-border-muted: 1px solid rgba(0, 189, 130, 0.05);
  --bi-border-subtle: 1px solid rgba(0, 189, 130, 0.08);

  /* brand */
  --bi-color-brand-accent: #EEB480;
  --bi-color-brand-accent-rgb: 238, 180, 128;
  --bi-color-brand-primary: #00BD82;
  --bi-color-brand-primary-bright: #34E8A5;
  --bi-color-brand-primary-dim: #009966;
  --bi-color-brand-primary-muted: rgba(0, 189, 130, 0.15);
  --bi-color-brand-primary-rgb: 0, 189, 130;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-dim: #1D4ED8;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-amber: rgba(238, 180, 128, 0.3);
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-primary: rgba(0, 189, 130, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(0, 189, 130, 0.15);
  --bi-glow-secondary: rgba(59, 130, 246, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-teal: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(243, 162, 87, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.45);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 189, 130, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 189, 130, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(0, 189, 130, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(0, 189, 130, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(59, 130, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-teal: 0 0 20px rgba(16, 185, 129, 0.15);
  --bi-shadow-glow-warning: 0 0 20px rgba(243, 162, 87, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 189, 130, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.45);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.3);

  /* motion */
  --bi-duration-dial-spin: 1.2s;
  --bi-duration-pulse: 1.5s;
  --bi-duration-ring: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-color-black-rgb: 0, 0, 0;
  --bi-color-white-rgb: 255, 255, 255;
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.75;
  --bi-leading-tight: 1.25;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(0, 189, 130, 0.3);
  --bi-ring-secondary: 0 0 0 2px rgba(59, 130, 246, 0.3);
  --bi-ring-teal: 0 0 0 2px rgba(16, 185, 129, 0.2);
  --bi-tracking-normal: 0;
  --bi-tracking-tight: -0.02em;
  --bi-tracking-wide: 0.05em;
  --bi-tracking-wider: 0.1em;

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3B82F6;
  --bi-color-feature-blue-dim: #1D4ED8;
  --bi-color-feature-danger: #EF4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #10B981;
  --bi-color-feature-orange: #F97316;
  --bi-color-feature-pink: #EC4899;
  --bi-color-feature-red: #DC2626;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F3A257;
  --bi-color-feature-warning-alt: #EEB480;
  --bi-color-feature-warning-alt-rgb: 238, 180, 128;
  --bi-color-feature-warning-rgb: 243, 162, 87;

  /* text */
  --bi-color-text-dim: #465C55;
  --bi-color-text-inverse: #0B100E;
  --bi-color-text-muted: #607A72;
  --bi-color-text-primary: #E8F2ED;
  --bi-color-text-secondary: #8FA69C;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --bi-font-heading: var(--bi-font-family-heading);
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 11px;
}

/* --- end ./palettes/palette-carbon-teal-dark.css --- */


/* --- inlined from ./palettes/palette-carbon-teal-light.css --- */
/* ============================================
   Carbon Teal — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: carbon-teal
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="carbon-teal"][data-mode="light"], [data-palette="carbon-teal"][data-mode="light"] {
  /* background */
  --bi-bg-brand-active: rgba(0, 189, 130, 0.1);
  --bi-bg-brand-hover: rgba(0, 189, 130, 0.06);
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0B100E;
  --bi-color-bg-base-rgb: 11, 16, 14;
  --bi-color-bg-card: rgba(0, 189, 130, 0.02);
  --bi-color-bg-dark: #080D0B;
  --bi-color-bg-elevated: #1A2420;
  --bi-color-bg-hover: #22302B;
  --bi-color-bg-input: #0E1412;
  --bi-color-bg-muted: #1A2420;
  --bi-color-bg-overlay: rgba(11, 16, 14, 0.95);
  --bi-color-bg-panel: #121A17;
  --bi-color-bg-surface: #121A17;

  /* border */
  --bi-border-accent: 1px solid rgba(0, 189, 130, 0.2);
  --bi-border-card: 1px solid rgba(0, 189, 130, 0.08);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-color-border-light: rgba(0, 189, 130, 0.08);
  --bi-color-border-medium: rgba(0, 189, 130, 0.12);
  --bi-color-border-primary: rgba(0, 189, 130, 0.2);
  --bi-border-color-secondary: rgba(59, 130, 246, 0.2);
  --bi-color-border-strong: rgba(0, 189, 130, 0.18);
  --bi-color-border-subtle: rgba(0, 189, 130, 0.05);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-teal: rgba(16, 185, 129, 0.15);
  --bi-border-color-warning: rgba(243, 162, 87, 0.3);
  --bi-border-muted: 1px solid rgba(0, 189, 130, 0.05);
  --bi-border-subtle: 1px solid rgba(0, 189, 130, 0.08);

  /* brand */
  --bi-color-brand-accent: #EEB480;
  --bi-color-brand-accent-rgb: 238, 180, 128;
  --bi-color-brand-primary: #00BD82;
  --bi-color-brand-primary-bright: #34E8A5;
  --bi-color-brand-primary-dim: #009966;
  --bi-color-brand-primary-muted: rgba(0, 189, 130, 0.15);
  --bi-color-brand-primary-rgb: 0, 189, 130;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-dim: #1D4ED8;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-amber: rgba(238, 180, 128, 0.3);
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-primary: rgba(0, 189, 130, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(0, 189, 130, 0.15);
  --bi-glow-secondary: rgba(59, 130, 246, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-teal: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(243, 162, 87, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.45);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 189, 130, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 189, 130, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(0, 189, 130, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(0, 189, 130, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(59, 130, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-teal: 0 0 20px rgba(16, 185, 129, 0.15);
  --bi-shadow-glow-warning: 0 0 20px rgba(243, 162, 87, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 189, 130, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.45);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.3);

  /* motion */
  --bi-duration-dial-spin: 1.2s;
  --bi-duration-pulse: 1.5s;
  --bi-duration-ring: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-color-black-rgb: 0, 0, 0;
  --bi-color-white-rgb: 255, 255, 255;
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.75;
  --bi-leading-tight: 1.25;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(0, 189, 130, 0.3);
  --bi-ring-secondary: 0 0 0 2px rgba(59, 130, 246, 0.3);
  --bi-ring-teal: 0 0 0 2px rgba(16, 185, 129, 0.2);
  --bi-tracking-normal: 0;
  --bi-tracking-tight: -0.02em;
  --bi-tracking-wide: 0.05em;
  --bi-tracking-wider: 0.1em;

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3B82F6;
  --bi-color-feature-blue-dim: #1D4ED8;
  --bi-color-feature-danger: #EF4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #10B981;
  --bi-color-feature-orange: #F97316;
  --bi-color-feature-pink: #EC4899;
  --bi-color-feature-red: #DC2626;
  --bi-color-feature-success: #10B981;
  --bi-color-feature-success-dim: #065F46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #F3A257;
  --bi-color-feature-warning-alt: #EEB480;
  --bi-color-feature-warning-alt-rgb: 238, 180, 128;
  --bi-color-feature-warning-rgb: 243, 162, 87;

  /* text */
  --bi-color-text-dim: #465C55;
  --bi-color-text-inverse: #0B100E;
  --bi-color-text-muted: #607A72;
  --bi-color-text-primary: #E8F2ED;
  --bi-color-text-secondary: #8FA69C;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --bi-font-family-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --bi-font-heading: var(--bi-font-family-heading);
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 11px;
}

/* --- end ./palettes/palette-carbon-teal-light.css --- */


/* --- inlined from ./palettes/palette-red-cyber-tokyo-dark.css --- */
/* ============================================
   Red Cyber Tokyo — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: red-cyber-tokyo
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="red-cyber-tokyo"][data-mode="dark"], [data-palette="red-cyber-tokyo"][data-mode="dark"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0a0008;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #1a0a16;
  --bi-color-bg-elevated: #1a0f18;
  --bi-color-bg-hover: #241620;
  --bi-color-bg-input: #160e14;
  --bi-color-bg-overlay: rgba(10, 0, 8, 0.95);
  --bi-color-bg-panel: #2a1a28;
  --bi-color-bg-surface: #120a10;

  /* border */
  --bi-border-accent: 1px solid rgba(255, 45, 85, 0.2);
  --bi-border-card: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-color-border-light: rgba(255, 255, 255, 0.06);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-border-color-muted: rgba(255, 255, 255, 0.04);
  --bi-color-border-primary: rgba(255, 45, 85, 0.2);
  --bi-border-color-secondary: rgba(0, 212, 255, 0.2);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-subtle: 1px solid rgba(255, 45, 85, 0.08);

  /* brand */
  --bi-color-brand-accent: #ffd700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-cyan: #4de8ff;
  --bi-color-brand-cyan-light: #80efff;
  --bi-color-brand-primary: #ff2d55;
  --bi-color-brand-primary-bright: #ff6b8a;
  --bi-color-brand-primary-dim: #cc1a3d;
  --bi-color-brand-primary-rgb: 255, 45, 85;
  --bi-color-brand-secondary: #00d4ff;
  --bi-color-brand-secondary-dim: #0099cc;
  --bi-color-brand-secondary-rgb: 0, 212, 255;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(255, 45, 85, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(255, 45, 85, 0.15);
  --bi-glow-secondary: rgba(0, 212, 255, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 45, 85, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 45, 85, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 45, 85, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 45, 85, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(0, 212, 255, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 45, 85, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(255, 45, 85, 0.3);
  --bi-ring-secondary: 0 0 0 2px rgba(0, 212, 255, 0.3);

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3b82f6;
  --bi-color-feature-blue-dim: #1d4ed8;
  --bi-color-feature-danger: #ef4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #ef4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #22c55e;
  --bi-color-feature-orange: #f97316;
  --bi-color-feature-pink: #ec4899;
  --bi-color-feature-red: #dc2626;
  --bi-color-feature-success: #10b981;
  --bi-color-feature-success-dim: #065f46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #f59e0b;
  --bi-color-feature-warning-alt: #fbbf24;
  --bi-color-feature-warning-alt-rgb: 251, 191, 36;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #5a5260;
  --bi-color-text-inverse: #0a0008;
  --bi-color-text-muted: #78707c;
  --bi-color-text-primary: #f0f0f5;
  --bi-color-text-secondary: #a8a0b0;
}

/* --- end ./palettes/palette-red-cyber-tokyo-dark.css --- */


/* --- inlined from ./palettes/palette-red-cyber-tokyo-light.css --- */
/* ============================================
   Red Cyber Tokyo — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: red-cyber-tokyo
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="red-cyber-tokyo"][data-mode="light"], [data-palette="red-cyber-tokyo"][data-mode="light"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #0a0008;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #1a0a16;
  --bi-color-bg-elevated: #1a0f18;
  --bi-color-bg-hover: #241620;
  --bi-color-bg-input: #160e14;
  --bi-color-bg-overlay: rgba(10, 0, 8, 0.95);
  --bi-color-bg-panel: #2a1a28;
  --bi-color-bg-surface: #120a10;

  /* border */
  --bi-border-accent: 1px solid rgba(255, 45, 85, 0.2);
  --bi-border-card: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-color-border-light: rgba(255, 255, 255, 0.06);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-border-color-muted: rgba(255, 255, 255, 0.04);
  --bi-color-border-primary: rgba(255, 45, 85, 0.2);
  --bi-border-color-secondary: rgba(0, 212, 255, 0.2);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);
  --bi-border-color-success: rgba(16, 185, 129, 0.4);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-subtle: 1px solid rgba(255, 45, 85, 0.08);

  /* brand */
  --bi-color-brand-accent: #ffd700;
  --bi-color-brand-accent-rgb: 255, 215, 0;
  --bi-color-brand-cyan: #4de8ff;
  --bi-color-brand-cyan-light: #80efff;
  --bi-color-brand-primary: #ff2d55;
  --bi-color-brand-primary-bright: #ff6b8a;
  --bi-color-brand-primary-dim: #cc1a3d;
  --bi-color-brand-primary-rgb: 255, 45, 85;
  --bi-color-brand-secondary: #00d4ff;
  --bi-color-brand-secondary-dim: #0099cc;
  --bi-color-brand-secondary-rgb: 0, 212, 255;

  /* effects */
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(255, 45, 85, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(255, 45, 85, 0.15);
  --bi-glow-secondary: rgba(0, 212, 255, 0.4);
  --bi-glow-success: rgba(16, 185, 129, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 45, 85, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 45, 85, 0.08);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 45, 85, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 45, 85, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(0, 212, 255, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.2);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 45, 85, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* motion */
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(255, 45, 85, 0.3);
  --bi-ring-secondary: 0 0 0 2px rgba(0, 212, 255, 0.3);

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3b82f6;
  --bi-color-feature-blue-dim: #1d4ed8;
  --bi-color-feature-danger: #ef4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #ef4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #22c55e;
  --bi-color-feature-orange: #f97316;
  --bi-color-feature-pink: #ec4899;
  --bi-color-feature-red: #dc2626;
  --bi-color-feature-success: #10b981;
  --bi-color-feature-success-dim: #065f46;
  --bi-color-feature-success-rgb: 16, 185, 129;
  --bi-color-feature-warning: #f59e0b;
  --bi-color-feature-warning-alt: #fbbf24;
  --bi-color-feature-warning-alt-rgb: 251, 191, 36;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #5a5260;
  --bi-color-text-inverse: #0a0008;
  --bi-color-text-muted: #78707c;
  --bi-color-text-primary: #f0f0f5;
  --bi-color-text-secondary: #a8a0b0;
}

/* --- end ./palettes/palette-red-cyber-tokyo-light.css --- */


/* --- inlined from ./palettes/palette-deep-gold-dark.css --- */
/* ============================================
   Deep Gold — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: deep-gold
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="deep-gold"][data-mode="dark"], [data-palette="deep-gold"][data-mode="dark"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #1D1E1A;
  --bi-color-bg-base-rgb: 29, 30, 26;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #121212;
  --bi-color-bg-elevated: #171717;
  --bi-color-bg-hover: #262626;
  --bi-color-bg-input: #141414;
  --bi-color-bg-overlay: rgba(29, 30, 26, 0.95);
  --bi-color-bg-panel: #2A2A2A;
  --bi-color-bg-surface: #1F1F1F;
  --bi-syntax-bg-elevated: #161b22;
  --bi-syntax-bg-muted: #21262d;

  /* border */
  --bi-border-accent: 1px solid rgba(255, 215, 0, 0.2);
  --bi-border-card: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-border-color-error-strong: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.06);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-color-border-primary: rgba(255, 215, 0, 0.2);
  --bi-border-color-primary-strong: rgba(255, 215, 0, 0.4);
  --bi-border-color-secondary: rgba(59, 130, 246, 0.2);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);
  --bi-border-color-success: rgba(34, 197, 94, 0.4);
  --bi-border-color-success-muted: rgba(34, 197, 94, 0.15);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-color-warning-strong: rgba(245, 158, 11, 0.4);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --bi-syntax-border-hover: #484f58;

  /* brand */
  --bi-color-brand-accent: #A855F7;
  --bi-color-brand-accent-rgb: 168, 85, 247;
  --bi-color-brand-primary: #FFD700;
  --bi-color-brand-primary-bright: #FFE44D;
  --bi-color-brand-primary-dim: #CC9900;
  --bi-color-brand-primary-muted: rgba(255, 215, 0, 0.15);
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-purple: #a78bfa;
  --bi-color-brand-purple-light: #c49fff;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-dim: #1D4ED8;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-blue: rgba(59, 130, 246, 0.3);
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(255, 215, 0, 0.15);
  --bi-glow-secondary: rgba(59, 130, 246, 0.4);
  --bi-glow-success: rgba(34, 197, 94, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 215, 0, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.08);
  --bi-shadow-color-heavy: rgba(0, 0, 0, 0.4);
  --bi-shadow-color-medium: rgba(0, 0, 0, 0.2);
  --bi-shadow-color-subtle: rgba(0, 0, 0, 0.1);
  --bi-shadow-deep: 0 0 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-blue: 0 8px 25px rgba(59, 130, 246, 0.12);
  --bi-shadow-glow-gold: 0 0 10px rgba(255, 215, 0, 0.3);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(59, 130, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.2);
  --bi-shadow-glow-success-strong: 0 0 20px rgba(34, 197, 94, 0.3);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-glow-warning-strong: 0 0 40px rgba(245, 158, 11, 0.4);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-lifted: 0 8px 24px rgba(255, 215, 0, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
  --bi-transition-glow: 0.3s ease;

  /* gradient */
  --bi-color-gradient-blue-light: #79c0ff;
  --bi-color-gradient-green-light: #3fb950;
  --bi-color-gradient-orange-light: #ffa657;

  /* motion */
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-reveal: 0.15s;
  --bi-motion-reveal-slow: 1s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-color-black-rgb: 0, 0, 0;
  --bi-color-tool-cyan: #06b6d4;
  --bi-color-tool-gray: #6b7280;
  --bi-color-tool-gray-rgb: 107, 114, 128;
  --bi-color-tool-pink: #ec4899;
  --bi-color-tool-purple: #8b5cf6;
  --bi-color-tool-purple-rgb: 139, 92, 246;
  --bi-color-tool-shell-green: #16a34a;
  --bi-color-tool-slate: #64748b;
  --bi-color-tool-teal: #14b8a6;
  --bi-color-tool-yellow: #eab308;
  --bi-color-tool-yellow-rgb: 234, 179, 8;
  --bi-color-warning: var(--bi-color-feature-warning);
  --bi-color-white-rgb: 255, 255, 255;
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.75;
  --bi-leading-tight: 1.25;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(255, 215, 0, 0.3);
  --bi-ring-pulse: 0 0 0 6px rgba(255, 215, 0, 0);
  --bi-ring-pulse-error: 0 0 0 6px rgba(239, 68, 68, 0);
  --bi-ring-secondary: 0 0 0 2px rgba(59, 130, 246, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);
  --bi-syntax-added: #3fb950;
  --bi-syntax-bg: #0d1117;
  --bi-syntax-border: #30363d;
  --bi-syntax-comment: #8b949e;
  --bi-syntax-keyword: #60a5fa;
  --bi-syntax-link: #58a6ff;
  --bi-syntax-purple: #a78bfa;
  --bi-syntax-purple-deep: #a371f7;
  --bi-syntax-removed: #f85149;
  --bi-syntax-text: #c9d1d9;
  --bi-syntax-warning: #d29922;
  --bi-table-border: rgba(255, 255, 255, 0.1);
  --bi-tracking-normal: 0;
  --bi-tracking-tight: -0.02em;
  --bi-tracking-wide: 0.05em;
  --bi-tracking-wider: 0.1em;

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3b82f6;
  --bi-color-feature-blue-dim: #1d4ed8;
  --bi-color-feature-danger: #ef4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #22c55e;
  --bi-color-feature-indigo: #6366f1;
  --bi-color-feature-indigo-rgb: 99, 102, 241;
  --bi-color-feature-orange: #f97316;
  --bi-color-feature-pink: #ec4899;
  --bi-color-feature-red: #dc2626;
  --bi-color-feature-red-dim: #b91c1c;
  --bi-color-feature-success: #22C55E;
  --bi-color-feature-success-dim: #065f46;
  --bi-color-feature-success-rgb: 34, 197, 94;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-alt: #fbbf24;
  --bi-color-feature-warning-alt-rgb: 251, 191, 36;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #525252;
  --bi-color-text-inverse: #1D1E1A;
  --bi-color-text-muted: #737373;
  --bi-color-text-primary: #FAFAFA;
  --bi-color-text-secondary: #A3A3A3;
  --bi-text-2xl: 20px;
  --bi-text-2xs: 9px;
  --bi-text-3xl: 24px;
  --bi-text-3xs: 8px;
  --bi-text-5xl: 48px;
  --bi-text-lg: 16px;
  --bi-text-md: 14px;
  --bi-text-sm: 12px;
  --bi-text-xs: 11px;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --bi-font-heading: 'Space Grotesk', system-ui, sans-serif;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 11px;

  /* Phase A of Plan 03 (2026-06-20) : cogs --dg-* SSOT reconciliation. */
  /* --- Cogs SSOT overrides (12 divergent values fixed) --- */
  --bi-color-border-subtle: var(--bi-syntax-border-hover);
  --bi-text-2xl: var(--bi-font-2xl);
  --bi-text-3xl: var(--bi-font-3xl);
  --bi-text-5xl: var(--bi-font-5xl);
  --bi-text-lg: var(--bi-font-lg);
  --bi-text-md: var(--bi-font-md);
  --bi-text-sm: var(--bi-font-sm);
  --bi-text-xs: var(--bi-font-xs);
  /* --- New tokens (79 missing in SDK) --- */
  --bi-bg-elevated: var(--bi-color-bg-elevated);
  --bi-bg-secondary: var(--bi-color-bg-surface);
  --bi-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-border-color-light: rgba(255, 255, 255, 0.06);
  --bi-border-color-medium: rgba(255, 255, 255, 0.1);
  --bi-border-color-primary: rgba(255, 215, 0, 0.2);
  --bi-border-color-strong: rgba(255, 255, 255, 0.15);
  --bi-border-color-subtle: rgba(255, 255, 255, 0.04);
  --bi-breakpoint-compact: 900px;
  --bi-breakpoint-mobile: 768px;
  --bi-breakpoint-tablet: 1100px;
  --bi-color-accent: var(--bi-color-brand-accent);
  --bi-color-accent-rgb: var(--bi-color-brand-accent-rgb);
  --bi-color-bg: var(--bi-color-bg-base);
  --bi-color-bg-error: rgba(239, 68, 68, 0.12);
  --bi-color-bg-primary: var(--bi-color-bg-base);
  --bi-color-bg-secondary: var(--bi-color-bg-surface);
  --bi-color-bg-warning: rgba(245, 158, 11, 0.12);
  --bi-color-border: var(--bi-syntax-border);
  --bi-color-border-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-warning: rgba(245, 158, 11, 0.4);
  --bi-color-error: var(--bi-color-feature-error);
  --bi-color-feature-danger-on: #FFFFFF;
  --bi-color-feature-error-alt: #e53e3e;
  --bi-color-feature-error-light: #fc8181;
  --bi-color-feature-purple: var(--bi-color-brand-purple);
  --bi-color-feature-success-button: #238636;
  --bi-color-feature-success-button-hover: #2ea043;
  --bi-color-feature-success-hover: #34D27A;
  --bi-color-gold-dark: #d4a017;
  --bi-color-red-dark: #c53030;
  --bi-color-red-darker: #9b2c2c;
  --bi-color-syntax-text-light: #e6edf3;
  --bi-color-terminal-border: #262626;
  --bi-color-terminal-error: #EF4444;
  --bi-color-terminal-output: #22C55E;
  --bi-color-terminal-prompt: #FFD700;
  --bi-color-text: var(--bi-color-text-primary);
  --bi-color-text-on-accent: #FFFFFF;
  --bi-color-text-tertiary: var(--bi-color-text-dim);
  --bi-command-console-height: 200px;
  --bi-content-max-width: 1400px;
  --bi-content-padding: 24px;
  --bi-font-xxs: 10px;
  --bi-header-height: 56px;
  --bi-radius-md-lg: 10px;
  --bi-radius-pill: 9999px;
  --bi-shadow-glow-gold-soft: 0 0 20px rgba(255, 215, 0, 0.15);
  --bi-shadow-glow-gold-strong: 0 0 30px rgba(255, 215, 0, 0.25);
  --bi-shadow-left-deep: -8px 0 32px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg-dark: 0 8px 24px rgba(0, 0, 0, 0.4);
  --bi-shadow-md-dark: 0 4px 12px rgba(0, 0, 0, 0.4);
  --bi-shadow-md-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
  --bi-shadow-modal-flat: 0 16px 32px rgba(0, 0, 0, 0.4);
  --bi-shadow-playlist-glow-soft: 0 0 12px 0 rgba(255, 215, 0, 0.12);
  --bi-shadow-playlist-glow-tick: 0 0 14px 0 rgba(255, 215, 0, 0.18);
  --bi-shadow-playlist-glow-tick-inset: 0 0 14px 0 rgba(255, 215, 0, 0.18) inset;
  --bi-shadow-playlist-glow-tick-warm: 0 0 10px 0 rgba(255, 184, 77, 0.18);
  --bi-shadow-playlist-popover-top: 0 -8px 32px 0 rgba(0, 0, 0, 0.5);
  --bi-shadow-press-play-hover: 0 0 30px rgba(255, 215, 0, 0.25);
  --bi-shadow-press-play-rest: 0 0 20px rgba(255, 215, 0, 0.15);
  --bi-shadow-xl-deep: 0 8px 32px rgba(0, 0, 0, 0.5);
  --bi-sidebar-width: var(--bi-sidebar-width-expanded);
  --bi-sidebar-width-collapsed: 56px;
  --bi-sidebar-width-expanded: 240px;
  --bi-space-indent-nested: 22px;
  --bi-z-base: 0;
  --bi-z-debug: 9000;
  --bi-z-dropdown: 100;
  --bi-z-fixed: 300;
  --bi-z-modal: 1200;
  --bi-z-overlay: 1000;
  --bi-z-popover: 1300;
  --bi-z-sticky: 200;
  --bi-z-toast: 1500;
  --bi-z-tooltip: 1400;

}

/* --- end ./palettes/palette-deep-gold-dark.css --- */


/* --- inlined from ./palettes/palette-deep-gold-light.css --- */
/* ============================================
   Deep Gold — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: deep-gold
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="deep-gold"][data-mode="light"], [data-palette="deep-gold"][data-mode="light"] {
  /* background */
  --bi-color-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-color-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-color-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-color-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-color-bg-base: #1D1E1A;
  --bi-color-bg-base-rgb: 29, 30, 26;
  --bi-color-bg-card: rgba(255, 255, 255, 0.02);
  --bi-color-bg-dark: #121212;
  --bi-color-bg-elevated: #171717;
  --bi-color-bg-hover: #262626;
  --bi-color-bg-input: #141414;
  --bi-color-bg-overlay: rgba(29, 30, 26, 0.95);
  --bi-color-bg-panel: #2A2A2A;
  --bi-color-bg-surface: #1F1F1F;
  --bi-syntax-bg-elevated: #161b22;
  --bi-syntax-bg-muted: #21262d;

  /* border */
  --bi-border-accent: 1px solid rgba(255, 215, 0, 0.2);
  --bi-border-card: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-color-error: rgba(239, 68, 68, 0.3);
  --bi-border-color-error-strong: rgba(239, 68, 68, 0.4);
  --bi-color-border-light: rgba(255, 255, 255, 0.06);
  --bi-color-border-medium: rgba(255, 255, 255, 0.1);
  --bi-color-border-primary: rgba(255, 215, 0, 0.2);
  --bi-border-color-primary-strong: rgba(255, 215, 0, 0.4);
  --bi-border-color-secondary: rgba(59, 130, 246, 0.2);
  --bi-color-border-strong: rgba(255, 255, 255, 0.15);
  --bi-color-border-subtle: rgba(255, 255, 255, 0.04);
  --bi-border-color-success: rgba(34, 197, 94, 0.4);
  --bi-border-color-success-muted: rgba(34, 197, 94, 0.15);
  --bi-border-color-warning: rgba(245, 158, 11, 0.3);
  --bi-border-color-warning-strong: rgba(245, 158, 11, 0.4);
  --bi-border-muted: 1px solid rgba(255, 255, 255, 0.06);
  --bi-border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --bi-syntax-border-hover: #484f58;

  /* brand */
  --bi-color-brand-accent: #A855F7;
  --bi-color-brand-accent-rgb: 168, 85, 247;
  --bi-color-brand-primary: #FFD700;
  --bi-color-brand-primary-bright: #FFE44D;
  --bi-color-brand-primary-dim: #CC9900;
  --bi-color-brand-primary-muted: rgba(255, 215, 0, 0.15);
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-purple: #a78bfa;
  --bi-color-brand-purple-light: #c49fff;
  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-dim: #1D4ED8;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);
  --bi-color-brand-secondary-rgb: 59, 130, 246;

  /* effects */
  --bi-glow-blue: rgba(59, 130, 246, 0.3);
  --bi-glow-error: rgba(239, 68, 68, 0.3);
  --bi-glow-gold: rgba(255, 215, 0, 0.3);
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: 0 4px 20px rgba(255, 215, 0, 0.15);
  --bi-glow-secondary: rgba(59, 130, 246, 0.4);
  --bi-glow-success: rgba(34, 197, 94, 0.3);
  --bi-glow-warning: rgba(245, 158, 11, 0.3);
  --bi-shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-card-active: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 215, 0, 0.12);
  --bi-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.08);
  --bi-shadow-color-heavy: rgba(0, 0, 0, 0.4);
  --bi-shadow-color-medium: rgba(0, 0, 0, 0.2);
  --bi-shadow-color-subtle: rgba(0, 0, 0, 0.1);
  --bi-shadow-deep: 0 0 40px rgba(0, 0, 0, 0.5);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-blue: 0 8px 25px rgba(59, 130, 246, 0.12);
  --bi-shadow-glow-gold: 0 0 10px rgba(255, 215, 0, 0.3);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
  --bi-shadow-glow-secondary: 0 0 20px rgba(59, 130, 246, 0.2);
  --bi-shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.2);
  --bi-shadow-glow-success-strong: 0 0 20px rgba(34, 197, 94, 0.3);
  --bi-shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.2);
  --bi-shadow-glow-warning-strong: 0 0 40px rgba(245, 158, 11, 0.4);
  --bi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --bi-shadow-lifted: 0 8px 24px rgba(255, 215, 0, 0.25);
  --bi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --bi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.05);
  --bi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
  --bi-shadow-toast: 0 10px 40px rgba(0, 0, 0, 0.4);
  --bi-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
  --bi-transition-glow: 0.3s ease;

  /* gradient */
  --bi-color-gradient-blue-light: #79c0ff;
  --bi-color-gradient-green-light: #3fb950;
  --bi-color-gradient-orange-light: #ffa657;

  /* motion */
  --bi-duration-pulse: 2s;
  --bi-duration-shimmer: 2s;
  --bi-duration-spin: 1s;
  --bi-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --bi-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --bi-easing-in-out: ease-in-out;
  --bi-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --bi-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bi-motion-fade: 0.5s;
  --bi-motion-fast: 0.15s;
  --bi-motion-instant: 0.1s;
  --bi-motion-normal: 0.25s;
  --bi-motion-reveal: 0.15s;
  --bi-motion-reveal-slow: 1s;
  --bi-motion-slow: 0.4s;
  --bi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --bi-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* other */
  --bi-blur-lg: 24px;
  --bi-blur-md: 16px;
  --bi-blur-sm: 8px;
  --bi-color-black-rgb: 0, 0, 0;
  --bi-color-tool-cyan: #06b6d4;
  --bi-color-tool-gray: #6b7280;
  --bi-color-tool-gray-rgb: 107, 114, 128;
  --bi-color-tool-pink: #ec4899;
  --bi-color-tool-purple: #8b5cf6;
  --bi-color-tool-purple-rgb: 139, 92, 246;
  --bi-color-tool-shell-green: #16a34a;
  --bi-color-tool-slate: #64748b;
  --bi-color-tool-teal: #14b8a6;
  --bi-color-tool-yellow: #eab308;
  --bi-color-tool-yellow-rgb: 234, 179, 8;
  --bi-color-warning: var(--bi-color-feature-warning);
  --bi-color-white-rgb: 255, 255, 255;
  --bi-leading-normal: 1.5;
  --bi-leading-relaxed: 1.75;
  --bi-leading-tight: 1.25;
  --bi-ring-error: 0 0 0 2px rgba(239, 68, 68, 0.3);
  --bi-ring-primary: 0 0 0 2px rgba(255, 215, 0, 0.3);
  --bi-ring-pulse: 0 0 0 6px rgba(255, 215, 0, 0);
  --bi-ring-pulse-error: 0 0 0 6px rgba(239, 68, 68, 0);
  --bi-ring-secondary: 0 0 0 2px rgba(59, 130, 246, 0.3);
  --bi-ring-warning: 0 0 0 2px rgba(245, 158, 11, 0.2);
  --bi-syntax-added: #3fb950;
  --bi-syntax-bg: #0d1117;
  --bi-syntax-border: #30363d;
  --bi-syntax-comment: #8b949e;
  --bi-syntax-keyword: #60a5fa;
  --bi-syntax-link: #58a6ff;
  --bi-syntax-purple: #a78bfa;
  --bi-syntax-purple-deep: #a371f7;
  --bi-syntax-removed: #f85149;
  --bi-syntax-text: #c9d1d9;
  --bi-syntax-warning: #d29922;
  --bi-table-border: rgba(255, 255, 255, 0.1);
  --bi-tracking-normal: 0;
  --bi-tracking-tight: -0.02em;
  --bi-tracking-wide: 0.05em;
  --bi-tracking-wider: 0.1em;

  /* spacing */
  --bi-radius-2xl: 16px;
  --bi-radius-full: 9999px;
  --bi-radius-lg: 8px;
  --bi-radius-md: 6px;
  --bi-radius-sm: 4px;
  --bi-radius-xl: 12px;
  --bi-space-1: 2px;
  --bi-space-10: 64px;
  --bi-space-11: 80px;
  --bi-space-12: 96px;
  --bi-space-2: 4px;
  --bi-space-3: 8px;
  --bi-space-4: 12px;
  --bi-space-5: 16px;
  --bi-space-6: 20px;
  --bi-space-7: 24px;
  --bi-space-8: 32px;
  --bi-space-9: 48px;

  /* status */
  --bi-color-feature-blue: #3b82f6;
  --bi-color-feature-blue-dim: #1d4ed8;
  --bi-color-feature-danger: #ef4444;
  --bi-color-feature-danger-rgb: 239, 68, 68;
  --bi-color-feature-error: #EF4444;
  --bi-color-feature-error-rgb: 239, 68, 68;
  --bi-color-feature-green: #22c55e;
  --bi-color-feature-indigo: #6366f1;
  --bi-color-feature-indigo-rgb: 99, 102, 241;
  --bi-color-feature-orange: #f97316;
  --bi-color-feature-pink: #ec4899;
  --bi-color-feature-red: #dc2626;
  --bi-color-feature-red-dim: #b91c1c;
  --bi-color-feature-success: #22C55E;
  --bi-color-feature-success-dim: #065f46;
  --bi-color-feature-success-rgb: 34, 197, 94;
  --bi-color-feature-warning: #F59E0B;
  --bi-color-feature-warning-alt: #fbbf24;
  --bi-color-feature-warning-alt-rgb: 251, 191, 36;
  --bi-color-feature-warning-rgb: 245, 158, 11;

  /* text */
  --bi-color-text-dim: #525252;
  --bi-color-text-inverse: #1D1E1A;
  --bi-color-text-muted: #737373;
  --bi-color-text-primary: #FAFAFA;
  --bi-color-text-secondary: #A3A3A3;
  --bi-text-2xl: 20px;
  --bi-text-2xs: 9px;
  --bi-text-3xl: 24px;
  --bi-text-3xs: 8px;
  --bi-text-5xl: 48px;
  --bi-text-lg: 16px;
  --bi-text-md: 14px;
  --bi-text-sm: 12px;
  --bi-text-xs: 11px;

  /* typography */
  --bi-font-2xl: 20px;
  --bi-font-3xl: 24px;
  --bi-font-4xl: 32px;
  --bi-font-5xl: 48px;
  --bi-font-base: 13px;
  --bi-font-body: var(--bi-font-family-base);
  --bi-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --bi-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --bi-font-heading: 'Space Grotesk', system-ui, sans-serif;
  --bi-font-lg: 16px;
  --bi-font-md: 14px;
  --bi-font-mono: var(--bi-font-family-mono);
  --bi-font-sm: 12px;
  --bi-font-weight-bold: 700;
  --bi-font-weight-light: 300;
  --bi-font-weight-medium: 500;
  --bi-font-weight-normal: 400;
  --bi-font-weight-semibold: 600;
  --bi-font-xl: 18px;
  --bi-font-xs: 11px;

  /* Phase A of Plan 03 (2026-06-20) : cogs --dg-* SSOT reconciliation. */
  /* --- Cogs SSOT overrides (12 divergent values fixed) --- */
  --bi-color-border-subtle: var(--bi-syntax-border-hover);
  --bi-text-2xl: var(--bi-font-2xl);
  --bi-text-3xl: var(--bi-font-3xl);
  --bi-text-5xl: var(--bi-font-5xl);
  --bi-text-lg: var(--bi-font-lg);
  --bi-text-md: var(--bi-font-md);
  --bi-text-sm: var(--bi-font-sm);
  --bi-text-xs: var(--bi-font-xs);
  /* --- New tokens (79 missing in SDK) --- */
  --bi-bg-elevated: var(--bi-color-bg-elevated);
  --bi-bg-secondary: var(--bi-color-bg-surface);
  --bi-bg-white-light: rgba(255, 255, 255, 0.04);
  --bi-bg-white-medium: rgba(255, 255, 255, 0.08);
  --bi-bg-white-strong: rgba(255, 255, 255, 0.12);
  --bi-bg-white-subtle: rgba(255, 255, 255, 0.02);
  --bi-border-color-light: rgba(255, 255, 255, 0.06);
  --bi-border-color-medium: rgba(255, 255, 255, 0.1);
  --bi-border-color-primary: rgba(255, 215, 0, 0.2);
  --bi-border-color-strong: rgba(255, 255, 255, 0.15);
  --bi-border-color-subtle: rgba(255, 255, 255, 0.04);
  --bi-breakpoint-compact: 900px;
  --bi-breakpoint-mobile: 768px;
  --bi-breakpoint-tablet: 1100px;
  --bi-color-accent: var(--bi-color-brand-accent);
  --bi-color-accent-rgb: var(--bi-color-brand-accent-rgb);
  --bi-color-bg: var(--bi-color-bg-base);
  --bi-color-bg-error: rgba(239, 68, 68, 0.12);
  --bi-color-bg-primary: var(--bi-color-bg-base);
  --bi-color-bg-secondary: var(--bi-color-bg-surface);
  --bi-color-bg-warning: rgba(245, 158, 11, 0.12);
  --bi-color-border: var(--bi-syntax-border);
  --bi-color-border-error: rgba(239, 68, 68, 0.4);
  --bi-color-border-warning: rgba(245, 158, 11, 0.4);
  --bi-color-error: var(--bi-color-feature-error);
  --bi-color-feature-danger-on: #FFFFFF;
  --bi-color-feature-error-alt: #e53e3e;
  --bi-color-feature-error-light: #fc8181;
  --bi-color-feature-purple: var(--bi-color-brand-purple);
  --bi-color-feature-success-button: #238636;
  --bi-color-feature-success-button-hover: #2ea043;
  --bi-color-feature-success-hover: #34D27A;
  --bi-color-gold-dark: #d4a017;
  --bi-color-red-dark: #c53030;
  --bi-color-red-darker: #9b2c2c;
  --bi-color-syntax-text-light: #e6edf3;
  --bi-color-terminal-border: #262626;
  --bi-color-terminal-error: #EF4444;
  --bi-color-terminal-output: #22C55E;
  --bi-color-terminal-prompt: #FFD700;
  --bi-color-text: var(--bi-color-text-primary);
  --bi-color-text-on-accent: #FFFFFF;
  --bi-color-text-tertiary: var(--bi-color-text-dim);
  --bi-command-console-height: 200px;
  --bi-content-max-width: 1400px;
  --bi-content-padding: 24px;
  --bi-font-xxs: 10px;
  --bi-header-height: 56px;
  --bi-radius-md-lg: 10px;
  --bi-radius-pill: 9999px;
  --bi-shadow-glow-gold-soft: 0 0 20px rgba(255, 215, 0, 0.15);
  --bi-shadow-glow-gold-strong: 0 0 30px rgba(255, 215, 0, 0.25);
  --bi-shadow-left-deep: -8px 0 32px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg-dark: 0 8px 24px rgba(0, 0, 0, 0.4);
  --bi-shadow-md-dark: 0 4px 12px rgba(0, 0, 0, 0.4);
  --bi-shadow-md-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
  --bi-shadow-modal-flat: 0 16px 32px rgba(0, 0, 0, 0.4);
  --bi-shadow-playlist-glow-soft: 0 0 12px 0 rgba(255, 215, 0, 0.12);
  --bi-shadow-playlist-glow-tick: 0 0 14px 0 rgba(255, 215, 0, 0.18);
  --bi-shadow-playlist-glow-tick-inset: 0 0 14px 0 rgba(255, 215, 0, 0.18) inset;
  --bi-shadow-playlist-glow-tick-warm: 0 0 10px 0 rgba(255, 184, 77, 0.18);
  --bi-shadow-playlist-popover-top: 0 -8px 32px 0 rgba(0, 0, 0, 0.5);
  --bi-shadow-press-play-hover: 0 0 30px rgba(255, 215, 0, 0.25);
  --bi-shadow-press-play-rest: 0 0 20px rgba(255, 215, 0, 0.15);
  --bi-shadow-xl-deep: 0 8px 32px rgba(0, 0, 0, 0.5);
  --bi-sidebar-width: var(--bi-sidebar-width-expanded);
  --bi-sidebar-width-collapsed: 56px;
  --bi-sidebar-width-expanded: 240px;
  --bi-space-indent-nested: 22px;
  --bi-z-base: 0;
  --bi-z-debug: 9000;
  --bi-z-dropdown: 100;
  --bi-z-fixed: 300;
  --bi-z-modal: 1200;
  --bi-z-overlay: 1000;
  --bi-z-popover: 1300;
  --bi-z-sticky: 200;
  --bi-z-toast: 1500;
  --bi-z-tooltip: 1400;

}

/* --- end ./palettes/palette-deep-gold-light.css --- */


/* --- inlined from ./palettes/palette-gold-storm-dark.css --- */
/* ============================================
   Gold Storm — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: gold-storm
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="gold-storm"][data-mode="dark"], [data-palette="gold-storm"][data-mode="dark"] {
  /* background */
  --bi-color-bg-base: #0A0A0A;
  --bi-color-bg-elevated: #171717;
  --bi-color-bg-surface: #1F1F1F;

  /* border */
  --bi-color-border-default: #262626;
  --bi-color-border-subtle: #1F1F1F;

  /* brand */
  --bi-color-brand-primary:     #FFD700;
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-primary-bright: #FFED4A;
  --bi-color-brand-primary-dim: #B8960A;

  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);

  /* effects */
  --bi-effect-hover-glow: 0 0 12px 2px rgba(255, 255, 255, 0.08);

  /* interaction */
  --bi-effect-focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.2);
  --bi-effect-hover-bg: rgba(255, 255, 255, 0.05);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-slow: 1.5s;

  /* other */
  --bi-color-accent: #FFD700;
  --bi-color-accent-muted: rgba(255, 215, 0, 0.15);
  --bi-effect-radius: 0.625rem;

  /* spacing */
  --bi-effect-radius-sm: 3px;

  /* status */
  --bi-color-status-error: #EF4444;
  --bi-color-status-info: #3B82F6;
  --bi-color-status-success: #22C55E;
  --bi-color-status-warning: #F59E0B;

  /* text */
  --bi-color-text-muted: #737373;
  --bi-color-text-primary: #FAFAFA;
  --bi-color-text-secondary: #A3A3A3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: rgba(255, 215, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- end ./palettes/palette-gold-storm-dark.css --- */


/* --- inlined from ./palettes/palette-gold-storm-light.css --- */
/* ============================================
   Gold Storm — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: gold-storm
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="gold-storm"][data-mode="light"], [data-palette="gold-storm"][data-mode="light"] {
  /* background */
  --bi-color-bg-base: #0A0A0A;
  --bi-color-bg-elevated: #171717;
  --bi-color-bg-surface: #1F1F1F;

  /* border */
  --bi-color-border-default: #262626;
  --bi-color-border-subtle: #1F1F1F;

  /* brand */
  --bi-color-brand-primary:     #FFD700;
  --bi-color-brand-primary-rgb: 255, 215, 0;
  --bi-color-brand-primary-bright: #FFED4A;
  --bi-color-brand-primary-dim: #B8960A;

  --bi-color-brand-secondary: #3B82F6;
  --bi-color-brand-secondary-bright: #60A5FA;
  --bi-color-brand-secondary-muted: rgba(59, 130, 246, 0.15);

  /* effects */
  --bi-effect-hover-glow: 0 0 12px 2px rgba(255, 255, 255, 0.08);

  /* interaction */
  --bi-effect-focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.2);
  --bi-effect-hover-bg: rgba(255, 255, 255, 0.05);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-slow: 1.5s;

  /* other */
  --bi-color-accent: #FFD700;
  --bi-color-accent-muted: rgba(255, 215, 0, 0.15);
  --bi-effect-radius: 0.625rem;

  /* spacing */
  --bi-effect-radius-sm: 3px;

  /* status */
  --bi-color-status-error: #EF4444;
  --bi-color-status-info: #3B82F6;
  --bi-color-status-success: #22C55E;
  --bi-color-status-warning: #F59E0B;

  /* text */
  --bi-color-text-muted: #737373;
  --bi-color-text-primary: #FAFAFA;
  --bi-color-text-secondary: #A3A3A3;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary: rgba(255, 215, 0, 0.4);
  --bi-glow-primary-subtle: rgba(255, 215, 0, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(255, 215, 0, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- end ./palettes/palette-gold-storm-light.css --- */


/* --- inlined from ./palettes/palette-wondergrip-dark.css --- */
/* ============================================
   WonderGrip — DARK mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: wondergrip
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="wondergrip"][data-mode="dark"], [data-palette="wondergrip"][data-mode="dark"] {
  /* background */
  --bi-color-bg-base: #0F1114;
  --bi-color-bg-elevated: #1A1D23;
  --bi-color-bg-surface: #242830;

  /* border */
  --bi-color-border-default: #2D3139;
  --bi-color-border-subtle: #242830;

  /* brand */
  --bi-color-brand-primary:     #DC2626;
  --bi-color-brand-primary-rgb: 220, 38, 38;
  --bi-color-brand-primary-bright: #EF4444;
  --bi-color-brand-primary-dim: #991B1B;

  --bi-color-brand-secondary: #1E40AF;
  --bi-color-brand-secondary-bright: #3B82F6;
  --bi-color-brand-secondary-muted: rgba(30, 64, 175, 0.15);

  /* effects */
  --bi-effect-hover-glow: 0 0 12px 2px rgba(220, 38, 38, 0.12);

  /* interaction */
  --bi-effect-focus-ring: 0 0 0 2px rgba(220, 38, 38, 0.3);
  --bi-effect-hover-bg: rgba(255, 255, 255, 0.05);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-slow: 1.5s;

  /* other */
  --bi-color-accent: #DC2626;
  --bi-color-accent-muted: rgba(220, 38, 38, 0.15);
  --bi-effect-radius: 0.625rem;

  /* spacing */
  --bi-effect-radius-sm: 3px;

  /* status */
  --bi-color-status-error: #EF4444;
  --bi-color-status-info: #3B82F6;
  --bi-color-status-success: #22C55E;
  --bi-color-status-warning: #F59E0B;

  /* text */
  --bi-color-text-muted: #6B7280;
  --bi-color-text-primary: #F0F2F5;
  --bi-color-text-secondary: #9CA3AF;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary: rgba(220, 38, 38, 0.4);
  --bi-glow-primary-subtle: rgba(220, 38, 38, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(220, 38, 38, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(220, 38, 38, 0.4);
}

/* --- end ./palettes/palette-wondergrip-dark.css --- */


/* --- inlined from ./palettes/palette-wondergrip-light.css --- */
/* ============================================
   WonderGrip — LIGHT mode
   Generated by enrich_bi_canonical.py (Plan 02).
   Source packs: wondergrip
   Pixel-perfect : values extracted from source packs at 2026-05-11.
   ============================================ */

html[data-palette="wondergrip"][data-mode="light"], [data-palette="wondergrip"][data-mode="light"] {
  /* background */
  --bi-color-bg-base: #0F1114;
  --bi-color-bg-elevated: #1A1D23;
  --bi-color-bg-surface: #242830;

  /* border */
  --bi-color-border-default: #2D3139;
  --bi-color-border-subtle: #242830;

  /* brand */
  --bi-color-brand-primary:     #DC2626;
  --bi-color-brand-primary-rgb: 220, 38, 38;
  --bi-color-brand-primary-bright: #EF4444;
  --bi-color-brand-primary-dim: #991B1B;

  --bi-color-brand-secondary: #1E40AF;
  --bi-color-brand-secondary-bright: #3B82F6;
  --bi-color-brand-secondary-muted: rgba(30, 64, 175, 0.15);

  /* effects */
  --bi-effect-hover-glow: 0 0 12px 2px rgba(220, 38, 38, 0.12);

  /* interaction */
  --bi-effect-focus-ring: 0 0 0 2px rgba(220, 38, 38, 0.3);
  --bi-effect-hover-bg: rgba(255, 255, 255, 0.05);

  /* motion */
  --bi-duration-fast: 0.2s;
  --bi-duration-normal: 0.3s;
  --bi-duration-pulse: 2s;
  --bi-duration-slow: 1.5s;

  /* other */
  --bi-color-accent: #DC2626;
  --bi-color-accent-muted: rgba(220, 38, 38, 0.15);
  --bi-effect-radius: 0.625rem;

  /* spacing */
  --bi-effect-radius-sm: 3px;

  /* status */
  --bi-color-status-error: #EF4444;
  --bi-color-status-info: #3B82F6;
  --bi-color-status-success: #22C55E;
  --bi-color-status-warning: #F59E0B;

  /* text */
  --bi-color-text-muted: #6B7280;
  --bi-color-text-primary: #F0F2F5;
  --bi-color-text-secondary: #9CA3AF;

  /* Plan 15 injection — splash-critical vars derived from brand-primary */
  --bi-glow-primary: rgba(220, 38, 38, 0.4);
  --bi-glow-primary-subtle: rgba(220, 38, 38, 0.15);
  --bi-shadow-glow: 0 0 20px var(--bi-glow-primary);
  --bi-shadow-glow-primary: 0 0 20px rgba(220, 38, 38, 0.2);
  --bi-shadow-glow-primary-strong: 0 0 20px rgba(220, 38, 38, 0.4);
}

/* --- end ./palettes/palette-wondergrip-light.css --- */

/* Fonts (4 stacks scoped by data-font + 1 default for apps without
   data-font set). Each fonts-*.css self-registers its fonts via Google
   Fonts @import so consumer apps don't need next/font or manual <link>
   tags — works in Next.js (with or without next/font), Vite, Astro,
   plain HTML. */

/* --- inlined from ./fonts/fonts-space-grotesk.css --- */
/* Space Grotesk font module — scoped by html[data-font="space-grotesk"].
   Self-registers fonts via Google Fonts so consumer apps don't need
   next/font or manual <link> tags. Works in Next.js (with or without
   next/font), Vite, Astro, plain HTML.

   If a consumer already uses next/font and sets --font-space-grotesk
   at runtime, the var(--font-space-grotesk) fallback chain wins (zero
   conflict). */
html[data-font="space-grotesk"] {
  --bi-font-heading: var(--font-space-grotesk, 'Space Grotesk'), 'Inter', system-ui, sans-serif;
  --bi-font-body:    var(--font-inter, 'Inter'), system-ui, sans-serif;
  --bi-font-mono:    var(--font-jetbrains-mono, 'JetBrains Mono'), 'Fira Code', ui-monospace, monospace;
}

/* --- end ./fonts/fonts-space-grotesk.css --- */


/* --- inlined from ./fonts/fonts-dm-sans.css --- */
/* DM Sans font module — scoped by html[data-font="dm-sans"].
   Self-registers fonts via Google Fonts so consumer apps don't need
   next/font or manual <link> tags. */
html[data-font="dm-sans"] {
  --bi-font-heading: var(--font-dm-sans, 'DM Sans'), system-ui, sans-serif;
  --bi-font-body:    var(--font-ibm-plex-sans, 'IBM Plex Sans'), system-ui, sans-serif;
  --bi-font-mono:    var(--font-fira-code, 'Fira Code'), ui-monospace, monospace;
}

/* --- end ./fonts/fonts-dm-sans.css --- */


/* --- inlined from ./fonts/fonts-montserrat.css --- */
/* Montserrat font module — scoped by html[data-font="montserrat"].
   Self-registers fonts via Google Fonts so consumer apps don't need
   next/font or manual <link> tags. */
html[data-font="montserrat"] {
  --bi-font-heading: var(--font-montserrat, 'Montserrat'), system-ui, sans-serif;
  --bi-font-body:    var(--font-inter, 'Inter'), system-ui, sans-serif;
  --bi-font-mono:    var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace;
}

/* --- end ./fonts/fonts-montserrat.css --- */


/* --- inlined from ./fonts/fonts-plus-jakarta.css --- */
/* Plus Jakarta Sans font module — scoped by html[data-font="plus-jakarta"].
   Self-registers fonts via Google Fonts so consumer apps don't need
   next/font or manual <link> tags. */
html[data-font="plus-jakarta"] {
  --bi-font-heading: var(--font-plus-jakarta-sans, 'Plus Jakarta Sans'), system-ui, sans-serif;
  --bi-font-body:    var(--font-inter, 'Inter'), system-ui, sans-serif;
  --bi-font-mono:    var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace;
}

/* --- end ./fonts/fonts-plus-jakarta.css --- */


/* --- inlined from ./fonts/_default.css --- */
/* Default font module — applies WHEN html has no `data-font` attribute.
   Acts as a safety net so apps that don't set `data-font` still get
   palette-aware fonts (instead of falling through to browser's default
   Times serif).

   Order matters : this file is @import-ed AFTER the data-font-scoped
   modules ; the :not([data-font]) selector means it only kicks in
   when no data-font attribute is set. Apps that do set data-font
   override these declarations cleanly via the more-specific selector. */
html:not([data-font]) {
  --bi-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bi-font-body:    'Inter', system-ui, sans-serif;
  --bi-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* --- end ./fonts/_default.css --- */

/* Layer 2 — neutral aliases */

/* --- inlined from ./aliases.css --- */
/* ==========================================================
   Aliases — Short semantic names for branding tokens
   Layer 2 of the 3-layer token architecture.
   Foundation (--bi-*) → Aliases (--bg-*, --text-*, --brand) → Framework bridge (shadcn/Tailwind)
   Components use these or the framework bridge, never --bi-* directly.
   ========================================================== */

:root {
  /* ── Backgrounds ──────────────────────────────────────── */
  --bg-base:      var(--bi-color-bg-base);
  --bg-surface:   var(--bi-color-bg-surface);
  --bg-elevated:  var(--bi-color-bg-elevated);
  --bg-sidebar:   var(--bi-color-bg-sidebar);
  --bg-hover:     var(--bi-color-bg-hover);
  --bg-active:    var(--bi-color-bg-active);
  --bg-input:     var(--bi-color-bg-input);

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:   var(--bi-color-text-primary);
  --text-secondary: var(--bi-color-text-secondary);
  --text-muted:     var(--bi-color-text-muted);
  --text-inverse:   var(--bi-color-text-inverse);

  /* ── Borders ──────────────────────────────────────────── */
  --border-default: var(--bi-color-border-default);
  --border-subtle:  var(--bi-color-border-subtle);
  --border-strong:  var(--bi-color-border-strong);

  /* ── Brand (foundation alias) ─────────────────────────── */
  /* Named --brand-* to avoid collision with shadcn's --accent (which means muted bg). */
  --brand:               var(--bi-color-brand-primary);
  --brand-rgb:           var(--bi-color-brand-primary-rgb);

  /* ── Semantic color roles (Layer 2) ───────────────────── */
  /* Comparison: prior period series, alternate filter states, secondary CTA. */
  --accent-comparison:      var(--bi-color-brand-secondary);
  --accent-comparison-rgb:  var(--bi-color-brand-secondary-rgb);
  --glow-comparison:        0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);

  /* Featured: premium/beta/new badges, callout data points, hierarchical accent. */
  --accent-featured:        var(--bi-color-brand-tertiary);
  --accent-featured-rgb:    var(--bi-color-brand-tertiary-rgb);
  --glow-featured:          0 0 12px rgba(var(--bi-color-brand-tertiary-rgb), 0.15);

  /* Interactive secondary: filter group "active but not this", outline-secondary buttons. */
  --interactive-secondary:  var(--bi-color-brand-secondary);

  /* ── Status ───────────────────────────────────────────── */
  --status-success: var(--bi-color-status-success);
  --status-success-rgb: var(--bi-color-status-success-rgb);
  --status-warning: var(--bi-color-status-warning);
  --status-warning-rgb: var(--bi-color-status-warning-rgb);
  --status-error:   var(--bi-color-status-error);
  --status-error-rgb: var(--bi-color-status-error-rgb);
  --status-info:    var(--bi-color-status-info);
  --status-info-rgb: var(--bi-color-status-info-rgb);

  /* ── Interactions ─────────────────────────────────────── */
  --hover-glow:    var(--bi-glow-brand);
  --focus-ring:    0 0 0 2px var(--bg-base), 0 0 0 4px var(--brand);
  --shadow-card:   var(--bi-shadow-card);
  --shadow-hover:  var(--bi-shadow-card-hover);

  /* ── Layer 2 generic shadows + borders + gradients (2026-05-13 migrate-to-tpb-sdk-branding-pack) ─
     These vars were referenced by app component CSS deleted during palette-unification migration.
     They are now defined globally here (palette-agnostic, Layer 2 aliases) so any restored app
     component CSS resolves them. */
  --bi-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --bi-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --bi-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --bi-shadow-xl:  0 12px 32px rgba(0, 0, 0, 0.6);
  --bi-border-card:    1px solid var(--border-subtle);
  --bi-border-subtle:  1px solid var(--border-subtle);
  --bi-border-color-error:   var(--feature-error);
  --bi-border-color-warning: var(--feature-warning);
  --bi-border-color-success: var(--feature-success);
  --gradient-shimmer:     linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  --gradient-header-tint: linear-gradient(90deg, rgba(var(--brand-rgb), 0.05) 0%, transparent 60%);
  --gradient-glossy:      linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.015) 100%);

  /* ── Layer 2 typography weights ─────────────────────────── */
  --bi-font-weight-medium:   500;
  --bi-font-weight-semibold: 600;
  --bi-font-weight-bold:     700;

  /* ── Motion ───────────────────────────────────────────── */
  --duration-fast:   var(--bi-duration-fast);
  --duration-normal: var(--bi-duration-normal);
  --duration-slow:   var(--bi-duration-slow);

/* ── Brand variants (Layer 2 extensions added by Plan 02 — superset for cross-pack tokens) ── */
  --brand-primary-bright: var(--bi-color-brand-primary-bright);
  --brand-primary-dim: var(--bi-color-brand-primary-dim);
  --brand-primary-rgb: var(--bi-color-brand-primary-rgb);
  --brand-primary-muted: var(--bi-color-brand-primary-muted);
  --brand-secondary: var(--bi-color-brand-secondary);
  --brand-secondary-rgb: var(--bi-color-brand-secondary-rgb);
  --brand-secondary-bright: var(--bi-color-brand-secondary-bright);
  --brand-secondary-muted: var(--bi-color-brand-secondary-muted);
  --brand-accent: var(--bi-color-brand-accent);
  --brand-accent-rgb: var(--bi-color-brand-accent-rgb);

/* ── Backgrounds extended ── */
  --bg-hover: var(--bi-color-bg-hover);
  --bg-input: var(--bi-color-bg-input);
  --bg-muted: var(--bi-color-bg-muted);
  --bg-active: var(--bi-color-bg-active);
  /* --bg-code : no palette ships --bi-color-bg-code primitive ; map to
     --bi-color-bg-elevated which every palette ships (semantic: darker
     than base for code blocks). */
  --bg-code: var(--bi-color-bg-elevated);
  --bg-overlay: var(--bi-color-bg-overlay);
  --bg-card: var(--bi-color-bg-card);
  --bg-panel: var(--bi-color-bg-panel);
  --bg-dark: var(--bi-color-bg-dark);

/* ── White overlays ── */
/* Primitives live under --bi-bg-white-* (no "color-" infix) in all 26
   palette files. Earlier alias version used --bi-color-bg-white-* which
   didn't match any palette declaration → silent chain orphan. */
  --bg-white-light: var(--bi-color-bg-white-light);
  --bg-white-medium: var(--bi-color-bg-white-medium);
  --bg-white-strong: var(--bi-color-bg-white-strong);
  --bg-white-subtle: var(--bi-color-bg-white-subtle);

/* ── Text variants ── */
/* --text-tertiary : no palette ships --bi-color-text-tertiary primitive ;
   semantic "third level text emphasis" maps to --bi-color-text-dim
   (the dimmest variant every palette ships). */
  --text-tertiary: var(--bi-color-text-dim);
  --text-dim: var(--bi-color-text-dim);
  --text-inverse: var(--bi-color-text-inverse);

/* ── Border scale numérique ── */
/* Palette primitives are named --bi-border-color-{light,medium,strong,
   primary} (color-as-infix). The earlier alias used --bi-color-border-*
   which didn't exist in any palette file → silent chain orphan. */
  --border-light:   var(--bi-color-border-light);
  --border-medium:  var(--bi-color-border-medium);
  --border-strong:  var(--bi-color-border-strong);
  --border-primary: var(--bi-color-border-primary);

/* ── Feature/status extended ── */
  --status-danger: var(--bi-color-status-danger);
  --feature-success: var(--bi-color-feature-success);
  --feature-warning: var(--bi-color-feature-warning);
  --feature-error: var(--bi-color-feature-error);
  --feature-info: var(--bi-color-feature-info);
  --feature-danger: var(--bi-color-feature-danger);

/* ── Shadows extended ── */
  --shadow-md: var(--bi-shadow-md);
  --shadow-lg: var(--bi-shadow-lg);
  --shadow-glow: var(--bi-shadow-glow);
  --shadow-glow-primary: var(--bi-shadow-glow-primary);
  --shadow-glow-primary-strong: var(--bi-shadow-glow-primary-strong);
  --shadow-glow-secondary: var(--bi-shadow-glow-secondary);
  --shadow-glow-success: var(--bi-shadow-glow-success);
  --shadow-modal: var(--bi-shadow-modal);
  --shadow-recording: var(--bi-shadow-recording);
  --shadow-recording-intense: var(--bi-shadow-recording-intense);
  --shadow-elevation: var(--bi-shadow-elevation);
  --shadow-text-glow: var(--bi-shadow-text-glow);

/* ── Glows ── */
  --glow-primary: var(--bi-glow-primary);
  --glow-primary-subtle: var(--bi-glow-primary-subtle);
  --glow-secondary: var(--bi-glow-secondary);
  --glow-teal: var(--bi-glow-teal);
  /* `--accent-*` semantically means the brand-secondary highlight tint
     (formerly tried to back via --bi-accent-* primitives that no palette
     actually shipped → silent chain orphan in every consumer app). Re-
     wired to the brand-secondary palette tokens which every palette
     ships. */
  --accent-rgb:  var(--bi-color-brand-secondary-rgb);
  --accent-glow: 0 0 12px rgba(var(--bi-color-brand-secondary-rgb), 0.15);

/* ── Motion extended ── */
  --transition-fast: var(--bi-transition-fast);
  --transition-normal: var(--bi-transition-normal);
  --transition-slow: var(--bi-transition-slow);
  --motion-shimmer: var(--bi-duration-shimmer);

/* ── Gradient ── */
  --gradient-header: var(--bi-gradient-header);

/* ── Font-family aliases (Layer 2 — consumers use these, not --bi-font-family-*).
   3-level fallback chain to survive partial palette/data-font config :
   1. `--bi-font-family-*` (palette-scoped — 2/13 palettes ship it for now)
   2. `--bi-font-*` (data-font scoped — set by fonts/fonts-{name}.css when
      `html[data-font]` is set)
   3. literal stack (works without any palette/data-font config at all) */
  --font-heading: var(--bi-font-family-heading, var(--bi-font-heading, "Space Grotesk", "Inter", system-ui, sans-serif));
  --font-body:    var(--bi-font-family-body,    var(--bi-font-body,    "Inter", system-ui, sans-serif));
  --font-mono:    var(--bi-font-family-mono,    var(--bi-font-mono,    "JetBrains Mono", ui-monospace, monospace));

/* ── Type scale aliases (Layer 2 — consumers use these, not --bi-text-*) ── */
  --text-xs:   var(--bi-text-xs);
  --text-sm:   var(--bi-text-sm);
  --text-base: var(--bi-text-base);
  --text-md:   var(--bi-text-md);
  --text-lg:   var(--bi-text-lg);
  --text-xl:   var(--bi-text-xl);
  --text-2xl:  var(--bi-text-2xl);
  --text-3xl:  var(--bi-text-3xl);
  --text-4xl:  var(--bi-text-4xl);

/* ── Spacing scale aliases (Layer 2) ── */
  --space-1:  var(--bi-spacing-1);
  --space-2:  var(--bi-spacing-2);
  --space-3:  var(--bi-spacing-3);
  --space-4:  var(--bi-spacing-4);
  --space-5:  var(--bi-spacing-5);
  --space-6:  var(--bi-spacing-6);
  --space-7:  var(--bi-spacing-7);
  --space-8:  var(--bi-spacing-8);
  --space-9:  var(--bi-spacing-9);
  --space-10: var(--bi-spacing-10);

/* ── Radius scale aliases (Layer 2) ── */
  --radius-sm:   var(--bi-radius-sm);
  --radius-md:   var(--bi-radius-md);
  --radius-lg:   var(--bi-radius-lg);
  --radius-xl:   var(--bi-radius-xl);
  --radius-2xl:  var(--bi-radius-2xl);
  --radius-full: var(--bi-radius-full);

/* ── Easing aliases (Layer 2) ── */
  --easing-default: var(--bi-easing-default);
  --easing-out:     var(--bi-easing-out);
  --easing-in:      var(--bi-easing-in);
  --easing-spring:  var(--bi-easing-spring);

/* ── Duration extras (instant) ── */
  --duration-instant: var(--bi-duration-instant);

/* ── Plan 02 of 2026-06-15_hitl-theme-canonicalize ───────────────────
   Promoted from tpb-approval/frontend/src/index.css per user directive
   « SDK s'imprègne de HITL pour le theming ». 6 alias Layer 2. */

  /* Brand gradient — alias for palette-aware --bi-gradient-brand. */
  --gradient-brand: linear-gradient(135deg, var(--brand), var(--brand-secondary, var(--brand)));

  /* Visible brand-tinted shimmer (≠ subtle --gradient-shimmer which uses
     4% white). Used by skeleton loaders + brand highlights. */
  --gradient-shimmer-brand: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-rgb), 0.25),
    transparent
  );

  /* Animated text shine (palette-aware) — consumed by .tpb-text-shine class. */
  --gradient-text-shine: linear-gradient(
    90deg,
    var(--text-primary),
    var(--brand-primary-bright, var(--brand)),
    var(--text-primary)
  );

  /* Atmosphere background composite — multi-layer radial palette-aware.
     Apps consume via `background: var(--gradient-atmosphere-bg, var(--bg-base))`. */
  --gradient-atmosphere-bg:
    radial-gradient(ellipse at 30% 10%, rgba(var(--brand-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(var(--brand-secondary-rgb, var(--brand-rgb)), 0.04) 0%, transparent 40%),
    var(--bg-base);

  /* Feature-color glow variants (complement existing --shadow-glow-primary
     /--shadow-glow-secondary/--shadow-glow-success). */
  --shadow-glow-success-strong: 0 0 24px rgba(var(--bi-color-feature-success-rgb, var(--brand-rgb)), 0.4);
  --shadow-glow-warning:        0 0 16px rgba(var(--bi-color-feature-warning-rgb, var(--brand-rgb)), 0.25);
}

/* ── Base document typography — APPLY the --font-body alias to the document.
   DEFINING --font-body/--font-heading above is not enough: without a rule that
   *applies* the family to `body`, every unstyled element (search placeholders,
   empty-state copy, dropdown items, …) falls back to the browser DEFAULT serif
   (Times) — the app renders half in Times. This is the single base rule every
   consumer of the theme pack relies on; an app may still override
   `body { font-family }` after importing the pack. (§ ALWAYS FAIL HARD — a
   missing base font must not silently degrade to Times.) */
body {
  font-family: var(--font-body);
}

/* --- end ./aliases.css --- */

/* Layer 3 — shadcn/Tailwind bridge (auto-applies to all consumers that
   use shadcn UI components). Maps SDK Layer 2 (--bg-*, --text-*, --brand)
   to shadcn semantic names (--background, --foreground, --card, --popover,
   --muted, --accent, --destructive, --border, --input, --ring, --sidebar-*,
   --chart-1..5). Created 2026-05-13 — skill migrate-to-tpb-sdk-branding-pack
   resolved bridge_missing entropy violations on banking-rec + accounting. */

/* --- inlined from ./shadcn-bridge.css --- */
/* ==========================================================
   Layer 3 — shadcn/Tailwind bridge
   Maps SDK Layer 2 aliases (--bg-*, --text-*, --brand, etc.)
   to the shadcn-standard semantic token names that shadcn UI
   components and Tailwind configs expect.

   Why this exists : shadcn-flavoured apps (BI, banking-rec,
   accounting, etc.) consume components like <Card>, <Popover>,
   <Sonner> that reference --background, --foreground, --card,
   --popover, --muted, etc. The SDK Layer 2 provides --bg-base,
   --text-primary, --bg-elevated — same semantics, different names.

   This bridge sits between Layer 2 (palette-aware tokens) and
   Layer 4 (shadcn UI components / Tailwind utilities).

   Audit reference 2026-05-13 : banking-reconciliation + accounting
   had 22-23 bridge_missing violations each — TW config referenced
   --accent-*, --background, --card etc. but they were undefined.
   This file fixes that class once for all apps.
   ========================================================== */

:root {
  /* ── Backgrounds ──────────────────────────────────────── */
  --background:         var(--bg-base);
  --foreground:         var(--text-primary);

  /* ── Surfaces ─────────────────────────────────────────── */
  --card:               var(--bg-surface);
  --card-foreground:    var(--text-primary);
  --popover:            var(--bg-surface);
  --popover-foreground: var(--text-primary);

  /* ── Brand / primary action ───────────────────────────── */
  --primary:            var(--brand);
  --primary-foreground: var(--text-inverse);

  /* ── Secondary surface (shadcn semantics : muted/hover) ─ */
  --secondary:          var(--bg-active);
  --secondary-foreground: var(--text-primary);
  --muted:              var(--bg-active);
  --muted-foreground:   var(--text-muted);

  /* ── Accent surface (shadcn semantics : hover/active bg, NOT brand accent) ─ */
  --accent:             var(--bg-active);
  --accent-foreground:  var(--text-primary);

  /* ── Destructive ──────────────────────────────────────── */
  --destructive:            var(--status-error);
  --destructive-foreground: var(--text-inverse);

  /* ── Borders + inputs + focus ─────────────────────────── */
  --border:             var(--border-default);
  --input:              var(--border-strong);
  --ring:               var(--brand);

  /* ── Shadcn base radius (shadcn UI multiplies this) ───── */
  --radius:             0.625rem;

  /* ── Chart slots (5 default shadcn chart vars) ────────── */
  --chart-1: var(--bi-color-chart-1);
  --chart-2: var(--bi-color-chart-2);
  --chart-3: var(--bi-color-chart-3);
  --chart-4: var(--bi-color-chart-4);
  --chart-5: var(--bi-color-chart-5);

  /* ── Sidebar (shadcn block) ───────────────────────────── */
  --sidebar:                       var(--bg-sidebar);
  --sidebar-foreground:            var(--text-primary);
  --sidebar-primary:               var(--brand);
  --sidebar-primary-foreground:    var(--text-inverse);
  --sidebar-accent:                var(--bg-active);
  --sidebar-accent-foreground:     var(--text-primary);
  --sidebar-border:                var(--border-default);
  --sidebar-ring:                  var(--brand);

  /* ── Hover background (used by banking-rec/accounting locally) ─ */
  --hover-bg:           var(--bg-hover);

  /* ── Electric accent series (banking-rec / accounting historical ;
     mapped to brand variants so they follow the active palette) ─ */
  --accent-color:           var(--brand);
  --accent-electric:        var(--brand);
  --accent-electric-bright: var(--brand-primary-bright);
  --accent-electric-muted:  var(--brand-primary-muted);
}

/* --- end ./shadcn-bridge.css --- */

/* Layer 2 — high-contrast variant */

/* --- inlined from ./high-contrast.css --- */
/* ==========================================================
   High Contrast Overlay
   Scope: html.high-contrast (on top of any branding pack)
   ========================================================== */

html.high-contrast[data-palette][data-mode] {
  --bi-color-text-muted:     var(--bi-color-text-secondary);
  --bi-color-text-secondary: var(--bi-color-text-primary);

  --bi-color-border-subtle:  var(--bi-color-border-default);
  --bi-color-border-default: var(--bi-color-border-strong);

  --bi-gradient-surface-glow: none;
  --bi-gradient-atmosphere: none;
  --bi-glow-brand: 0 0 0 transparent;
  --bi-glow-secondary: 0 0 0 transparent;
  --bi-glow-success: 0 0 0 transparent;
  --bi-glow-error: 0 0 0 transparent;
  --bi-blur-sm: 0px;
  --bi-blur-md: 0px;
  --bi-blur-lg: 0px;

  --bi-opacity-subtle: 0.12;
  --bi-opacity-light:  0.2;
  --bi-opacity-medium: 0.5;
}

/* --- end ./high-contrast.css --- */

/* TPB-effects layer */

/* --- inlined from ./effects/tpb-effects.css --- */
/* TPB Visual Effects — scoped by html[data-tpb-effects="on"]
   Toggle-able via ThemeSwitcher. All class names prefixed with tpb- to avoid collisions. */

/* ── Keyframes ──────────────────────────────────────────── */

@keyframes tpb-shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes tpb-text-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Shimmer on buttons — continuous subtle sweep ─────────── */

html[data-tpb-effects="on"] .tpb-shimmer {
  position: relative;
  overflow: hidden;
}

html[data-tpb-effects="on"] .tpb-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
  animation: tpb-shimmer-sweep var(--duration-shimmer-sweep) ease-in-out infinite;
}

html[data-tpb-effects="on"] .tpb-shimmer:hover::before {
  animation: tpb-shimmer-sweep var(--duration-shimmer-sweep-fast) ease-out infinite;
}

/* ── Halo glow on cards ─────────────────────────────────── */

html[data-tpb-effects="on"] .tpb-halo {
  transition: box-shadow 300ms ease;
}

html[data-tpb-effects="on"] .tpb-halo:hover {
  box-shadow: var(--bi-glow-brand);
}

/* ── Radial atmosphere on main background ───────────────── */
/* Gradient shape/position palette-configurable via --bi-gradient-atmosphere.
   Color stays mono (brand primary RGB) so custom brand color overrides still cascade. */

html[data-tpb-effects="on"] .tpb-atmosphere {
  background-image: var(--bi-gradient-atmosphere);
}

/* ── Linear gradient on card/table headers ──────────────── */

html[data-tpb-effects="on"] .tpb-gradient-header {
  background-image: linear-gradient(
    90deg,
    rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%,
    transparent 60%
  );
}

/* ── Glossy diagonal reflection on elevated cards ───────── */

html[data-tpb-effects="on"] .tpb-glossy {
  position: relative;
  overflow: hidden;
}

html[data-tpb-effects="on"] .tpb-glossy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.015) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Text shine on headings (manual + auto-apply on dashboard h1) ───── */
/* Single shine rule, with both the explicit `.tpb-text-shine` opt-in
   selector and the auto-applied dashboard `.tpb-atmosphere h1` selector
   sharing one declaration block. Splitting these triggered jscpd
   (Plan 13 Wave F, 2026-06-20) — semantically the same effect, one rule. */

html[data-tpb-effects="on"] .tpb-text-shine,
html[data-tpb-effects="on"] .tpb-atmosphere h1 {
  background: linear-gradient(
    90deg,
    var(--bi-color-text-primary) 0%,
    var(--bi-color-brand-primary) 50%,
    var(--bi-color-text-primary) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tpb-text-shine var(--duration-text-shine) linear infinite;
}

/* ── Auto-apply: gradient-header on table section headers ── */

html[data-tpb-effects="on"] .tpb-atmosphere [data-slot="card-header"] {
  background-image: linear-gradient(
    90deg,
    rgba(var(--bi-color-brand-primary-rgb), 0.05) 0%,
    transparent 60%
  );
}

/* ── Micro-interaction utilities (bastion pattern) ───────── */

html[data-tpb-effects="on"] .tpb-hover-scale {
  transition: transform var(--bi-transition-fast);
}
html[data-tpb-effects="on"] .tpb-hover-scale:hover {
  transform: scale(1.02);
}

html[data-tpb-effects="on"] .tpb-hover-elevation {
  transition: box-shadow var(--bi-transition-fast), transform var(--bi-transition-fast);
}
html[data-tpb-effects="on"] .tpb-hover-elevation:hover {
  box-shadow: var(--bi-shadow-card-hover);
  transform: translateY(-1px);
}

html[data-tpb-effects="on"] .tpb-active-press {
  transition: transform var(--bi-transition-fast);
}
html[data-tpb-effects="on"] .tpb-active-press:active {
  transform: scale(0.97);
}

html[data-tpb-effects="on"] .tpb-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bi-color-bg-base), 0 0 0 4px var(--bi-color-brand-primary);
}

/* ── Plan 02 of 2026-06-15_hitl-theme-canonicalize ───────────────────
   Utility classes promoted from tpb-approval/frontend/src/index.css per
   user directive « SDK s'imprègne de HITL pour le theming ». 5 classes
   + 2 keyframes. All scope-able via html[data-tpb-effects="on"]. */

/* Permanent primary glow (≠ .tpb-halo which is hover-only on cards). */
html[data-tpb-effects="on"] .tpb-glow-primary {
  box-shadow: var(--shadow-glow-primary);
}

/* Glow appearing on hover (transition + brand box-shadow). Distinct
   from .tpb-halo (= card halo hover with brand glow + transform). This
   is a pure box-shadow variant for buttons / inline elements. */
html[data-tpb-effects="on"] .tpb-hover-glow {
  transition: box-shadow var(--duration-fast, 150ms) ease,
              background-color var(--duration-fast, 150ms) ease,
              border-color var(--duration-fast, 150ms) ease;
}
html[data-tpb-effects="on"] .tpb-hover-glow:hover {
  box-shadow: var(--shadow-glow-primary);
}

/* Brand gradient text clip. */
html[data-tpb-effects="on"] .tpb-text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Skeleton shimmer (background-position translation pattern).
   ≠ .tpb-shimmer (= ::before pseudo overlay sweep on hover) and
   ≠ .tpb-text-shine (= keyframed gradient clip animation).
   This one paints a horizontally-traveling brand gradient onto an
   opaque background, idiomatic for skeleton loading rows. */
@keyframes tpb-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
html[data-tpb-effects="on"] .tpb-skeleton-shimmer {
  background-color: rgba(255, 255, 255, 0.08);
  background-image: var(--gradient-shimmer-brand);
  background-size: 200% 100%;
  animation: tpb-skeleton-shimmer var(--duration-shimmer, 2s) ease-in-out infinite;
  border-radius: var(--radius-sm, 4px);
}

/* Entry stagger animation — small fade+translate cascade for list items. */
@keyframes tpb-stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-tpb-effects="on"] .tpb-stagger-item {
  animation: tpb-stagger-in 0.3s ease-out both;
}

/* Thin scrollbar utility (webkit). Not scope-required by tpb-effects
   but listed here per canonicalization audit Plan 01. Cross-app safe. */
.tpb-scrollbar-thin::-webkit-scrollbar { width: 6px; }
.tpb-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.tpb-scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--border-medium, var(--border-default));
  border-radius: 3px;
}
.tpb-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── Heading shine for tpb-page-shine wrappers ──────────── */
/* Auto-applies a brand-tinted text gradient to every h1/h2 inside a
 * `.tpb-page-shine` container so consumers can wrap a page section
 * without forking the SDK. Mirrors `tpb-text-shine` per-element shape. */
html[data-tpb-effects="on"] .tpb-heading-shine,
html[data-tpb-effects="on"] .tpb-page-shine h1,
html[data-tpb-effects="on"] .tpb-page-shine h2 {
  background: linear-gradient(
    90deg,
    var(--text-primary, currentColor) 0%,
    var(--brand, currentColor) 50%,
    var(--text-primary, currentColor) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: tpb-text-shine var(--duration-text-shine, 6s) linear infinite;
}

/* ── CTA shimmer (sibling of tpb-shimmer, sweep-only variant) ── */
/* Brand-tinted shimmer for primary CTA buttons — applied alongside the
 * button base class so the shimmer sits inside the existing radius. */
html[data-tpb-effects="on"] .tpb-cta-shimmer {
  position: relative;
  overflow: hidden;
}
html[data-tpb-effects="on"] .tpb-cta-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  pointer-events: none;
  animation: tpb-shimmer-sweep var(--duration-shimmer-sweep, 4s) ease-in-out infinite;
}

/* ── Card surface (= halo + glossy reflection in one class) ───── */
/* Drop-in `tpb-surface` for any hand-rolled card — replaces the
 * `border + bg-card + shadow-lg` combo with a single canonical
 * branded surface (subtle border + soft shadow + glossy reflection). */
html[data-tpb-effects="on"] .tpb-surface {
  background: var(--card, var(--bg-elevated, var(--bg-surface)));
  border: 1px solid var(--border-tpb-subtle, var(--border-default));
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-card-tpb, 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
  position: relative;
}
html[data-tpb-effects="on"] .tpb-surface:hover {
  box-shadow: var(--shadow-card-tpb-hover, 0 2px 8px rgba(0, 0, 0, 0.12));
}
html[data-tpb-effects="on"] .tpb-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.015) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── ReactBits Batch A utility classes ───────────────────────
   Plan 34 of initiative 2026-06-24_tpb-lrm-app. */

/* Glass pane — backdrop-filter card surface. */
html[data-tpb-effects="on"] .tpb-glass-pane {
  background: var(--brand-glass-tint);
  backdrop-filter: blur(var(--brand-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--brand-glass-blur)) saturate(140%);
  border: 1px solid var(--brand-glass-border);
  border-radius: var(--radius-md, 0.5rem);
}

/* Violet glow halo (= identity-driving warning / energy accent). */
html[data-tpb-effects="on"] .tpb-glow-violet {
  box-shadow: var(--shadow-glow-violet);
}

/* Amber glow halo (= identity-driving CTA / energy accent). */
html[data-tpb-effects="on"] .tpb-glow-amber {
  box-shadow: var(--shadow-glow-amber);
}

/* Electric border — animated rotating conic gradient on card borders. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes tpb-electric-rotate {
  0%   { --angle: 0deg;   }
  100% { --angle: 360deg; }
}
html[data-tpb-effects="on"] .tpb-electric-border {
  position: relative;
  border-radius: inherit;
}
html[data-tpb-effects="on"] .tpb-electric-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle),
    var(--brand-electric-blue),
    var(--brand-electric-cyan),
    var(--brand-electric-violet),
    var(--brand-electric-cyan),
    var(--brand-electric-blue)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: tpb-electric-rotate var(--duration-electric-rotate, 4s) linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Card border glow — non-animated companion to .tpb-electric-border. */
html[data-tpb-effects="on"] .tpb-card-border-glow {
  position: relative;
  transition: box-shadow 240ms ease, border-color 240ms ease;
  border: 1px solid var(--border-subtle, var(--border-default));
}
html[data-tpb-effects="on"] .tpb-card-border-glow:hover {
  box-shadow: 0 0 0 1px var(--brand-electric-violet),
              0 0 32px -8px var(--brand-glow-violet);
  border-color: var(--brand-electric-violet);
}

/* ── ReactBits Batch B utility classes ──────────────────────
   Plan 35 of initiative 2026-06-24_tpb-lrm-app. */

@keyframes tpb-blinds-sweep {
  0%   { background-position:    0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes tpb-glitch-flicker {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  20%      { transform: translate(-1px, 1px); opacity: 0.85; }
  40%      { transform: translate( 1px, -1px); opacity: 0.9; }
  60%      { transform: translate(-1px, 0); opacity: 0.92; }
  80%      { transform: translate( 1px, 1px); opacity: 0.88; }
}

/* Glare hover — pointer-driven specular reflection. */
html[data-tpb-effects="on"] .tpb-glare-hover {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--duration-glare-hover, 120ms) ease;
}
html[data-tpb-effects="on"] .tpb-glare-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.18) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-glare-hover, 120ms) ease;
  z-index: 1;
}
html[data-tpb-effects="on"] .tpb-glare-hover:hover::after { opacity: 1; }

/* Glitch text — RGB-channel offset clip flicker. */
html[data-tpb-effects="on"] .tpb-glitch-text {
  position: relative;
  display: inline-block;
}
html[data-tpb-effects="on"] .tpb-glitch-text::before,
html[data-tpb-effects="on"] .tpb-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
}
html[data-tpb-effects="on"] .tpb-glitch-text::before {
  color: var(--brand-glitch-channel-red);
  animation: tpb-glitch-flicker var(--duration-glitch-flicker, 2s) infinite;
  mix-blend-mode: screen;
}
html[data-tpb-effects="on"] .tpb-glitch-text::after {
  color: var(--brand-glitch-channel-cyan);
  animation: tpb-glitch-flicker var(--duration-glitch-flicker, 2s) infinite reverse;
  mix-blend-mode: screen;
}

/* Gradient blinds — animated background sweep. */
html[data-tpb-effects="on"] .tpb-gradient-blinds {
  background: var(--gradient-blinds-base);
  background-size: 400% 100%;
  animation: tpb-blinds-sweep var(--duration-blinds-sweep, 12s) linear infinite;
}

/* Gradual blur — bottom-of-page mask + backdrop-filter blur fadeout. */
html[data-tpb-effects="on"] .tpb-gradual-blur-bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask: var(--mask-gradual-blur-bottom);
  -webkit-mask: var(--mask-gradual-blur-bottom);
  pointer-events: none;
  z-index: 2;
}

/* ── Respect prefers-reduced-motion ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html[data-tpb-effects="on"] .tpb-shimmer::before,
  html[data-tpb-effects="on"] .tpb-shimmer:hover::before {
    animation: none;
  }
  html[data-tpb-effects="on"] .tpb-text-shine,
  html[data-tpb-effects="on"] .tpb-atmosphere h1 {
    animation: none;
    background: none;
    -webkit-text-fill-color: unset;
  }
  html[data-tpb-effects="on"] .tpb-heading-shine,
  html[data-tpb-effects="on"] .tpb-page-shine h1,
  html[data-tpb-effects="on"] .tpb-page-shine h2 {
    animation: none;
    background: none;
    -webkit-text-fill-color: unset;
  }
  html[data-tpb-effects="on"] .tpb-cta-shimmer::before {
    animation: none;
    opacity: 0;
  }
  /* Plan 02 of 2026-06-15 — promoted classes also respect a11y motion. */
  html[data-tpb-effects="on"] .tpb-skeleton-shimmer,
  html[data-tpb-effects="on"] .tpb-stagger-item {
    animation: none;
  }
  html[data-tpb-effects="on"] .tpb-hover-glow {
    transition: none;
  }
  /* ReactBits Batch A — reduced motion fallbacks. */
  html[data-tpb-effects="on"] .tpb-electric-border::before {
    animation: none;
    background: linear-gradient(
      90deg,
      var(--brand-electric-blue),
      var(--brand-electric-violet)
    );
  }
  html[data-tpb-effects="on"] .tpb-card-border-glow {
    transition: none;
  }
  /* ReactBits Batch B — reduced motion fallbacks. */
  html[data-tpb-effects="on"] .tpb-gradient-blinds { animation: none; }
  html[data-tpb-effects="on"] .tpb-glitch-text::before,
  html[data-tpb-effects="on"] .tpb-glitch-text::after {
    animation: none;
    opacity: 0;
  }
}

/* --- end ./effects/tpb-effects.css --- */

/* Splash screen CSS (Plan 01 — 2026-05-13). 11 files defining the visual
   identity of `.tpb-splash-*` DOM elements injected by SDK splash JS
   (`@the-play-button/tpb-sdk-js` `initSplashScreen()`). Imports must
   happen AFTER palettes + aliases so splash CSS can consume Layer 2
   semantic aliases (--brand, --bg-base, --text-primary) and palette-
   scoped --bi-* tokens. */

/* --- inlined from ./loading/index.css --- */
/* Plan 02 fix (2026-05-13) — splash-constants MUST be imported FIRST so
   --loader-*, --duration-*, --motion-* vars are defined before consumers.
   Pre-Plan-02 BI loaded splash-constants via a separate <link> tag in
   layout.tsx, so loading/index.css never needed to import it. Post-Plan-02
   the SDK pack/index.css transitively imports loading/index.css → without
   this explicit splash-constants import, consumers (icon.css, energy-ring.css)
   resolve --loader-bolt-size to empty → width/height: 0px → energy block
   invisible (despite correct fill color). */

/* --- inlined from ./splash-constants.css --- */
/* Splash screen — animation constants (palette-independent).
   Loaded pre-React via <link> in layout.tsx after the SDK canonical pack.

   PURPOSE: provide loader geometry, duration scales, motion distances that
   the splash loading patterns (./*.css in this directory) consume. NOT
   palette-dependent — these are pure animation constants.

   PALETTE TOKENS: come from the SDK canonical pack at /branding/sdk-pack/
   (mirrored at build time from node_modules/@the-play-button/tpb-sdk-js).
   This file does NOT duplicate them — SSOT preserved. */

:root {
  --loader-size: 120px;
  --loader-ring-width: 3px;
  --loader-ring-inset: 12px;
  --loader-ring-inner-width: 2px;
  --loader-core-size: 16px;
  --loader-burst-final-size: 200px;
  --loader-bolt-size: 32px;

  --duration-slow: 400ms;
  --duration-spin: 2s;
  --duration-spin-slow: 3s;
  --duration-pulse: 2.5s;
  --duration-burst: 0.6s;
  --duration-blink: 1s;
  --duration-lightning-flicker: 2s;
  --duration-gradient-shift: 6s;
  --duration-shimmer: 2s;
  --duration-shimmer-sweep: 4s;
  --duration-shimmer-sweep-fast: 1.2s;
  --duration-shine: 3s;
  --duration-text-shine: 6s;
  --easing-linear: linear;

  --motion-scale-normal: 1;
  --motion-scale-grow: 1.05;
  --motion-scale-burst: 1.3;
  --motion-scale-lightning: 1.4;
  --motion-distance-sm: 8px;
  --motion-distance-lg: 20px;

  --splash-backdrop-blur: 20px;
}

/* --- end ./splash-constants.css --- */


/* --- inlined from ./keyframes.css --- */
/* ========================================
   TPB Splash — Keyframe Animations
   All prefixed tpb-splash-* to avoid collisions.
   Values match Golden Analytics gold theme.
   ======================================== */

@keyframes tpb-splash-spin {
  to { transform: rotate(360deg); }
}

@keyframes tpb-splash-core-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(var(--motion-scale-normal));
    opacity: 1;
    box-shadow:
      0 0 20px var(--bi-color-brand-primary),
      0 0 40px var(--bi-glow-primary),
      0 0 60px rgba(var(--bi-color-brand-primary-rgb), 0.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.9;
    box-shadow:
      0 0 30px var(--bi-color-brand-primary),
      0 0 60px var(--bi-glow-primary),
      0 0 80px rgba(var(--bi-color-brand-primary-rgb), 0.5);
  }
}

@keyframes tpb-splash-icon-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  10% { opacity: 0.3; }
  20% { opacity: 1; }
  30% { opacity: 0.5; transform: scale(var(--motion-scale-grow)); }
  40% { opacity: 1; }
  70% { opacity: 0.7; }
  80% { opacity: 1; transform: scale(0.98); }
}

@keyframes tpb-splash-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes tpb-splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tpb-splash-fade-in-up {
  from { opacity: 0; transform: translateY(var(--motion-distance-lg)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tpb-splash-fade-in-down {
  from { opacity: 0; transform: translateY(calc(var(--motion-distance-lg) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tpb-splash-fade-out-burst {
  0% {
    opacity: 1;
    transform: scale(var(--motion-scale-normal));
  }
  30% {
    opacity: 1;
    transform: scale(var(--motion-scale-burst));
    filter: drop-shadow(0 0 30px var(--bi-color-brand-primary));
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes tpb-splash-core-fade-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--motion-scale-normal));
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--motion-scale-burst));
    filter: drop-shadow(0 0 30px var(--bi-color-brand-primary));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}

@keyframes tpb-splash-burst-ring {
  0% {
    width: var(--loader-core-size);
    height: var(--loader-core-size);
    opacity: 1;
    border-width: 4px;
  }
  100% {
    width: var(--loader-burst-final-size);
    height: var(--loader-burst-final-size);
    opacity: 0;
    border-width: 1px;
  }
}

@keyframes tpb-splash-icon-burst {
  0% {
    transform: scale(var(--motion-scale-normal));
    filter: drop-shadow(0 0 8px var(--bi-glow-primary));
  }
  40% {
    transform: scale(var(--motion-scale-lightning));
    filter: drop-shadow(0 0 30px var(--bi-color-brand-primary));
  }
  100% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 15px var(--bi-glow-primary));
  }
}

@keyframes tpb-splash-btn-shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

@keyframes tpb-splash-text-shine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes tpb-splash-flash {
  0% { opacity: 0; }
  30% { opacity: 0.15; }
  100% { opacity: 0; }
}

@keyframes tpb-splash-gradient-shift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@keyframes tpb-splash-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes tpb-splash-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes tpb-splash-orbit-spin {
  to { transform: rotate(360deg); }
}

/* --- end ./keyframes.css --- */


/* --- inlined from ./container.css --- */
/* ========================================
   TPB Splash — Container
   ======================================== */

.tpb-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Top of the LayerService managed splash range (1400-1499, § LAYER SERVICE).
     Fallback 1400 covers the pre-React boot phase before the SDK global-styles
     inject --tpb-z-splash. Was a raw 9999 that escaped the ceiling (would cover
     modals/toasts if the splash stuck) — locked by entropy
     shared_theme_css_no_ceiling_escaping_zindex. */
  z-index: var(--tpb-z-splash, 1400);
  -webkit-backdrop-filter: blur(var(--splash-backdrop-blur, 0px));
  backdrop-filter: blur(var(--splash-backdrop-blur, 0px));
  background: var(--bi-gradient-splash-bg);
  transition: opacity var(--duration-slow) var(--bi-easing-default),
              visibility var(--duration-slow) var(--bi-easing-default);
}

.tpb-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- end ./container.css --- */


/* --- inlined from ./energy-ring.css --- */
/* ========================================
   TPB Splash — Energy Ring System
   Golden Analytics ring with gold accent.
   ======================================== */

.tpb-splash-energy {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  margin-bottom: var(--bi-spacing-10);
  animation: tpb-splash-fade-in-up var(--bi-duration-slow) var(--bi-easing-default) 0.3s both;
}

.tpb-splash-ring-outer {
  position: absolute;
  inset: 0;
  border: var(--loader-ring-width) solid transparent;
  border-top-color: var(--bi-color-brand-primary);
  border-right-color: var(--bi-color-brand-secondary);
  border-radius: var(--bi-radius-full);
  animation: tpb-splash-spin var(--duration-spin) var(--easing-linear) infinite;
  filter: drop-shadow(0 0 10px var(--bi-glow-primary));
}

.tpb-splash-ring-inner {
  position: absolute;
  inset: var(--loader-ring-inset);
  border: var(--loader-ring-inner-width) solid transparent;
  border-bottom-color: var(--bi-color-brand-primary-dim);
  border-left-color: var(--bi-color-brand-secondary);
  border-radius: var(--bi-radius-full);
  animation: tpb-splash-spin var(--duration-spin-slow) var(--easing-linear) infinite reverse;
  opacity: 0.6;
}

.tpb-splash-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--loader-core-size);
  height: var(--loader-core-size);
  background: var(--bi-color-brand-primary);
  border-radius: var(--bi-radius-full);
  box-shadow:
    0 0 20px var(--bi-color-brand-primary),
    0 0 40px var(--bi-glow-primary),
    0 0 60px rgba(var(--bi-color-brand-primary-rgb), 0.3);
  animation: tpb-splash-core-pulse var(--duration-pulse) var(--bi-easing-spring) infinite;
}

/* ========================================
   Ready State — Burst Animation
   ======================================== */

.tpb-splash-energy.ready .tpb-splash-ring-outer,
.tpb-splash-energy.ready .tpb-splash-ring-inner {
  animation: tpb-splash-fade-out-burst var(--duration-burst) var(--bi-easing-out) forwards;
}

.tpb-splash-energy.ready .tpb-splash-core {
  animation: tpb-splash-core-fade-out var(--duration-burst) var(--bi-easing-out) forwards;
}

.tpb-splash-energy.ready .tpb-splash-icon-svg {
  animation: tpb-splash-icon-burst var(--bi-duration-slow) var(--bi-easing-out) forwards;
}

/* Expanding halo ring */
.tpb-splash-energy.ready::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--loader-core-size);
  height: var(--loader-core-size);
  border-radius: var(--bi-radius-full);
  background: transparent;
  border: var(--loader-ring-width) solid var(--bi-color-brand-primary);
  animation: tpb-splash-burst-ring var(--duration-burst) var(--bi-easing-out) forwards;
  pointer-events: none;
}

/* ========================================
   Error State — semantic alert palette
   ----------------------------------------
   `--bi-color-status-error`   (#EF4444, red) drives the primary border edges.
   `--bi-color-status-warning` (#F59E0B, amber) drives the secondary edges.
   Prior literal `#F97316` (orange-red) was off-palette — every other splash
   surface uses tokens. The amber warning token is the canonical secondary
   alert hue across the BI theme system.
   ======================================== */

.tpb-splash.error .tpb-splash-ring-outer {
  border-top-color: var(--bi-color-status-error);
  border-right-color: var(--bi-color-status-warning);
  filter: drop-shadow(0 0 10px rgba(var(--bi-color-status-error-rgb), 0.4));
}

.tpb-splash.error .tpb-splash-ring-inner {
  border-bottom-color: var(--bi-color-status-error);
  border-left-color: var(--bi-color-status-warning);
}

.tpb-splash.error .tpb-splash-core {
  background: #EF4444;
  box-shadow:
    0 0 20px #EF4444,
    0 0 40px rgba(239, 68, 68, 0.4),
    0 0 60px rgba(239, 68, 68, 0.2);
}

/* --- end ./energy-ring.css --- */


/* --- inlined from ./icon.css --- */
/* ========================================
   TPB Splash — Center Icon
   ======================================== */

.tpb-splash-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tpb-splash-icon-svg {
  width: var(--loader-bolt-size);
  height: var(--loader-bolt-size);
  fill: var(--bi-color-brand-primary-bright);
  filter: drop-shadow(0 0 8px var(--bi-glow-primary));
  animation: tpb-splash-icon-flicker var(--duration-lightning-flicker) var(--bi-easing-spring) infinite;
}

/* Error state — red icon */
.tpb-splash.error .tpb-splash-icon-svg {
  fill: #EF4444;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
}

/* --- end ./icon.css --- */


/* --- inlined from ./brand.css --- */
/* ========================================
   TPB Splash — Brand Title
   ======================================== */

.tpb-splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--bi-spacing-10);
  animation: tpb-splash-fade-in-down var(--bi-duration-slow) var(--bi-easing-default);
}

.tpb-splash-title {
  font-family: var(--bi-font-heading, 'Space Grotesk', sans-serif);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--bi-color-text-secondary);
  letter-spacing: 0.05em;
  margin: 0;
}

.tpb-splash-accent {
  font-weight: 600;
  background: var(--bi-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: tpb-splash-gradient-shift var(--duration-gradient-shift) var(--bi-easing-default) infinite;
  filter: drop-shadow(0 0 8px var(--bi-glow-primary));
}

.tpb-splash-subtitle {
  font-family: var(--bi-font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bi-color-text-muted);
  margin-top: var(--bi-spacing-2);
}

/* --- end ./brand.css --- */


/* --- inlined from ./status.css --- */
/* ========================================
   TPB Splash — Status Text + Cursor + Substep
   ======================================== */

.tpb-splash-status {
  text-align: center;
  min-height: 60px;
  animation: tpb-splash-fade-in-up var(--bi-duration-slow) var(--bi-easing-default) 0.5s both;
}

.tpb-splash-text {
  font-family: var(--bi-font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bi-color-text-muted);
}

.tpb-splash-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--bi-color-brand-primary);
  margin-left: var(--motion-distance-sm);
  animation: tpb-splash-blink var(--duration-blink) step-end infinite;
  vertical-align: text-bottom;
}

.tpb-splash-substep {
  display: block;
  font-family: var(--bi-font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  color: var(--bi-color-text-muted);
  margin-top: var(--bi-spacing-2);
  opacity: 0;
  transition: opacity var(--bi-duration-normal) var(--bi-easing-default);
}

/* Error state — red cursor + shake */
.tpb-splash.error .tpb-splash-cursor {
  background: #EF4444;
}

.tpb-splash.error .tpb-splash-status {
  animation: tpb-splash-fade-in-up var(--bi-duration-slow) var(--bi-easing-default) 0.5s both,
             tpb-splash-shake 0.4s ease 0.6s;
}

/* --- end ./status.css --- */


/* --- inlined from ./press-play.css --- */
/* ========================================
   TPB Splash — Press Play Button
   Golden Analytics themed play button.
   ======================================== */

.tpb-splash-play {
  display: inline-flex;
  align-items: center;
  gap: var(--bi-spacing-2);
  padding: var(--bi-spacing-3) var(--bi-spacing-6);
  margin-top: var(--bi-spacing-8);
  background: transparent;
  border: 1px solid var(--bi-color-text-muted);
  border-radius: var(--bi-radius-sm);
  color: var(--bi-color-text-secondary);
  font-family: var(--bi-font-body, 'Inter', sans-serif);
  font-size: var(--bi-text-base);
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: all var(--bi-duration-normal) var(--bi-easing-default);
}

.tpb-splash-play.visible {
  opacity: 1;
  animation: tpb-splash-fade-in-up 0.4s var(--bi-easing-default);
  border-color: var(--bi-color-brand-primary);
  color: var(--bi-color-text-primary);
  background: rgba(var(--bi-color-brand-primary-rgb), var(--bi-opacity-subtle));
  box-shadow: var(--bi-glow-primary);
  position: relative;
  overflow: hidden;
}

.tpb-splash-play-icon {
  font-size: var(--bi-text-xs);
  color: var(--bi-color-brand-primary);
}

/* Shimmer sweep */
.tpb-splash-play.visible::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--bi-gradient-splash-shimmer);
  animation: tpb-splash-btn-shimmer var(--duration-shimmer) var(--bi-easing-spring) infinite;
}

/* Text gradient shine */
.tpb-splash-play.visible .tpb-splash-play-label {
  background: var(--bi-gradient-text-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tpb-splash-text-shine var(--duration-shine) var(--easing-linear) infinite;
}

/* Hover */
.tpb-splash-play.visible:hover {
  background: rgba(var(--bi-color-brand-primary-rgb), var(--bi-opacity-light));
  box-shadow: 0 0 30px var(--bi-glow-primary);
  transform: translateY(calc(var(--motion-distance-sm) * -1));
}

.tpb-splash-play:hover {
  border-color: var(--bi-color-text-secondary);
  color: var(--bi-color-text-primary);
}

/* --- end ./press-play.css --- */


/* --- inlined from ./ready-state.css --- */
/* ========================================
   TPB Splash — Flash Effect (hide transition)
   ======================================== */

.tpb-splash.flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bi-color-brand-primary);
  opacity: 0;
  animation: tpb-splash-flash var(--bi-duration-normal) var(--bi-easing-out);
  pointer-events: none;
  z-index: 1;
}

/* --- end ./ready-state.css --- */


/* --- inlined from ./retry.css --- */
/* ========================================
   TPB Splash — Retry Button
   ======================================== */

.tpb-splash-retry {
  background: transparent;
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--bi-color-brand-primary);
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: var(--bi-font-body, 'Inter', sans-serif);
  cursor: pointer;
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: background var(--bi-duration-fast) ease, border-color var(--bi-duration-fast) ease;
  animation: tpb-splash-fade-in-up var(--bi-duration-slow) ease 0.7s both;
}

.tpb-splash-retry:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.5);
}

.tpb-splash-retry::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  animation: tpb-splash-btn-shimmer var(--duration-shimmer) var(--bi-easing-spring) infinite;
}

/* --- end ./retry.css --- */

/* --- end ./loading/index.css --- */