/**
 * Bari Plux — unified design tokens
 * Synced with desktop Theme.ObsidianBlack + LiquidGlass
 * Accent: ice indigo #818CF8 (app ThemeAccentBrush)
 */

:root {
  /* Surfaces — Obsidian Glass */
  --bp-bg-0: #07070c;
  --bp-bg-1: #0a0a12;
  --bp-bg-2: #101018;
  --bp-elevated: rgba(255, 255, 255, 0.10);
  --bp-elevated-2: rgba(255, 255, 255, 0.06);

  /* Glass */
  --bp-glass-fill: rgba(16, 16, 20, 0.55);
  --bp-glass-fill-strong: rgba(20, 20, 28, 0.72);
  --bp-glass-border: rgba(255, 255, 255, 0.16);
  --bp-glass-border-soft: rgba(255, 255, 255, 0.10);
  --bp-glass-highlight: rgba(255, 255, 255, 0.14);
  --bp-glass-blur: 28px;
  --bp-glass-saturate: 1.45;

  /* Accent — match WPF ThemeAccent */
  --bp-accent: #818cf8;
  --bp-accent-2: #a5b4fc;
  --bp-accent-muted: rgba(129, 140, 248, 0.16);
  --bp-accent-border: rgba(129, 140, 248, 0.42);
  --bp-accent-glow: rgba(129, 140, 248, 0.28);

  /* Text */
  --bp-text: #f5f5f7;
  --bp-text-2: #c0c0c8;
  --bp-text-3: #888896;
  --bp-text-inv: #0a0a0c;

  /* Semantic */
  --bp-ok: #34d399;
  --bp-warn: #fbbf24;
  --bp-danger: #f87171;

  /* Layout */
  --bp-radius-sm: 10px;
  --bp-radius: 16px;
  --bp-radius-lg: 22px;
  --bp-radius-xl: 28px;
  --bp-max: 1400px;
  --bp-gutter: clamp(18px, 4vw, 36px);

  /* Motion */
  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bp-dur: 280ms;
  --bp-dur-slow: 520ms;

  /* Type — match live homepage (Space Grotesk + Sora) */
  --bp-font-display: "Space Grotesk", "Sora", "Segoe UI", system-ui, sans-serif;
  --bp-font-body: "Sora", "Segoe UI", system-ui, sans-serif;
  --bp-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Live homepage token aliases (obsidian/site.css) — single source of truth */
  --void: #07070c;
  --ink: #101018;
  --text: #f5f5f7;
  --text-2: #c0c0c8;
  --text-3: #888896;
  --accent: #818cf8;
  --accent-2: #a5b4fc;
  --max: 1400px;
  --font-d: var(--bp-font-display);
  --font-b: var(--bp-font-body);
  --font-m: var(--bp-font-mono);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Viewport-relative type scale (laptop-friendly, not over-zoomed) */
  font-size: clamp(12.75px, 0.22vw + 11.6px, 15px);
}

html.bp-protect {
  -webkit-user-select: none;
  user-select: none;
}

html.bp-protect input,
html.bp-protect textarea,
html.bp-protect [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

body.bp-body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--bp-font-body);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--bp-text);
  background: var(--bp-bg-0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bp-body img,
body.bp-body svg,
body.bp-body video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--bp-accent-2);
  text-decoration: none;
  transition: color var(--bp-dur) var(--bp-ease);
}

a:hover {
  color: var(--bp-text);
}

::selection {
  background: rgba(129, 140, 248, 0.4);
  color: var(--bp-text);
}

:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   AMBIENT FIELD — shared chrome (index / Pro / 404 / any page)
   Mirror: AmbientSignalField + Theme.ObsidianBlack (#818CF8)
   Load with: bariplux.css + signal-ambient.js + empty #bp-aurora
   ═══════════════════════════════════════════════════════════════ */
.bp-aurora,
#bp-aurora,
#bp-ambient,
.bp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Glow bias: right + bottom — top-left kept quiet for logo chrome */
  background:
    radial-gradient(820px 520px at 78% -4%, rgba(129, 140, 248, 0.26), transparent 58%),
    radial-gradient(700px 480px at 52% 112%, rgba(129, 140, 248, 0.18), transparent 60%),
    radial-gradient(560px 360px at 96% 42%, rgba(165, 180, 252, 0.10), transparent 55%),
    linear-gradient(165deg, #06060b 0%, #0a0a14 46%, #07070e 100%);
}

.bp-ambient__void {
  position: absolute;
  inset: 0;
  background: transparent;
}

.bp-ambient__depth {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(129, 140, 248, 0.04) 0%, transparent 46%, rgba(0, 0, 0, 0.14) 100%),
    radial-gradient(ellipse 42% 36% at 8% 4%, rgba(4, 4, 8, 0.72), transparent 70%);
}

.bp-ambient__aurora {
  position: absolute;
  inset: -10%;
  opacity: 0.88;
  will-change: transform, opacity;
  animation: bp-aurora-parallax 34s ease-in-out infinite alternate,
             bp-aurora-breathe 14s ease-in-out infinite alternate;
}

.bp-ambient__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Washed left-mid (not under header logo) */
.bp-ambient__blob--a {
  width: min(68vw, 920px);
  height: min(40vw, 440px);
  left: -6%;
  top: 22%;
  opacity: 0.72;
  background: radial-gradient(circle at 50% 50%,
    rgba(129, 140, 248, 0.78) 0%,
    rgba(129, 140, 248, 0.32) 40%,
    transparent 72%);
  filter: blur(26px);
}

.bp-ambient__blob--b {
  width: min(58vw, 820px);
  height: min(36vw, 440px);
  right: -10%;
  top: -2%;
  opacity: 0.78;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(165, 180, 252, 0.22) 42%,
    transparent 74%);
  filter: blur(30px);
}

.bp-ambient__blob--c {
  width: min(54vw, 740px);
  height: min(42vw, 540px);
  left: 32%;
  bottom: -10%;
  opacity: 0.7;
  background: radial-gradient(circle at 50% 50%,
    rgba(129, 140, 248, 0.7) 0%,
    rgba(99, 102, 241, 0.22) 44%,
    transparent 72%);
  filter: blur(32px);
}

.bp-ambient__orbs {
  position: absolute;
  inset: -4%;
  will-change: transform;
  animation: bp-orb-parallax 26s ease-in-out infinite alternate;
}

.bp-ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.bp-ambient__orb--primary {
  width: min(55vw, 780px);
  height: min(40vw, 540px);
  right: -14%;
  top: -10%;
  opacity: 0.68;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.7) 0%, transparent 70%);
  animation: bp-orb-fade-a 10s ease-in-out infinite alternate;
}

.bp-ambient__orb--secondary {
  width: min(48vw, 640px);
  height: min(36vw, 480px);
  left: -16%;
  bottom: 4%;
  opacity: 0.46;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, transparent 70%);
  animation: bp-orb-fade-b 12s ease-in-out infinite alternate;
}

.bp-ambient__orb--core {
  width: min(34vw, 460px);
  height: min(34vw, 460px);
  left: 42%;
  top: 28%;
  opacity: 0.42;
  background: radial-gradient(circle, rgba(165, 180, 252, 0.62) 0%, transparent 68%);
  animation: bp-orb-core 15s ease-in-out infinite alternate;
}

.bp-ambient__streak {
  position: absolute;
  width: min(22vw, 300px);
  height: 5px;
  right: 10%;
  top: 22%;
  border-radius: 3px;
  opacity: 0.26;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  transform: rotate(-26deg);
  animation: bp-streak-fade 8s ease-in-out infinite alternate;
}

.bp-ambient__instrument {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  animation: bp-instrument-parallax 42s ease-in-out infinite alternate,
             bp-instrument-fade 15s ease-in-out infinite alternate;
}

.bp-ambient__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.1px solid rgba(129, 140, 248, 0.85);
  box-sizing: border-box;
}

.bp-ambient__ring--outer {
  width: min(22vw, 300px);
  height: min(22vw, 300px);
  right: 4%;
  top: 2%;
  opacity: 0.9;
}

