/* ═══════════════════════════════════════════════════════════════════ bryanchasko-design-system — listen Theme Teal/cyan for listen.bryanchasko.com (HCOM bridge palette) Use: or Works with both data-theme="light" and data-theme="dark" ═══════════════════════════════════════════════════════════════════ */ .theme-listen, [data-app="listen"] { --bc-color-accent: #0891b2; --bc-color-accent-hover: #06b6d4; --bc-color-on-accent: #ffffff; --persona-border: #06b6d4; --persona-glow: rgba(6, 182, 212, 0.1); --bc-shadow-card: 0 1px 2px rgba(6, 182, 212, 0.08), 0 6px 18px rgba(6, 182, 212, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); --bc-shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.4); } /* Dark-mode overrides for listen */ :root[data-theme="dark"] .theme-listen, :root[data-theme="dark"][data-app="listen"] { --bc-color-bg: #0a1628; --bc-color-surface: #0f1f3a; --bc-color-surface-2: #162a4a; --bc-color-border: #1e3a5f; --bc-color-text: #b4d0e7; --bc-color-text-muted: #7a9bb5; --bc-color-accent: #06b6d4; --bc-color-accent-hover: #22d3ee; --bc-color-on-accent: #0a1628; --bc-color-error: #f43f5e; --bc-color-success: #10b981; --persona-glow: rgba(6, 182, 212, 0.15); --bc-shadow-card: 0 1px 2px rgba(6, 182, 212, 0.1), 0 6px 18px rgba(6, 182, 212, 0.12), 0 2px 6px rgba(0, 0, 0, 0.3); }