/* ============================================================ BoraVoltar — theme.css Design tokens for dark (default) and light themes Toggle by setting data-theme="dark|light" on ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #070b10; --bg-soft: #0b1118; --surface: #0f1620; --surface-2: #121b26; --surface-elevated: #16202d; --surface-hover: #18222f; /* Borders */ --border: rgba(148, 163, 184, 0.16); --border-soft: rgba(148, 163, 184, 0.10); --border-strong: rgba(56, 189, 248, 0.38); /* Text */ --text: #f6f9fc; --text-soft: #cbd5e1; --text-muted: #8a99ad; --text-faint: #5c6b7e; /* Brand + semantic */ --primary: #22c7f7; --primary-strong: #0ea5e9; --primary-ink: #04222e; --primary-soft: rgba(34, 199, 247, 0.14); --primary-line: rgba(34, 199, 247, 0.30); --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.13); --success-line: rgba(74, 222, 128, 0.30); --warning: #f6a93b; --warning-soft: rgba(246, 169, 59, 0.13); --warning-line: rgba(246, 169, 59, 0.32); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --danger-line: rgba(248, 113, 113, 0.32); --purple: #a78bfa; --purple-soft: rgba(167, 139, 250, 0.14); --purple-line: rgba(167, 139, 250, 0.32); --whatsapp: #25d366; --whatsapp-soft: rgba(37, 211, 102, 0.12); --whatsapp-line: rgba(37, 211, 102, 0.34); /* Effects */ --radius: 9px; --radius-sm: 6px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 24px -8px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7); --shadow-glow: 0 0 0 1px rgba(34,199,247,.12), 0 0 32px -6px rgba(34,199,247,.18); --grad-app: radial-gradient(1200px 600px at 12% -8%, rgba(34,199,247,.06), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(14,165,233,.05), transparent 55%); } [data-theme="light"] { color-scheme: light; --bg: #eef2f6; --bg-soft: #e7edf3; --surface: #ffffff; --surface-2: #f6f9fc; --surface-elevated: #ffffff; --surface-hover: #f0f5fa; --border: rgba(15, 32, 51, 0.12); --border-soft: rgba(15, 32, 51, 0.07); --border-strong: rgba(14, 165, 233, 0.45); --text: #0c1825; --text-soft: #34465a; --text-muted: #64768b; --text-faint: #97a6b8; --primary: #0a9fce; --primary-strong: #0284c7; --primary-ink: #ffffff; --primary-soft: rgba(10, 159, 206, 0.10); --primary-line: rgba(10, 159, 206, 0.28); --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.10); --success-line: rgba(22, 163, 74, 0.28); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.10); --warning-line: rgba(217, 119, 6, 0.30); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.09); --danger-line: rgba(220, 38, 38, 0.28); --purple: #7c3aed; --purple-soft: rgba(124, 58, 237, 0.10); --purple-line: rgba(124, 58, 237, 0.28); --whatsapp: #1da851; --whatsapp-soft: rgba(29, 168, 81, 0.10); --whatsapp-line: rgba(29, 168, 81, 0.30); --shadow-sm: 0 1px 2px rgba(15,32,51,.06); --shadow: 0 10px 30px -12px rgba(15,32,51,.18); --shadow-lg: 0 28px 64px -24px rgba(15,32,51,.28); --shadow-glow: 0 0 0 1px rgba(10,159,206,.14), 0 8px 28px -10px rgba(10,159,206,.20); --grad-app: radial-gradient(1200px 600px at 12% -8%, rgba(10,159,206,.05), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(2,132,199,.04), transparent 55%); } /* Status color helpers — map a status keyword to its color set */ .is-cyan { --st: var(--primary); --st-soft: var(--primary-soft); --st-line: var(--primary-line); } .is-green { --st: var(--success); --st-soft: var(--success-soft); --st-line: var(--success-line); } .is-yellow { --st: var(--warning); --st-soft: var(--warning-soft); --st-line: var(--warning-line); } .is-red { --st: var(--danger); --st-soft: var(--danger-soft); --st-line: var(--danger-line); } .is-purple { --st: var(--purple); --st-soft: var(--purple-soft); --st-line: var(--purple-line); }