/* SPBX theme tokens — shared across mixer, login, etc. */

html.theme-dark {
  color-scheme: dark;

  --bg-primary: #0D0D0D;
  --bg-surface: #111111;
  --bg-raised: #1A1A1A;
  --bg-inset: #0e0e0e;
  --bg-overlay: rgba(17, 17, 17, 0.55);
  --bg-drop: rgba(13, 13, 13, 0.45);
  --bg-drop-inner: rgba(8, 8, 8, 0.45);
  --bg-nav-backdrop: rgba(13, 13, 13, 0.72);
  --bg-accent-soft: rgba(91, 127, 166, 0.05);
  --bg-accent-panel: rgba(91, 127, 166, 0.06);
  --bg-accent-selected: rgba(91, 127, 166, 0.1);
  --bg-accent-hover: rgba(91, 127, 166, 0.08);
  --bg-accent-fill: rgba(91, 127, 166, 0.25);
  --bg-ambient: rgba(91, 127, 166, 0.04);

  --text-primary: #F0EDE6;
  --text-secondary: #888;
  --text-tertiary: #666;
  --text-muted: #555;
  --text-faint: #444;
  --text-hint: #333;
  --text-dim: rgba(240, 237, 230, 0.38);
  --text-on-accent: #0D0D0D;
  --text-tooltip: #e0e0e0;
  --text-logout: rgba(240, 237, 230, 0.55);

  --accent-blue: #5B7FA6;
  --accent-gold: #A8874A;
  --accent-hover: #6d93b8;
  --accent-dim: rgba(91, 127, 166, 0.35);
  --accent-muted: rgba(91, 127, 166, 0.15);
  --accent-border: rgba(91, 127, 166, 0.15);
  --accent-border-strong: rgba(91, 127, 166, 0.35);
  --accent-label: rgba(91, 127, 166, 0.7);
  --accent-input-border: rgba(91, 127, 166, 0.3);

  --border: rgba(248, 248, 246, 0.08);
  --border-hover: rgba(248, 248, 246, 0.15);
  --border-subtle: #1a1a1a;
  --border-ui: #1e1e1e;
  --border-input: #333;
  --border-dash: #2a2a2a;
  --border-row: #0e0e0e;
  --border-panel: #151515;

  --trim-overlay: rgba(0, 0, 0, 0.5);
  --wave-mask: rgba(0, 0, 0, 0.72);
  --fader-mark: #555;
  --fader-cap-line: #888;
  --status-wait: #222;
  --status-ok: #4a9a5a;
  --status-err: #e05555;
  --approved: #6aaa66;
  --flagged: #c47070;
  --badge-compress-fg: #8ec8e8;
  --badge-compress-bg: #050a0e;
  --badge-compress-border: #1a3040;
  --fit-warn: #c9a050;

  --background: var(--bg-primary);
  --surface: var(--bg-surface);
  --surface-raised: var(--bg-raised);
  --accent: var(--accent-blue);
  --warm-gold: var(--accent-gold);
  --off-white: var(--text-primary);
  --dim: var(--text-dim);
  --border-strong: var(--accent-border-strong);

  --wave-bg: #050505;
  --wave-deep: #070707;
  --wave-panel: #0a0a0a;
  --tc-dot: #2a2a2a;
  --tc-text: #aaa;
  --toggle-bg: #141414;
  --toggle-knob: #2a2a2a;

  --ripple-opacity: 1;
  --ripple-stroke-1: 0.09;
  --ripple-stroke-2: 0.05;
}

html.theme-light {
  color-scheme: light;

  --bg-primary: #F8F8F6;
  --bg-surface: #FFFFFF;
  --bg-raised: #F0EFEB;
  --bg-inset: #E8E7E3;
  --bg-overlay: rgba(255, 255, 255, 0.92);
  --bg-drop: rgba(248, 248, 246, 0.92);
  --bg-drop-inner: rgba(255, 255, 255, 0.96);
  --bg-nav-backdrop: rgba(248, 248, 246, 0.82);
  --bg-accent-soft: rgba(91, 127, 166, 0.06);
  --bg-accent-panel: rgba(91, 127, 166, 0.08);
  --bg-accent-selected: rgba(91, 127, 166, 0.12);
  --bg-accent-hover: rgba(91, 127, 166, 0.1);
  --bg-accent-fill: rgba(91, 127, 166, 0.22);
  --bg-ambient: rgba(91, 127, 166, 0.14);

  --text-primary: #111111;
  --text-secondary: #555;
  --text-tertiary: #444;
  --text-muted: #666;
  --text-faint: #777;
  --text-hint: #888;
  --text-dim: rgba(17, 17, 17, 0.5);
  --text-on-accent: #F8F8F6;
  --text-tooltip: #222;
  --text-logout: #444;

  --accent-dim: rgba(91, 127, 166, 0.45);
  --accent-muted: rgba(91, 127, 166, 0.12);
  --accent-border: rgba(17, 17, 17, 0.1);
  --accent-border-strong: rgba(17, 17, 17, 0.22);
  --accent-label: rgba(91, 127, 166, 0.9);
  --accent-input-border: rgba(91, 127, 166, 0.35);

  --border: rgba(17, 17, 17, 0.1);
  --border-hover: rgba(17, 17, 17, 0.2);
  --border-subtle: rgba(17, 17, 17, 0.08);
  --border-ui: rgba(17, 17, 17, 0.12);
  --border-input: rgba(17, 17, 17, 0.2);
  --border-dash: rgba(17, 17, 17, 0.22);
  --border-row: rgba(17, 17, 17, 0.06);
  --border-panel: rgba(17, 17, 17, 0.1);

  --trim-overlay: rgba(255, 255, 255, 0.45);
  --wave-mask: rgba(255, 255, 255, 0.72);
  --fader-mark: #999;
  --fader-cap-line: #666;
  --status-wait: #bbb;
  --status-ok: #3d8a47;
  --status-err: #c45050;
  --badge-compress-fg: #3a6a88;
  --badge-compress-bg: rgba(91, 127, 166, 0.12);
  --badge-compress-border: rgba(91, 127, 166, 0.28);
  --fit-warn: #9a7a38;

  --background: var(--bg-primary);
  --surface: var(--bg-surface);
  --surface-raised: var(--bg-raised);
  --accent: var(--accent-blue);
  --warm-gold: var(--accent-gold);
  --off-white: var(--text-primary);
  --dim: var(--text-dim);
  --border-strong: var(--accent-border-strong);

  --wave-bg: #F3F2EE;
  --wave-deep: #EBEAE6;
  --wave-panel: #E4E3DF;
  --tc-dot: rgba(17, 17, 17, 0.2);
  --tc-text: #555;
  --toggle-bg: #E0DFDB;
  --toggle-knob: #999;

  --ripple-opacity: 0.75;
  --ripple-stroke-1: 0.22;
  --ripple-stroke-2: 0.12;
}

