/* ============================================================================ theme.css — Phase 16 — global themes that overlay the rainbow palette. Each theme is a [data-theme="..."] block on that overrides the shell-level CSS custom properties (background, ink color, glass tint, accent). The rainbow per-pane palette (---color-N from each pane stylesheet) stays unchanged so red Twin / orange Contacts / etc continue to read consistently regardless of the global theme. ========================================================================= */ /* Sovereign — the original deep-ink + cyan accent. Default. */ html[data-theme="sovereign"] { --y-bg-0: #05070b; --y-bg-1: #0c1117; --y-fg-0: #d8e2ee; --y-fg-1: #98a3b1; --y-fg-2: #6c7785; --y-accent: #7af7ff; --y-glass: rgba(10, 14, 22, 0.55); } html[data-theme="dawn"] { --y-bg-0: #fef4e2; --y-bg-1: #fdebcf; --y-fg-0: #2a1f12; --y-fg-1: #6c5740; --y-fg-2: #a08868; --y-accent: #ffb45a; --y-glass: rgba(254, 244, 226, 0.7); } html[data-theme="dawn"] body { color: var(--y-fg-0); background: var(--y-bg-0); } html[data-theme="dusk"] { --y-bg-0: #1c1530; --y-bg-1: #2a1f48; --y-fg-0: #ece4ff; --y-fg-1: #b4a8d0; --y-fg-2: #7a7095; --y-accent: #c9b6ff; --y-glass: rgba(28, 21, 48, 0.65); } html[data-theme="forest"] { --y-bg-0: #0c1a10; --y-bg-1: #14281c; --y-fg-0: #e0f0d8; --y-fg-1: #a8c098; --y-fg-2: #708568; --y-accent: #9ad670; --y-glass: rgba(12, 26, 16, 0.65); } html[data-theme="ocean"] { --y-bg-0: #06121a; --y-bg-1: #0c1f2c; --y-fg-0: #d8ecf8; --y-fg-1: #98b8c8; --y-fg-2: #607888; --y-accent: #4fc6ff; --y-glass: rgba(6, 18, 26, 0.65); } html[data-theme="ember"] { --y-bg-0: #0a0606; --y-bg-1: #1a0f0c; --y-fg-0: #ffe0d8; --y-fg-1: #c89888; --y-fg-2: #886060; --y-accent: #ff7a4a; --y-glass: rgba(10, 6, 6, 0.7); } html[data-theme="paper"] { --y-bg-0: #fafafa; --y-bg-1: #ececec; --y-fg-0: #1a1a1a; --y-fg-1: #555555; --y-fg-2: #888888; --y-accent: #0066cc; --y-glass: rgba(250, 250, 250, 0.85); } html[data-theme="paper"] body { color: var(--y-fg-0); background: var(--y-bg-0); } /* Per-theme CSS-var aliases mapped to the legacy shell variables. This pass-through is what actually swaps the look without touching the per-pane rainbow CSS. */ html[data-theme] { --bg-0: var(--y-bg-0, #05070b); --bg-1: var(--y-bg-1, #0c1117); --fg-0: var(--y-fg-0, #d8e2ee); --fg-1: var(--y-fg-1, #98a3b1); --fg-2: var(--y-fg-2, #6c7785); --accent: var(--y-accent, #7af7ff); --glass: var(--y-glass, rgba(10, 14, 22, 0.55)); }