/* ═══════════════════════════════════════════════════════════════════════
   assets/themes.css — site-wide theme tokens + bridges
   Themes: dark (default) · light · gold
   Loaded AFTER every module stylesheet so overrides win.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── THEME TOKENS ──────────────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
  --th-bg:            #05010f;
  --th-bg-2:          #0b0620;
  --th-surface:       rgba(20, 12, 40, 0.72);
  --th-surface-2:     rgba(10, 5, 25, 0.9);
  --th-surface-3:     rgba(0, 0, 0, 0.35);
  --th-text:          #eaeaf5;
  --th-text-strong:   #ffffff;
  --th-muted:         #8b8ba7;
  --th-border:        rgba(168, 85, 247, 0.22);
  --th-border-strong: rgba(168, 85, 247, 0.5);
  --th-accent:        #a855f7;
  --th-accent-2:      #ff2d95;
  --th-accent-3:      #00e5ff;
  --th-link:          #67e8f9;
  --th-link-hover:    #a5f3fc;
  --th-input-bg:      rgba(0, 0, 0, 0.4);
  --th-input-border:  rgba(255, 255, 255, 0.1);
  --th-input-focus:   #00e5ff;
  --th-shadow:        0 30px 60px -40px rgba(0, 0, 0, 0.95);
  --th-glow:          rgba(168, 85, 247, 0.4);
  --th-hero-grad-1:   rgba(168, 85, 247, 0.7);
  --th-hero-grad-2:   rgba(255, 45, 149, 0.55);
  --th-hero-grad-3:   rgba(0, 229, 255, 0.55);
  --th-code-bg:       rgba(0, 0, 0, 0.55);
  --th-code-color:    #00e5ff;
}

html[data-theme="light"] {
  --th-bg:            #f5f7fb;
  --th-bg-2:          #ffffff;
  --th-surface:       #ffffff;
  --th-surface-2:     #f8fafc;
  --th-surface-3:     #eef1f8;
  --th-text:          #1f2230;
  --th-text-strong:   #0a0a18;
  --th-muted:         #5b6070;
  --th-border:        rgba(0, 0, 0, 0.10);
  --th-border-strong: rgba(124, 58, 237, 0.45);
  --th-accent:        #7c3aed;
  --th-accent-2:      #db2777;
  --th-accent-3:      #0891b2;
  --th-link:          #6d28d9;
  --th-link-hover:    #4c1d95;
  --th-input-bg:      #ffffff;
  --th-input-border:  rgba(0, 0, 0, 0.15);
  --th-input-focus:   #7c3aed;
  --th-shadow:        0 10px 30px -15px rgba(0, 0, 0, 0.15);
  --th-glow:          rgba(124, 58, 237, 0.2);
  --th-hero-grad-1:   rgba(124, 58, 237, 0.55);
  --th-hero-grad-2:   rgba(219, 39, 119, 0.4);
  --th-hero-grad-3:   rgba(8, 145, 178, 0.4);
  --th-code-bg:       #f0f2f8;
  --th-code-color:    #6d28d9;
}

html[data-theme="gold"] {
  --th-bg:            #0a0805;
  --th-bg-2:          #0f0b06;
  --th-surface:       rgba(22, 16, 8, 0.82);
  --th-surface-2:     rgba(15, 11, 6, 0.92);
  --th-surface-3:     rgba(0, 0, 0, 0.45);
  --th-text:          #f3e6c9;
  --th-text-strong:   #fff8e4;
  --th-muted:         #b8a17c;
  --th-border:        rgba(212, 175, 55, 0.28);
  --th-border-strong: rgba(212, 175, 55, 0.6);
  --th-accent:        #d4af37;
  --th-accent-2:      #f5d97a;
  --th-accent-3:      #ffedb0;
  --th-link:          #f5d97a;
  --th-link-hover:    #ffedb0;
  --th-input-bg:      rgba(12, 9, 5, 0.7);
  --th-input-border:  rgba(212, 175, 55, 0.3);
  --th-input-focus:   #d4af37;
  --th-shadow:        0 30px 60px -40px rgba(212, 175, 55, 0.15);
  --th-glow:          rgba(212, 175, 55, 0.45);
  --th-hero-grad-1:   rgba(212, 175, 55, 0.8);
  --th-hero-grad-2:   rgba(245, 217, 122, 0.55);
  --th-hero-grad-3:   rgba(255, 237, 176, 0.5);
  --th-code-bg:       rgba(10, 8, 5, 0.75);
  --th-code-color:    #f5d97a;
}

/* ─── BASE ───────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
  transition: background-color .25s ease, color .25s ease;
}
body {
  background-image:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--th-accent) 12%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% 110%, color-mix(in srgb, var(--th-accent-3) 10%, transparent), transparent 60%) !important;
  background-attachment: fixed;
}
html[data-theme="light"] body { background-image: none !important; }

h1, h2, h3, h4, h5, h6, .title, .heading { color: var(--th-text-strong) !important; }
p, li, dt, dd, label, span, small, td, th { color: var(--th-text); }
.muted, .text-muted, small.muted, .text-secondary, .subtitle { color: var(--th-muted) !important; }

a, a:visited { color: var(--th-link); }
a:hover, a:focus { color: var(--th-link-hover); }

hr { border-color: var(--th-border); }
::selection { background: var(--th-accent); color: #fff; }

/* ─── INPUTS ────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  background-color: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-input-border) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--th-input-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-input-focus) 20%, transparent) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--th-muted) !important; }

/* ─── BUTTONS ───────────────────────────────────────────────────────── */
button, .btn, .button, input[type="submit"], input[type="button"] {
  color: var(--th-text);
  background: var(--th-surface-3);
  border-color: var(--th-border);
}
button:hover:not(:disabled), .btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--th-accent) 15%, transparent);
  border-color: var(--th-border-strong);
}
.btn.primary, button.primary, .primary {
  background: linear-gradient(135deg, var(--th-accent), var(--th-accent-2)) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ─── TABLES ────────────────────────────────────────────────────────── */
table { color: var(--th-text); }
thead th {
  background: color-mix(in srgb, var(--th-accent) 12%, transparent) !important;
  color: var(--th-text-strong) !important;
}
tbody tr { border-color: var(--th-border) !important; }
tbody tr:hover { background: color-mix(in srgb, var(--th-accent) 8%, transparent) !important; }

/* ─── CODE ──────────────────────────────────────────────────────────── */
code, pre, kbd, samp {
  background: var(--th-code-bg) !important;
  color: var(--th-code-color) !important;
}

/* ─── GENERIC CONTAINERS ────────────────────────────────────────────── */
header, footer, nav, .navbar, .topbar, .header, .footer,
.sidebar, .sb, .sb-link, .admin-nav-link,
.card, .panel, .box, .well, .widget, .tile,
.modal, .modal-box, .dialog, .popover,
.dropdown-menu, .menu {
  border-color: var(--th-border);
}
.card, .panel, .modal, .modal-box, .dialog, .dropdown-menu, .sidebar {
  background-color: var(--th-surface) !important;
  color: var(--th-text) !important;
}
.sb-link, .admin-nav-link {
  color: var(--th-text) !important;
}
.sb-link:hover, .admin-nav-link:hover,
.sb-link.active, .admin-nav-link.active {
  background: color-mix(in srgb, var(--th-accent) 18%, transparent) !important;
  color: var(--th-text-strong) !important;
}

/* ─── HERO GRADIENT OVERRIDES ──────────────────────────────────────── */
html[data-theme="gold"] .sp-hero::before,
html[data-theme="gold"] .om-hero::before,
html[data-theme="gold"] .oa-hero::before,
html[data-theme="gold"] [class$="-hero"]::before,
html[data-theme="gold"] [class*="-hero "]::before {
  background: linear-gradient(135deg,
    var(--th-hero-grad-1),
    var(--th-hero-grad-2) 40%,
    var(--th-hero-grad-3) 70%,
    var(--th-hero-grad-1)) !important;
  background-size: 300% 300% !important;
}
html[data-theme="light"] .sp-hero::before,
html[data-theme="light"] .om-hero::before,
html[data-theme="light"] .oa-hero::before,
html[data-theme="light"] [class$="-hero"]::before,
html[data-theme="light"] [class*="-hero "]::before {
  background: linear-gradient(135deg,
    var(--th-hero-grad-1),
    var(--th-hero-grad-2) 40%,
    var(--th-hero-grad-3)) !important;
  background-size: 300% 300% !important;
}
html[data-theme="light"] .sp-hero,
html[data-theme="light"] .om-hero,
html[data-theme="light"] .oa-hero {
  background: linear-gradient(160deg, #ffffff, #f3f5fb 70%) !important;
  box-shadow: 0 20px 50px -30px rgba(124, 58, 237, 0.35) !important;
}
html[data-theme="gold"] .sp-hero,
html[data-theme="gold"] .om-hero,
html[data-theme="gold"] .oa-hero {
  background: linear-gradient(160deg, #14100a, #0a0805 70%) !important;
  box-shadow: 0 30px 60px -30px rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="gold"] .sp-hero h1,
html[data-theme="gold"] .om-hero h1,
html[data-theme="gold"] .oa-hero h1 {
  background: linear-gradient(90deg, #fff8e4, var(--th-accent) 55%, #ffedb0) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
html[data-theme="light"] .sp-hero h1,
html[data-theme="light"] .om-hero h1,
html[data-theme="light"] .oa-hero h1 {
  background: linear-gradient(90deg, #0a0a18, var(--th-accent) 55%, var(--th-accent-2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}

/* ─── SPEECH STUDIO BRIDGE ──────────────────────────────────────────── */
html[data-theme="light"] .sp-card,
html[data-theme="light"] .sp-live-card,
html[data-theme="light"] .sp-tabs,
html[data-theme="light"] .sp-lib-card,
html[data-theme="light"] .sp-modal-box {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
html[data-theme="light"] .sp-transcript,
html[data-theme="light"] .sp-transcript-view,
html[data-theme="light"] .sp-stats,
html[data-theme="light"] .sp-dropzone {
  background: var(--th-surface-3) !important;
  color: var(--th-text) !important;
}
html[data-theme="gold"] .sp-tab.active {
  background: linear-gradient(135deg, var(--th-accent), #b8931f) !important;
  color: #0a0805 !important;
}
html[data-theme="gold"] .sp-btn.primary {
  background: linear-gradient(135deg, var(--th-accent), #b8931f) !important;
  color: #0a0805 !important;
  box-shadow: 0 10px 22px -12px rgba(212, 175, 55, 0.9) !important;
}
html[data-theme="light"] .sp-btn.primary {
  background: linear-gradient(135deg, var(--th-accent), var(--th-accent-2)) !important;
  color: #fff !important;
}

/* ─── OFFLINE MESSENGER BRIDGE ──────────────────────────────────────── */
html[data-theme="light"] .om-card,
html[data-theme="light"] .om-status-card,
html[data-theme="light"] .om-modal-box {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
html[data-theme="light"] .om-transcript,
html[data-theme="light"] .om-queue-item,
html[data-theme="light"] .om-msg,
html[data-theme="light"] .om-qr-container {
  background: var(--th-surface-3) !important;
  color: var(--th-text) !important;
}
html[data-theme="gold"] .om-btn.primary {
  background: linear-gradient(135deg, var(--th-accent), #b8931f) !important;
  color: #0a0805 !important;
}
html[data-theme="gold"] .om-scan-frame {
  border-color: var(--th-accent) !important;
  box-shadow: 0 0 30px color-mix(in srgb, var(--th-accent) 45%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME SWITCHER — compact floating widget
   ═══════════════════════════════════════════════════════════════════════ */
.theme-switcher {
  position: fixed;
  left: .75rem;
  bottom: .75rem;
  z-index: 2147483600;
  font-family: system-ui, sans-serif;
}
.theme-switcher-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--th-surface);
  border: 1px solid var(--th-border-strong);
  color: var(--th-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .78;
  box-shadow: 0 4px 12px -6px var(--th-glow);
  transition: transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.theme-switcher-toggle:hover {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 6px 16px -6px var(--th-glow);
}
.theme-switcher-toggle .theme-icon {
  font-size: .95rem;
  line-height: 1;
}

.theme-switcher-menu {
  position: absolute;
  left: 42px;
  bottom: 4px;
  min-width: 170px;
  padding: .3rem;
  border-radius: 10px;
  background: var(--th-surface);
  border: 1px solid var(--th-border-strong);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px);
  display: none;
  animation: themeSwitcherIn .16s ease;
}
.theme-switcher.open .theme-switcher-menu { display: block; }

@keyframes themeSwitcherIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theme-pick {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4rem .6rem;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--th-text);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.theme-pick:hover {
  background: color-mix(in srgb, var(--th-accent) 18%, transparent);
}
.theme-pick.active {
  background: color-mix(in srgb, var(--th-accent) 25%, transparent);
  color: var(--th-text-strong);
}

.theme-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--th-border-strong);
  flex-shrink: 0;
}
.theme-dot-dark  { background: linear-gradient(135deg, #05010f, #a855f7); }
.theme-dot-light { background: linear-gradient(135deg, #ffffff, #7c3aed); }
.theme-dot-gold  { background: linear-gradient(135deg, #0a0805, #d4af37); }

/* ─── REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .theme-switcher-menu { animation: none; }
  body, html { transition: none; }
}

/* ─── THEME-AWARE SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--th-bg-2); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--th-accent) 40%, transparent);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--th-accent) 70%, transparent);
}