/* ============================================================ Design Tokens — shared across all Silent Theater pages Admin pages use these vars directly. Public pages (event, theater) override --event-* via JS. ============================================================ */ :root { /* Admin / neutral palette */ --bg: #F2F2F2; --bg-elev: #FFFFFF; --ink: #14130F; --ink-2: #4A4842; --ink-3: #8B8880; --line: #E3DED2; --line-2: #D6D0C0; /* Sidebar */ --sidebar: #131210; --sidebar-ink: #E8E4DA; --sidebar-dim: #6B685F; /* Accent — admin UI brand color */ --accent: #00bdf6; --accent-soft: #CCEFFC; /* Status colors */ --live: #2D7D5F; --live-soft: #D4E8DD; --warn: #B8862D; --warn-soft: #F0E4C8; --danger: #A8442C; --danger-soft: #F2DAD3; /* Public-facing event/theater palette */ --event-bg: #002466; --event-accent: #5cd7f2; --event-text: #ffffff; --event-radius: 45px; --event-logo-h: 40px; } /* ============================================================ DARK MODE — toggled via data-theme="dark" on ============================================================ */ [data-theme="dark"] { --bg: #1A1917; --bg-elev: #242220; --ink: #E8E4DA; --ink-2: #B5B0A5; --ink-3: #6B685F; --line: #2E2C28; --line-2: #3A3730; --accent: #00bdf6; --accent-soft: #07323F; --live-soft: #1A3028; --warn-soft: #2A2010; --danger-soft: #2E1A14; }