/* Default before theme-init runs */
:root {
  color-scheme: dark;
  --background: #0D0D0D;
  --bg-ambient: rgba(91, 127, 166, 0.04);
  --text-primary: #F0EDE6;
  --off-white: #F0EDE6;
  --ripple-stroke-1: 0.09;
  --ripple-stroke-2: 0.05;
}

html,
body {
  background-color: var(--background);
}

#ripple {
  opacity: var(--ripple-opacity);
}

.logo-img {
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: normal;
  filter: none;
}

/* ── Droplet backdrop ── */
.spbx-page-droplets {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.spbx-droplet {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

html.theme-dark .spbx-droplet--accent {
  width: min(70vw, 640px);
  height: min(62vh, 560px);
  top: -18%;
  right: -14%;
  background: radial-gradient(
    ellipse at 42% 48%,
    rgba(91, 127, 166, 0.38) 0%,
    rgba(91, 127, 166, 0.14) 32%,
    rgba(91, 127, 166, 0.05) 52%,
    transparent 72%
  );
  filter: blur(40px);
}

html.theme-dark .spbx-droplet--accent-2 {
  width: min(52vw, 480px);
  height: min(46vh, 420px);
  top: 32%;
  right: 6%;
  background: radial-gradient(
    ellipse at center,
    rgba(91, 127, 166, 0.22) 0%,
    rgba(91, 127, 166, 0.08) 40%,
    transparent 70%
  );
  filter: blur(48px);
}

html.theme-dark .spbx-droplet--identity {
  width: min(56vw, 520px);
  height: min(50vh, 460px);
  bottom: -20%;
  left: -16%;
  background: radial-gradient(
    ellipse at 55% 50%,
    rgba(168, 135, 74, 0.28) 0%,
    rgba(168, 135, 74, 0.1) 38%,
    transparent 72%
  );
  filter: blur(44px);
}

html.theme-light .spbx-droplet--accent {
  width: min(70vw, 640px);
  height: min(62vh, 560px);
  top: -18%;
  right: -14%;
  background: radial-gradient(
    ellipse at 42% 48%,
    rgba(91, 127, 166, 0.28) 0%,
    rgba(91, 127, 166, 0.14) 32%,
    rgba(91, 127, 166, 0.06) 52%,
    transparent 72%
  );
  filter: blur(36px);
}

html.theme-light .spbx-droplet--accent-2 {
  width: min(52vw, 480px);
  height: min(46vh, 420px);
  top: 32%;
  right: 6%;
  background: radial-gradient(
    ellipse at center,
    rgba(91, 127, 166, 0.18) 0%,
    rgba(91, 127, 166, 0.08) 40%,
    transparent 70%
  );
  filter: blur(42px);
}

html.theme-light .spbx-droplet--identity {
  width: min(56vw, 520px);
  height: min(50vh, 460px);
  bottom: -20%;
  left: -16%;
  background: radial-gradient(
    ellipse at 55% 50%,
    rgba(168, 135, 74, 0.22) 0%,
    rgba(168, 135, 74, 0.09) 38%,
    transparent 72%
  );
  filter: blur(38px);
}

/* Theme toggle icons — sun in dark mode, moon in light mode */
.theme-icon-light,
.theme-icon-dark {
  display: none;
  line-height: 1;
}

html.theme-dark .theme-icon-light {
  display: inline;
}

html.theme-light .theme-icon-dark {
  display: inline;
}

.hdr-btn-theme {
  min-width: 40px;
  padding: 5px 10px;
  font-size: 16px;
  line-height: 1;
}

/* Light-mode contrast fixes */
html.theme-light .hdr-btn-logout {
  color: var(--text-logout);
  border-color: var(--border-input);
}

html.theme-light .hdr-btn-logout:hover {
  color: var(--text-on-accent);
}

html.theme-light .sec-h,
html.theme-light .foot,
html.theme-light .sbar,
html.theme-light .tl-t,
html.theme-light .vo-lbl,
html.theme-light .vid-drop-h,
html.theme-light .vid-drop-s {
  color: var(--text-muted);
}

html.theme-light .vid-drop-icon {
  color: var(--text-hint);
}

html.theme-light .tc,
html.theme-light .blog,
html.theme-light .export-name-modal,
html.theme-light .help-modal {
  background: var(--bg-surface);
}

html.theme-light .mobile-export-hint {
  color: var(--text-muted);
  background: var(--bg-accent-panel);
  border-color: var(--border-input);
}