.bp-ambient__ring--mid {
  width: min(15vw, 210px);
  height: min(15vw, 210px);
  right: calc(4% + min(3.5vw, 45px));
  top: calc(2% + min(3.5vw, 45px));
  opacity: 0.7;
  border-style: dashed;
  border-width: 1px;
  animation: bp-ring-spin 90s linear infinite;
}

.bp-ambient__ring--inner {
  width: min(9vw, 120px);
  height: min(9vw, 120px);
  right: calc(4% + min(6.5vw, 90px));
  top: calc(2% + min(6.5vw, 90px));
  opacity: 0.85;
  border-width: 1.3px;
}

.bp-ambient__constellation,
.bp-ambient canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.bp-ambient__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 92% at 50% 44%,
      transparent 52%,
      rgba(0, 0, 0, 0.2) 86%,
      rgba(0, 0, 0, 0.42) 100%),
    radial-gradient(ellipse 36% 28% at 6% 2%,
      rgba(3, 3, 6, 0.55),
      transparent 72%);
}

.bp-ambient__rim {
  /* Full-viewport border caused a visible hairline at the top of the page.
     Corner brackets on the canvas already provide the instrument chrome. */
  display: none !important;
}

.bp-ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Legacy ambient.js hooks — kept inert */
.bp-ambient__wash,
.bp-ambient__sheen,
.bp-ambient__noise { display: none; }

@keyframes bp-aurora-parallax {
  from { transform: translate3d(-22px, -6px, 0); }
  to { transform: translate3d(30px, 12px, 0); }
}
@keyframes bp-aurora-breathe {
  from { opacity: 0.74; }
  to { opacity: 0.96; }
}
@keyframes bp-orb-parallax {
  from { transform: translate3d(-16px, 8px, 0); }
  to { transform: translate3d(20px, -14px, 0); }
}
@keyframes bp-orb-fade-a {
  from { opacity: 0.5; }
  to { opacity: 0.78; }
}
@keyframes bp-orb-fade-b {
  from { opacity: 0.32; }
  to { opacity: 0.54; }
}
@keyframes bp-orb-core {
  from { opacity: 0.3; transform: scale(0.94); }
  to { opacity: 0.5; transform: scale(1.07); }
}
@keyframes bp-streak-fade {
  from { opacity: 0.12; }
  to { opacity: 0.32; }
}
@keyframes bp-instrument-parallax {
  from { transform: translate3d(-6px, 4px, 0); }
  to { transform: translate3d(10px, -6px, 0); }
}
@keyframes bp-instrument-fade {
  from { opacity: 0.14; }
  to { opacity: 0.28; }
}
@keyframes bp-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes bp-rim-fade {
  from { opacity: 0.28; }
  to { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-ambient__aurora,
  .bp-ambient__orbs,
  .bp-ambient__orb,
  .bp-ambient__orb--core,
  .bp-ambient__streak,
  .bp-ambient__instrument,
  .bp-ambient__ring--mid,
  .bp-ambient__rim {
    animation: none !important;
  }
}

@media (max-width: 719px) {
  .bp-ambient__instrument,
  .bp-ambient__streak,
  .bp-ambient__rim { display: none; }
  .bp-ambient__blob--a { top: 18%; opacity: 0.55; }
  .bp-ambient__orb--core { opacity: 0.3; }
}

/* Shared scrollbar — floating thumb, no black track (Windows Chromium safe) */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 140, 248, 0.55) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent !important;
}
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-track-piece {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: rgba(129, 140, 248, 0.5) !important;
  background-image: none !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(165, 180, 252, 0.65) !important;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}

.bp-page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
}

.bp-wrap {
  width: min(var(--bp-max), 100% - (var(--bp-gutter) * 2));
  margin-inline: auto;
}

