/* TOTEM theme — dark default + light override.
   Activated by toggling [data-theme="light"] on <html>. */

:root {
  --totem-bg-base: #050510;
  --totem-bg-mid: #0a0a18;
  --totem-bg-top: #12122a;
  --totem-gold: #D4A843;
  --totem-gold-bright: #E8B84D;
  --totem-gold-dim: #B8860B;
  --totem-card-bg: rgba(15,15,30,0.6);
  --totem-text: rgba(255,255,255,0.92);
  --totem-text-dim: rgba(255,255,255,0.65);
  --totem-input-bg: rgba(255,255,255,0.03);
  --totem-input-border: rgba(255,255,255,0.08);
  --totem-panel-bg: rgba(15,15,30,0.7);
  --totem-heading: #D4A843;
  --totem-topbar-bg: rgba(10,10,24,0.8);
  --totem-border-soft: rgba(255,255,255,0.06);
}

[data-theme="light"] {
  --totem-bg-base: #e0d8c8;
  --totem-bg-mid: #ebe5d8;
  --totem-bg-top: #f5f0e8;
  --totem-card-bg: rgba(255,255,255,0.7);
  --totem-text: rgba(30,25,20,0.85);
  --totem-text-dim: rgba(30,25,20,0.6);
  --totem-input-bg: rgba(0,0,0,0.03);
  --totem-input-border: rgba(0,0,0,0.1);
  --totem-panel-bg: rgba(245,240,232,0.9);
  --totem-heading: #2a1a0a;
  --totem-topbar-bg: rgba(245,240,232,0.85);
  --totem-border-soft: rgba(0,0,0,0.06);
}

/* ====== LIGHT-MODE OVERRIDES ======
   These use [data-theme="light"] selectors with !important to win against
   the per-file scoped styles already in each page. Targets the visible
   structural classes used across meet/broadcast/watch/dime/apps. */

[data-theme="light"] body {
  background: radial-gradient(ellipse at top center, #f5f0e8 0%, #ebe5d8 40%, #e0d8c8 100%) !important;
  color: rgba(30,25,20,0.85) !important;
}

[data-theme="light"] body::before {
  opacity: 0.012 !important;
  mix-blend-mode: multiply !important;
}

[data-theme="light"] .topbar,
[data-theme="light"] header.topbar {
  background: rgba(245,240,232,0.85) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

[data-theme="light"] .topbar::after {
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,0.4) 50%, transparent 100%) !important;
}

[data-theme="light"] .brand .title,
[data-theme="light"] .topbar .title {
  color: #2a1a0a !important;
}

[data-theme="light"] .topbar nav a {
  color: rgba(30,25,20,0.55) !important;
}

[data-theme="light"] .topbar nav a:hover,
[data-theme="light"] .topbar nav a.active {
  color: #B8860B !important;
}

[data-theme="light"] .topbar nav a::after {
  background: #B8860B !important;
}

[data-theme="light"] .hero h1,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #2a1a0a !important;
}

[data-theme="light"] .hero .sub,
[data-theme="light"] .hero .acr,
[data-theme="light"] .sub {
  color: rgba(42,26,10,0.6) !important;
}

[data-theme="light"] .app-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .lobby-card,
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .compose,
[data-theme="light"] .inbox,
[data-theme="light"] .reader,
[data-theme="light"] .message-row,
[data-theme="light"] .row,
[data-theme="light"] section.card {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(30,25,20,0.85) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}

[data-theme="light"] .app-card:hover {
  border-color: rgba(212,168,67,0.55) !important;
  box-shadow: 0 12px 32px rgba(120,90,30,0.15), 0 0 24px rgba(212,168,67,0.18) !important;
}

[data-theme="light"] .app-name,
[data-theme="light"] .lobby-card h1,
[data-theme="light"] .lobby-card h2,
[data-theme="light"] .card h2,
[data-theme="light"] .card h3 {
  color: #2a1a0a !important;
}

[data-theme="light"] .app-desc,
[data-theme="light"] .desc,
[data-theme="light"] .sub-text,
[data-theme="light"] .muted,
[data-theme="light"] .dim {
  color: rgba(30,25,20,0.6) !important;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: rgba(30,25,20,0.9) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: rgba(30,25,20,0.35) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(212,168,67,0.6) !important;
  outline: none !important;
}

