/* ============================================================ THEME TOKENS — single source of truth for both palettes. ============================================================ Defaults below are the LIGHT theme (the team's chosen default for now). The dark theme survives as a [data-theme="dark"] override on so a future toggle can flip the attribute and re-tint everything without touching markup. Every colour exists three ways: --viv-x = the hex literal (legacy CSS that still references `var(--viv-x)` directly keeps working) --viv-x-rgb = space-separated R G B triplet, consumed by the Tailwind config via `rgb(var(--x-rgb) / )` so utility classes like `bg-viv-canvas/50` work AND survive the CDN compiler's color parser hex-form rgba() compositions in legacy CSS use the same RGB triplet as `rgba(var(--viv-x-rgb), 0.06)`. Note: the RGB triplet uses SPACES, not commas, because the Tailwind `` substitution needs the modern space-separated rgb() syntax. Legacy `rgba(var(--x), 0.06)` still works because CSS color functions accept either separator. */ :root { /* Vivium tokens. */ --viv-canvas: #F7F7FA; --viv-canvas-rgb: 247, 247, 250; --viv-surface: #FFFFFF; --viv-surface-rgb: 255, 255, 255; --viv-border: #E5E5EA; --viv-border-rgb: 229, 229, 234; --viv-border-hov: #D1D1D6; --viv-body: #131318; --viv-body-rgb: 19, 19, 24; --viv-muted: #5A5A66; --viv-muted-rgb: 90, 90, 102; --viv-dim: #9B9BA2; --viv-code-bg: #ECECF1; --viv-leader: #E5A35B; --viv-leader-rgb: 229, 163, 91; --viv-researcher: #5B8DEF; --viv-researcher-rgb: 91, 141, 239; --viv-strategist: #6BB089; --viv-strategist-rgb: 107, 176, 137; --viv-critic: #E07A8E; --viv-critic-rgb: 224, 122, 142; --viv-writer: #A685D9; --viv-writer-rgb: 166, 133, 217; /* PHALANX-era tokens. */ --phx-bg: #FFFFFF; --phx-bg-rgb: 255, 255, 255; --phx-panel: #F7F7FA; --phx-panel-rgb: 247, 247, 250; --phx-panel2: #FFFFFF; --phx-panel2-rgb: 255, 255, 255; --phx-border: #E5E5EA; --phx-border-rgb: 229, 229, 234; --phx-purple: #a855f7; --phx-purple-rgb: 168, 85, 247; --phx-indigo: #6366f1; --phx-indigo-rgb: 99, 102, 241; --phx-cyan: #0891b2; --phx-cyan-rgb: 8, 145, 178; --phx-pink: #ec4899; --phx-pink-rgb: 236, 72, 153; --phx-amber: #d97706; --phx-amber-rgb: 217, 119, 6; --phx-violet: #7c3aed; --phx-violet-rgb: 124, 58, 237; --phx-mute: #6B6B72; --phx-mute-rgb: 107, 107, 114; --phx-dim: #9B9BA2; --phx-dim-rgb: 155, 155, 162; } /* Slate utility remap for light mode — the dark-era templates and conversation_service render rely on text-slate-50/100/200/300 as "primary text on dark surface". In light mode those greys vanish into the canvas; force them to the body token so the consultancy stages, final-answer card and sidebar names stay legible. The selector excludes dark mode so the original Tailwind ramps survive. */ :root:not([data-theme="dark"]) .text-slate-50, :root:not([data-theme="dark"]) .text-slate-100, :root:not([data-theme="dark"]) .text-slate-200, :root:not([data-theme="dark"]) .text-slate-300 { color: var(--viv-body); } [data-theme="dark"] { --viv-canvas: #0B0B0F; --viv-canvas-rgb: 11, 11, 15; --viv-surface: #131318; --viv-surface-rgb: 19, 19, 24; --viv-border: #1F1F26; --viv-border-rgb: 31, 31, 38; --viv-border-hov: #2C2C36; --viv-body: #E8E8EC; --viv-body-rgb: 232, 232, 236; --viv-muted: #8B8B98; --viv-muted-rgb: 139, 139, 152; --viv-dim: #5A5A66; --viv-code-bg: #0F0F14; /* Role colours unchanged. */ --phx-bg: #06060c; --phx-bg-rgb: 6, 6, 12; --phx-panel: #0d0b18; --phx-panel-rgb: 13, 11, 24; --phx-panel2: #13111d; --phx-panel2-rgb: 19, 17, 29; --phx-border: #2a2438; --phx-border-rgb: 42, 36, 56; --phx-cyan: #22d3ee; --phx-cyan-rgb: 34, 211, 238; --phx-amber: #fbbf24; --phx-amber-rgb: 251, 191, 36; --phx-violet: #c084fc; --phx-violet-rgb: 192, 132, 252; --phx-mute: #94a3b8; --phx-mute-rgb: 148, 163, 184; --phx-dim: #6b7280; --phx-dim-rgb: 107, 114, 128; }