/* ============================================================ SIFA · theme tokens ------------------------------------------------------------ Single source of truth for every shared color token. Both chat.css and admin.css consume from here — change a value once, every surface picks it up. Component-specific tokens (radius, motion, bubbles, wallpaper, channels, layout, elevation) live in their owning stylesheet. Two themes: :root → dark (fallback) :root[data-theme="light"] → cream (the v5 brief palette) Templates set data-theme="light" on explicitly. To wire OS-driven auto-switching later, add a @media (prefers-color-scheme: light) block here. ============================================================ */ /* ---------- DARK ---------- */ :root { /* Surfaces */ --bg: #0F0F1B; --panel: #1A1A2E; --panel-2: #232342; --panel-3: #2A2A45; --hover: #232342; --border: #2A2A45; --hairline: rgba(255,255,255,0.06); --hairline-strong: rgba(255,255,255,0.12); /* Text */ --text: #ECEAFA; --muted: #8E8AAC; --muted-2: #B6B2D4; /* Brand */ --primary: #00A884; --primary-dim: #008069; --primary-soft: rgba(0,168,132,0.16); --primary-glow: rgba(0,168,132,0.34); --accent: #FF6B9D; --brand-mark: #BC6946; --brand-mark-soft: rgba(188,105,70,0.16); /* Status */ --mint: #34D399; --warn: #FFB949; --warn-soft: rgba(255,185,73,0.12); --err: #FF5470; --alert: #FF5470; --alert-soft: rgba(255,84,112,0.12); } /* ---------- LIGHT (cream — the v5 brief palette) ---------- */ :root[data-theme="light"] { /* Surfaces */ --bg: #F1EADF; --panel: #FFFFFF; --panel-2: #F4F1EA; --panel-3: #ECE7DC; --hover: #F4F1EA; --border: #E8E2D5; --hairline: rgba(15,15,27,0.06); --hairline-strong: rgba(15,15,27,0.12); /* Text */ --text: #1B1A17; --muted: #6E6A7C; --muted-2: #4A465A; /* Brand — primary aligned with the SIFA mark for full warm-palette consistency. Channel-specific tokens (--ch-whatsapp-*) keep WhatsApp green where it represents the actual channel, not SIFA itself. */ --primary: #BC6946; --primary-dim: #9C5235; --primary-soft: rgba(188,105,70,0.10); --primary-glow: rgba(188,105,70,0.20); --accent: #FF6B9D; --brand-mark: #BC6946; --brand-mark-soft: rgba(188,105,70,0.12); /* Status */ --mint: #16A34A; --warn: #D97706; --warn-soft: rgba(217,119,6,0.10); --err: #E11D48; --alert: #E11D48; --alert-soft: rgba(225,29,72,0.10); }