/* ═══════════════ THEME VARIABLES ═══════════════ */
:root {
  --color-surface: #0f172a;
  --color-card:    #1e293b;
  --color-border:  #334155;
}

html.light {
  --color-surface: #f8fafc;
  --color-card:    #ffffff;
  --color-border:  #e2e8f0;
}

/* ═══════════════ BASE ═══════════════ */
[x-cloak] { display: none !important; }
html { background: var(--color-surface); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }

.log-line { font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: 11.5px; line-height: 1.6; }
.tab-active   { background: #1e40af; color: #fff; }
.tab-inactive { color: #94a3b8; }
.tab-inactive:hover { background: #1e293b; color: #e2e8f0; }
.bar-fill { transition: width 0.6s ease; }

.tab-tooltip { pointer-events: none; }
.tab-tooltip::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: #1e293b;
  border-left: 1px solid #475569;
  border-top: 1px solid #475569;
}

/* Theme icon: sun visible in dark, moon in light */
.theme-sun  { display: block; }
.theme-moon { display: none; }
html.light .theme-sun  { display: none; }
html.light .theme-moon { display: block; }

/* ═══════════════ LIGHT THEME ═══════════════ */
html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.light ::-webkit-scrollbar-thumb { background: #94a3b8; }

html.light body { color: #1e293b; }

/* Text */
html.light .text-white     { color: #0f172a !important; }
html.light .text-slate-200 { color: #1e293b !important; }
html.light .text-slate-300 { color: #334155 !important; }
html.light .text-slate-400 { color: #475569 !important; }
html.light .text-slate-500 { color: #64748b !important; }
html.light .text-slate-600 { color: #94a3b8 !important; }
html.light .text-slate-700 { color: #cbd5e1 !important; }

/* Solid backgrounds */
html.light .bg-slate-900 { background-color: #f1f5f9 !important; }
html.light .bg-slate-800 { background-color: #f1f5f9 !important; }
html.light .bg-slate-700 { background-color: #e2e8f0 !important; }

/* Opacity-modifier backgrounds */
html.light .bg-slate-800\/50  { background-color: rgba(226,232,240,0.6) !important; }
html.light .bg-slate-800\/40  { background-color: rgba(226,232,240,0.5) !important; }
html.light .bg-slate-800\/30  { background-color: rgba(226,232,240,0.4) !important; }
html.light .bg-slate-900\/40  { background-color: rgba(241,245,249,0.8) !important; }
html.light .bg-slate-900\/60  { background-color: rgba(241,245,249,0.8) !important; }
html.light .bg-red-950\/30    { background-color: rgba(254,226,226,0.5) !important; }

/* Borders */
html.light .border-slate-700    { border-color: #e2e8f0 !important; }
html.light .border-slate-600    { border-color: #cbd5e1 !important; }
html.light .border-slate-700\/60 { border-color: rgba(203,213,225,0.7) !important; }
html.light .border-red-900\/40  { border-color: rgba(252,165,165,0.5) !important; }

/* Hover */
html.light .hover\:bg-slate-700:hover     { background-color: #e2e8f0 !important; }
html.light .hover\:bg-slate-600:hover     { background-color: #cbd5e1 !important; }
html.light .hover\:bg-slate-800\/40:hover { background-color: rgba(226,232,240,0.7) !important; }
html.light .hover\:bg-slate-800\/50:hover { background-color: rgba(226,232,240,0.7) !important; }
html.light .hover\:text-slate-200:hover   { color: #0f172a !important; }
html.light .hover\:text-slate-300:hover   { color: #1e293b !important; }

/* Tabs */
html.light .tab-inactive         { color: #475569 !important; }
html.light .tab-inactive:hover   { background: #f1f5f9 !important; color: #0f172a !important; }
html.light .tab-tooltip::before  { background: #ffffff; border-color: #e2e8f0; }

/* Audio player (no dark invert needed in light mode) */
html.light audio { filter: none !important; }