/* Gold buttons keep their gradient; just darken the text */
[data-theme="light"] button[class*="gold"],
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-gold,
[data-theme="light"] button.primary,
[data-theme="light"] .send-btn {
  color: #2a1a0a !important;
  text-shadow: none !important;
}

[data-theme="light"] footer,
[data-theme="light"] .footer,
[data-theme="light"] footer .ucc {
  color: rgba(42,26,10,0.5) !important;
}

[data-theme="light"] .app-icon {
  background: rgba(212,168,67,0.1) !important;
  border-color: rgba(212,168,67,0.35) !important;
  color: #B8860B !important;
}

[data-theme="light"] .badge.live {
  background: rgba(46,168,118,0.15) !important;
  color: #1f7a52 !important;
}
[data-theme="light"] .badge.soon {
  background: rgba(245,166,35,0.22) !important;
  color: #a96400 !important;
}
[data-theme="light"] .badge.planned {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(30,25,20,0.5) !important;
}

[data-theme="light"] .app-cta,
[data-theme="light"] .acr,
[data-theme="light"] .label {
  color: #B8860B !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(184,134,11,0.4) !important;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Video tiles & player surfaces keep dark frames so video content reads well */
[data-theme="light"] .video-tile,
[data-theme="light"] .participant-tile,
[data-theme="light"] .stage video,
[data-theme="light"] .stage canvas:not(.annotation-layer),
[data-theme="light"] video {
  background: #0a0a18 !important;
  border-color: rgba(0,0,0,0.2) !important;
}
/* The annotation layer is a see-through drawing sheet laid OVER a shared screen
   (meet.html ensureAnnotationLayer). It must never take the dark frame above,
   or it paints the share out (Cleo, 2026-10-03, task aa264854). */
.stage canvas.annotation-layer,
[data-theme="light"] .stage canvas.annotation-layer {
  background: transparent !important;
}

/* In meet.html the live call view stays dark even if the lobby is light.
   meet.html sets body.in-call when the room connects; totemTheme.lockDarkForCall()
   sets body[data-call-active]. Either trigger forces dark for the call surface,
   so no meet.html change is required. Add .call-light to opt out per-call. */
[data-theme="light"] body.in-call:not(.call-light),
[data-theme="light"] body[data-call-active="true"]:not(.call-light) {
  background: radial-gradient(ellipse at top center, #12122a 0%, #0a0a18 40%, #050510 100%) !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="light"] body.in-call:not(.call-light) .topbar,
[data-theme="light"] body[data-call-active="true"]:not(.call-light) .topbar {
  background: rgba(10,10,24,0.85) !important;
}
[data-theme="light"] body.in-call:not(.call-light) .topbar .title,
[data-theme="light"] body.in-call:not(.call-light) h1,
[data-theme="light"] body.in-call:not(.call-light) h2,
[data-theme="light"] body[data-call-active="true"]:not(.call-light) .topbar .title {
  color: #D4A843 !important;
}
[data-theme="light"] body.in-call:not(.call-light) .topbar nav a,
[data-theme="light"] body[data-call-active="true"]:not(.call-light) .topbar nav a {
  color: rgba(255,255,255,0.55) !important;
}
[data-theme="light"] body.in-call:not(.call-light) .card,
[data-theme="light"] body.in-call:not(.call-light) .panel,
[data-theme="light"] body.in-call:not(.call-light) .glass-card,
[data-theme="light"] body.in-call:not(.call-light) .lobby-card {
  background: rgba(15,15,30,0.7) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="light"] body.in-call:not(.call-light) input,
[data-theme="light"] body.in-call:not(.call-light) textarea,
[data-theme="light"] body.in-call:not(.call-light) select {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ====== THEME TOGGLE BUTTON ====== */
.totem-theme-toggle {
  background: transparent;
  border: 1px solid #D4A843;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #D4A843;
  margin-left: 18px;
  padding: 0;
  vertical-align: middle;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.totem-theme-toggle:hover {
  background-color: rgba(212,168,67,0.12);
  transform: scale(1.08);
}
.totem-theme-toggle:focus-visible {
  outline: 2px solid rgba(212,168,67,0.5);
  outline-offset: 2px;
}
.totem-theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

[data-theme="light"] .totem-theme-toggle {
  border-color: #B8860B;
  color: #B8860B;
}
[data-theme="light"] .totem-theme-toggle:hover {
  background-color: rgba(184,134,11,0.12);
}