/* ── Liquid Glass ── */
.bp-glass {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.015) 100%),
    var(--bp-glass-fill);
  backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
  -webkit-backdrop-filter: blur(var(--bp-glass-blur)) saturate(var(--bp-glass-saturate));
  border: 1px solid var(--bp-glass-border);
  border-radius: var(--bp-radius-lg);
  box-shadow:
    inset 0 1px 0 var(--bp-glass-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 18px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  isolation: isolate;
}

.bp-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%);
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.bp-glass--strong {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 100%),
    var(--bp-glass-fill-strong);
}

.bp-glass--warn {
  border-color: rgba(251, 191, 36, 0.32);
  background:
    linear-gradient(165deg, rgba(251, 191, 36, 0.10), transparent 50%),
    var(--bp-glass-fill);
}

.bp-glass--ok {
  border-color: rgba(52, 211, 153, 0.32);
  background:
    linear-gradient(165deg, rgba(52, 211, 153, 0.10), transparent 50%),
    var(--bp-glass-fill);
}

.bp-glass__body {
  position: relative;
  z-index: 1;
  padding: 22px;
}

/* ── Type ── */
.bp-brand {
  font-family: var(--bp-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-accent-2);
}

.bp-h1 {
  font-family: var(--bp-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.bp-h2 {
  font-family: var(--bp-font-display);
  font-weight: 650;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.bp-lead {
  color: var(--bp-text-2);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.bp-muted {
  color: var(--bp-text-3);
}

/* ── Controls ── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: var(--bp-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--bp-text);
  text-decoration: none;
  transition:
    transform var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    opacity var(--bp-dur) var(--bp-ease);
  will-change: transform;
}

.bp-btn:active {
  transform: scale(0.98) translateY(1px);
}

.bp-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.bp-btn--primary {
  background: linear-gradient(135deg, var(--bp-accent), #6366f1);
  box-shadow: 0 12px 32px var(--bp-accent-glow);
}

.bp-btn--primary:hover {
  box-shadow: 0 16px 40px rgba(129, 140, 248, 0.4);
  transform: translateY(-1px);
}

.bp-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bp-glass-border-soft);
}

.bp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--bp-glass-border);
}

.bp-btn--block {
  width: 100%;
}

.bp-field {
  display: block;
  font-size: 0.8rem;
  color: var(--bp-text-3);
  margin-bottom: 8px;
}

.bp-input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--bp-glass-border-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--bp-text);
  padding: 0 14px;
  font-family: var(--bp-font-body);
  font-size: 0.95rem;
  transition: border-color var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease);
}

.bp-input:focus {
  outline: none;
  border-color: var(--bp-accent-border);
  box-shadow: 0 0 0 3px var(--bp-accent-muted);
}

.bp-status {
  margin-top: 12px;
  min-height: 1.25em;
  font-size: 0.88rem;
  color: var(--bp-text-3);
}

.bp-status.is-ok { color: var(--bp-ok); }
.bp-status.is-err { color: var(--bp-danger); }

.bp-stack {
  display: grid;
  gap: 16px;
}

.bp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 18px;
}

.bp-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--bp-text-2);
  line-height: 1.55;
}

.bp-list li { margin: 6px 0; }

.bp-footer {
  margin-top: 40px;
  padding-bottom: 48px;
  color: var(--bp-text-3);
  font-size: 0.82rem;
}

/* Nav chrome: homepage uses .bp-chrome/.bp-nav from site.css.
   Do not define .bp-nav here — it fought mobile link widths (Phase 2.5). */

/* Reveal */
.bp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--bp-dur-slow) var(--bp-ease-out),
    transform var(--bp-dur-slow) var(--bp-ease-out);
}

.bp-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bp-reveal,
  .bp-btn {
    animation: none !important;
    transition: none !important;
  }
  .bp-reveal { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  /* Pro page utilities only — homepage breakpoints live in site.css */
  .bp-page .bp-wrap {
    padding-left: var(--bp-gutter);
    padding-right: var(--bp-gutter);
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — single source of truth (Phase 3.5)
   All theme color/opacity overrides live here. site.css / widgets.css
   stay theme-agnostic (structure + layout only).
   Palette: cool off-white scale + ice-indigo accent (not inverted black).
   Body text: #12131A on #F4F6FB ≈ 16:1 (WCAG AAA).
   Secondary: #3F4558 on #F4F6FB ≈ 8.2:1 (AA+).
   Muted: #5C6478 on #F4F6FB ≈ 5.6:1 (AA).
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  /* Background scale (cool gray — glass blur still reads) */
  --bp-bg-0: #f4f6fb;
  --bp-bg-1: #eef1f8;
  --bp-bg-2: #e4e9f3;
  --bp-elevated: rgba(15, 20, 40, 0.06);
  --bp-elevated-2: rgba(15, 20, 40, 0.04);

  /* Glass — higher fill opacity than dark (avoids muddy wash) */
  --bp-glass-fill: rgba(255, 255, 255, 0.72);
  --bp-glass-fill-strong: rgba(255, 255, 255, 0.88);
  --bp-glass-border: rgba(15, 20, 40, 0.12);
  --bp-glass-border-soft: rgba(15, 20, 40, 0.08);
  --bp-glass-highlight: rgba(255, 255, 255, 0.95);

  /* Accent — deeper indigo for contrast on light surfaces */
  --bp-accent: #4f46e5;
  --bp-accent-2: #6366f1;
  --bp-accent-muted: rgba(79, 70, 229, 0.14);
  --bp-accent-border: rgba(79, 70, 229, 0.35);
  --bp-accent-glow: rgba(79, 70, 229, 0.22);

  /* Text */
  --bp-text: #12131a;
  --bp-text-2: #3f4558;
  --bp-text-3: #5c6478;
  --bp-text-inv: #f4f6fb;

  /* Homepage aliases (site.css / widgets.css consume these) */
  --void: #f4f6fb;
  --ink: #eef1f8;
  --text: #12131a;
  --text-2: #3f4558;
  --text-3: #5c6478;
  --chrome-fill: rgba(255, 255, 255, 0.62);
  --chrome-border: rgba(15, 20, 40, 0.12);
  --card-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  --card-border: rgba(15, 20, 40, 0.1);
  --border-soft: rgba(15, 20, 40, 0.08);
  --sheen: rgba(255, 255, 255, 0.85);
  --accent: #4f46e5;
  --accent-2: #6366f1;
  --accent-deep: #4338ca;
  --accent-soft: rgba(79, 70, 229, 0.12);
  --accent-muted: rgba(79, 70, 229, 0.14);
  --accent-ring: rgba(79, 70, 229, 0.28);
  --accent-btn: rgba(79, 70, 229, 0.14);
  --accent-btn-hover: rgba(79, 70, 229, 0.22);
  --lg-fill: rgba(255, 255, 255, 0.72);
  --lg-fill-strong: rgba(255, 255, 255, 0.88);
  --lg-fill-nested: rgba(255, 255, 255, 0.65);
  --lg-stroke: rgba(15, 20, 40, 0.14);
  --lg-stroke-soft: rgba(15, 20, 40, 0.1);
  --lg-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 32%, transparent 60%);
  --lg-shadow: 0 12px 36px rgba(15, 20, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow: 0 12px 32px rgba(15, 20, 40, 0.1);
  --shadow-hover: 0 16px 40px rgba(15, 20, 40, 0.14);
  --glass-bg: var(--chrome-fill);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-border: var(--chrome-border);
  --glass-inner-shadow: rgba(15, 20, 40, 0.06);
  --muted: var(--text-2);
  --primary: var(--accent);
  --secondary: var(--accent-2);

  scrollbar-color: rgba(79, 70, 229, 0.4) transparent;
}

html[data-theme="light"] .bp-chrome,
[data-theme="light"] .bp-chrome {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .bp-chrome::before,
[data-theme="light"] .bp-chrome::before {
  background: linear-gradient(
    180deg,
    rgba(244, 246, 251, 0.72) 0%,
    rgba(244, 246, 251, 0.35) 48%,
    transparent 100%
  );
  backdrop-filter: blur(44px) saturate(160%);
  -webkit-backdrop-filter: blur(44px) saturate(160%);
}

html[data-theme="light"] .bp-chrome__inner,
[data-theme="light"] .bp-chrome__inner {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(255, 255, 255, 0.4) 100%),
    rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(15, 20, 40, 0.12) !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 32px rgba(15, 20, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="light"] .bp-chrome.scrolled .bp-chrome__inner,
[data-theme="light"] .bp-chrome.scrolled .bp-chrome__inner {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.5) 100%),
    rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="light"] .bp-chrome.scrolled,
[data-theme="light"] .bp-chrome.scrolled {
  background: transparent !important;
}

html[data-theme="light"] .bp-logo__text,
[data-theme="light"] .bp-logo__text {
  color: #12131a !important;
  -webkit-text-fill-color: #12131a !important;
  background: none !important;
}

/* Light-mode CTAs — soft indigo glass, not solid purple slabs */
html[data-theme="light"] .bp-btn,
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .download-btn,
html[data-theme="light"] .login-btn-header,
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .event-btn,
html[data-theme="light"] .contact-btn,
[data-theme="light"] .bp-btn,
[data-theme="light"] .btn {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(15, 20, 40, 0.12) !important;
  color: #12131a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px rgba(15, 20, 40, 0.06) !important;
}

html[data-theme="light"] .bp-btn:hover,
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .download-btn:hover,
[data-theme="light"] .bp-btn:hover,
[data-theme="light"] .btn:hover {
  background: rgba(79, 70, 229, 0.1) !important;
  border-color: rgba(79, 70, 229, 0.32) !important;
  color: #312e81 !important;
}

html[data-theme="light"] .bp-btn--glass,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-accent,
html[data-theme="light"] .download-btn,
html[data-theme="light"] .login-btn-header,
html[data-theme="light"] .unlock-btn,
[data-theme="light"] .bp-btn--glass,
[data-theme="light"] .btn-primary {
  background: rgba(79, 70, 229, 0.12) !important;
  border-color: rgba(79, 70, 229, 0.34) !important;
  color: #312e81 !important;
}

html[data-theme="light"] .bp-btn--glass:hover,
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .download-btn:hover,
html[data-theme="light"] .login-btn-header:hover,
[data-theme="light"] .bp-btn--glass:hover,
[data-theme="light"] .btn-primary:hover {
  background: rgba(79, 70, 229, 0.2) !important;
  color: #1e1b4b !important;
}

html[data-theme="light"] .bp-icon-btn,
[data-theme="light"] .bp-icon-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(15, 20, 40, 0.12) !important;
  color: #12131a !important;
}

/* Ambient field — light (same structure as AmbientSignalField, cool wash) */
html[data-theme="light"] .bp-ambient,
html[data-theme="light"] #bp-aurora,
[data-theme="light"] .bp-ambient,
[data-theme="light"] #bp-aurora {
  background:
    radial-gradient(820px 520px at 78% -4%, rgba(99, 102, 241, 0.14), transparent 58%),
    radial-gradient(700px 480px at 52% 112%, rgba(129, 140, 248, 0.10), transparent 60%),
    linear-gradient(165deg, var(--void) 0%, var(--bp-bg-1) 50%, var(--void) 100%) !important;
}
html[data-theme="light"] .bp-ambient__void {
  background: transparent !important;
}
html[data-theme="light"] .bp-ambient__depth {
  background:
    linear-gradient(135deg, rgba(15, 20, 40, 0.03) 0%, transparent 50%, rgba(15, 20, 40, 0.06) 100%),
    radial-gradient(ellipse 42% 36% at 8% 4%, rgba(244, 246, 251, 0.85), transparent 70%);
}
html[data-theme="light"] .bp-ambient__wash,
[data-theme="light"] .bp-ambient__wash {
  display: none;
}
html[data-theme="light"] .bp-ambient__blob {
  mix-blend-mode: multiply;
}
html[data-theme="light"] .bp-ambient__blob--a {
  background: radial-gradient(circle at 50% 50%,
    rgba(99, 102, 241, 0.28) 0%,
    rgba(99, 102, 241, 0.1) 42%,
    transparent 70%);
}
html[data-theme="light"] .bp-ambient__blob--b {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(165, 180, 252, 0.18) 50%,
    transparent 72%);
}
html[data-theme="light"] .bp-ambient__blob--c {
  background: radial-gradient(circle at 50% 50%,
    rgba(129, 140, 248, 0.22) 0%,
    transparent 70%);
}
html[data-theme="light"] .bp-ambient__orb {
  mix-blend-mode: multiply;
  opacity: 0.45;
}
html[data-theme="light"] .bp-ambient__orb--primary {
  background: radial-gradient(circle, rgba(79, 70, 229, 0.24) 0%, transparent 70%);
}
html[data-theme="light"] .bp-ambient__orb--secondary {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
}
html[data-theme="light"] .bp-ambient__orb--core {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 68%);
}
html[data-theme="light"] .bp-ambient__ring {
  border-color: rgba(79, 70, 229, 0.45);
}
html[data-theme="light"] .bp-ambient__rim {
  display: none !important;
}
html[data-theme="light"] .bp-ambient__vignette,
[data-theme="light"] .bp-ambient__vignette {
  background:
    radial-gradient(ellipse 90% 92% at 50% 44%,
      transparent 50%,
      rgba(244, 246, 251, 0.4) 86%,
      rgba(244, 246, 251, 0.78) 100%),
    radial-gradient(ellipse 36% 28% at 6% 2%,
      rgba(244, 246, 251, 0.7),
      transparent 72%);
}
html[data-theme="light"] .bp-ambient__grain,
[data-theme="light"] .bp-ambient__grain {
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* Theme toggle icons */
html[data-theme="light"] .bp-icon-btn .moon-icon,
html[data-theme="light"] .theme-toggle .moon-icon,
[data-theme="light"] .bp-icon-btn .moon-icon,
[data-theme="light"] .theme-toggle .moon-icon {
  display: none;
}
html[data-theme="light"] .bp-icon-btn .sun-icon,
html[data-theme="light"] .theme-toggle .sun-icon,
[data-theme="light"] .bp-icon-btn .sun-icon,
[data-theme="light"] .theme-toggle .sun-icon {
  display: inline;
}

/* Hero / brand */
html[data-theme="light"] .name-gradient {
  background: linear-gradient(135deg, #12131a 5%, #4f46e5 55%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Surfaces that still hardcode dark fills (can't be token-only) */
html[data-theme="light"] .bp-menu {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text);
}
html[data-theme="light"] .bp-search {
  background: rgba(15, 20, 40, 0.05);
  color: var(--text-3);
}
html[data-theme="light"] .bp-search__input {
  color: var(--text);
}
html[data-theme="light"] .glass::before,
html[data-theme="light"] .download-card::before,
html[data-theme="light"] .video-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 40%);
}

/* Chat widget (hardcoded dark fills in widgets/site) */
html[data-theme="light"] .chat-messages,
html[data-theme="light"] .chat-input-container {
  background: rgba(255, 255, 255, 0.45);
}
html[data-theme="light"] .message-content {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 20, 40, 0.08);
  color: var(--text);
}
html[data-theme="light"] .user-message .message-content {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.22);
}
html[data-theme="light"] #chat-input {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}

/* Rules modal */
html[data-theme="light"] .rules-container.liquid {
  background: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] .rule-card {
  background: rgba(15, 20, 40, 0.04);
  border-color: rgba(15, 20, 40, 0.08);
}

/* Scrollbar — light (track stays transparent) */
html[data-theme="light"] {
  scrollbar-color: rgba(79, 70, 229, 0.4) transparent;
}
html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] body::-webkit-scrollbar-track {
  background: transparent;
}
html[data-theme="light"]::-webkit-scrollbar-thumb {
  border-color: transparent;
  background: rgba(79, 70, 229, 0.4);
  background-clip: padding-box;
}

/* Search highlight */
html[data-theme="light"] mark.search-highlight {
  background: rgba(79, 70, 229, 0.2);
  color: #12131a;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}