/* ============================================================ Vionix — dark theme tokens (PRIMARY / default theme) Dark is the shipped default for the streaming UI. These tokens are applied unconditionally and re-asserted under . A light override lives at the bottom for the optional toggle in app.js. ============================================================ */ :root, html[data-theme="dark"]{ --bg:#07080e; --bg-elevated:#0d0f18; --surface:#111321; --surface-muted:#171a2b; --surface-hover:#1e2236; --border:#222641; --border-strong:#333a5c; --text:#eef0f8; --text-muted:#a3a9c2; --text-faint:#6d7393; --text-invert:#07080e; --grad-brand-soft:linear-gradient(135deg,#2a1322 0%,#1a1530 100%); --danger-bg:#2a1416; --danger-border:#5a2a2c; --shadow-xs:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.55); --shadow-md:0 10px 30px rgba(0,0,0,.6); --shadow-lg:0 22px 60px rgba(0,0,0,.72); --ring:0 0 0 4px rgba(123,91,255,.32); } /* header glass tuned for the cinematic dark base */ html[data-theme="dark"] .site-header{background:rgba(8,9,16,.72)} /* hero glow */ html[data-theme="dark"] .hero::before{ background: radial-gradient(1000px 480px at 80% -10%,rgba(255,61,127,.22),transparent 60%), radial-gradient(820px 420px at 6% 8%,rgba(123,91,255,.22),transparent 60%); } /* ---------- OPTIONAL light override (theme toggle) ---------- */ html[data-theme="light"]{ --bg:#f5f6fb; --bg-elevated:#ffffff; --surface:#ffffff; --surface-muted:#eef1f8; --surface-hover:#e7ecf6; --border:#e2e6f0; --border-strong:#cdd4e4; --text:#171a2b; --text-muted:#54607a; --text-faint:#8a93a8; --text-invert:#ffffff; --grad-brand-soft:linear-gradient(135deg,#ffe6ef 0%,#ece8ff 100%); --danger-bg:#fdecec; --danger-border:#f5c2bf; --shadow-xs:0 1px 2px rgba(20,24,45,.06); --shadow-sm:0 2px 8px rgba(20,24,45,.08); --shadow-md:0 10px 30px rgba(20,24,45,.10); --shadow-lg:0 22px 60px rgba(20,24,45,.14); } html[data-theme="light"] .site-header{background:rgba(255,255,255,.82)} html[data-theme="light"] .form-alert{color:#9d2c24} html[data-theme="light"] .poster__title{color:#fff} /* smooth theme transition */ html.theme-anim, html.theme-anim *{transition:background-color .25s ease,border-color .25s ease,color .25s ease!important}