/* ============================================================ VoiceOps — Theme Tokens Generated from Palette Lab on 2026-05-19 ------------------------------------------------------------ Three themes: Light · Moonlit · Dark Switch via `data-theme="light|moonlit|dark"` on . ============================================================ */ /* ---------- Moonlit (default) — deep teal-green, anchored at #113440 ---------- */ :root, [data-theme="moonlit"] { --bg: #113440; --bg-sidebar: #0A222A; --surface: #1A4D5E; --border: #3C8398; --text: #E4F2F5; --text-muted: #9BC1CA; --accent: #7DD3E0; --bg-sunken: #0E2D38; --surface-solid: #174351; --surface-raised: #205A6D; --border-strong: #3B8398; --border-subtle: #194454; --text-subtle: #6F908B; --text-on-accent: #1A1208; --accent-hover: #F0C859; --accent-soft: color-mix(in oklab, #7DD3E0 18%, #113440); --accent-soft-fg: #7DD3E0; --accent-ring: #7DD3E033; --success: #4ADE80; --success-soft: #133C29; --success-soft-fg: #6EE7A1; --warning: #F5B544; --warning-soft: #3A2812; --warning-soft-fg: #FCD68A; --danger: #F87171; --danger-soft: #3A1414; --danger-soft-fg: #FCA5A5; --info: #6EC1E4; --info-soft: #112A36; --info-soft-fg: #A4D9EF; --status-ok: #34D399; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 8px 24px -8px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px -16px rgba(0,0,0,.55); --ring-focus: 0 0 0 3px var(--accent-ring); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; color-scheme: dark; } /* ---------- Light — sage paper, tinted from the #113440 family ---------- */ [data-theme="light"] { --bg: #ACC1D2; --bg-sidebar: #BCD4E7; --surface: #FFFFFF; --border: #0D83DE; --text: #0F1F1B; --text-muted: #2D5F86; --accent: #0B64A8; --bg-sunken: #DFE8E4; --surface-solid: #FFFFFF; --surface-raised: #F5FAF7; --border-strong: #93AAA2; --border-subtle: #D6E0DB; --text-subtle: #7C928A; --text-on-accent: #FFFFFF; --accent-hover: #946609; --accent-soft: color-mix(in oklab, #0B64A8 18%, #ACC1D2); --accent-soft-fg: #0B64A8; --accent-ring: #0B64A833; --success: #1F7A4D; --success-soft: #CFE5D6; --success-soft-fg: #0F4A2E; --warning: #B65A11; --warning-soft: #F2DCC2; --warning-soft-fg: #6E3204; --danger: #B53030; --danger-soft: #F0D5D5; --danger-soft-fg: #7A1A1A; --info: #1C6E96; --info-soft: #CDE2EC; --info-soft-fg: #0F4865; --status-ok: #1F7A4D; --shadow-sm: 0 1px 2px rgba(40,30,10,.06); --shadow: 0 8px 24px -8px rgba(40,30,10,.12); --shadow-lg: 0 20px 50px -16px rgba(40,30,10,.18); --ring-focus: 0 0 0 3px var(--accent-ring); color-scheme: light; } /* ---------- Dark — near-black tinted from the same #113440 family ---------- */ [data-theme="dark"] { --bg: #0A1417; --bg-sidebar: #050B0D; --surface: #162428; --border: #3D6068; --text: #E8F2F2; --text-muted: #94AEAE; --accent: #5FB8C7; --bg-sunken: #0C181B; --surface-solid: #122024; --surface-raised: #1A2D32; --border-strong: #3D5A62; --border-subtle: #18272B; --text-subtle: #6E7E7A; --text-on-accent: #1A1208; --accent-hover: #FAD46A; --accent-soft: color-mix(in oklab, #5FB8C7 18%, #0A1417); --accent-soft-fg: #5FB8C7; --accent-ring: #5FB8C733; --success: #34D399; --success-soft: #0F2A20; --success-soft-fg: #6EE7A1; --warning: #F59E0B; --warning-soft: #2A1F0E; --warning-soft-fg: #FCD68A; --danger: #F87171; --danger-soft: #2A1414; --danger-soft-fg: #FCA5A5; --info: #60A5FA; --info-soft: #0E1F32; --info-soft-fg: #93C5FD; --status-ok: #34D399; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg: 0 20px 50px -16px rgba(0,0,0,.7); --ring-focus: 0 0 0 3px var(--accent-ring); color-scheme: dark; }