/* ============================================================ Theme palettes — 6 curated moods for the liquid-glass redesign. Each theme = Tier 1 palette: 4 ambient blob colors, accent family, and categorical chart hues. Applied via (set by the FOUC bootstrap script and themes.js). The picker's preview cards also carry data-theme attributes, scoping each theme's variables to the card so the preview gradients render in pure CSS. Accent family per theme (light-base tunings; dark-base variants land with the glass skin in PR8): --accent primary interactive color --accent-strong hover / active --accent-soft pastel wash (header band, soft backgrounds) --accent-deep darkest text-safe shade --accent-bright lively secondary accent --accent-badge count badges --accent-text contrast-safe accent for text/links --text-on-accent text on accent-filled controls [data-mode="dark"] remains a stub until PR8 (the Tier 2 remap only makes sense once surfaces are glass, not white cards). ============================================================ */ [data-theme="aurora"] { --blob-1: #7C3AED; --blob-2: #D946EF; --blob-3: #06B6D4; --blob-4: #2563EB; --accent: #7C3AED; --accent-strong: #6D28D9; --accent-soft: #EDE9FE; --accent-deep: #5B21B6; --accent-bright: #8B5CF6; --accent-badge: #6D28D9; --accent-text: #7C3AED; --text-on-accent: #ffffff; --chart-1: #7C3AED; --chart-2: #DB2777; --chart-3: #0891B2; --chart-4: #D97706; --chart-5: #059669; --chart-6: #4F46E5; } [data-theme="citrus"] { --blob-1: #FB7185; --blob-2: #F59E0B; --blob-3: #A3E635; --blob-4: #FB923C; --accent: #EA580C; --accent-strong: #C2410C; --accent-soft: #FFEDD5; --accent-deep: #9A3412; --accent-bright: #F97316; --accent-badge: #C2410C; --accent-text: #C2410C; --text-on-accent: #ffffff; --chart-1: #D97706; --chart-2: #E11D48; --chart-3: #65A30D; --chart-4: #0284C7; --chart-5: #9333EA; } [data-theme="oceanic"] { --blob-1: #0EA5E9; --blob-2: #14B8A6; --blob-3: #6EE7B7; --blob-4: #2563EB; --accent: #0D9488; --accent-strong: #0F766E; --accent-soft: #CCFBF1; --accent-deep: #115E59; --accent-bright: #14B8A6; --accent-badge: #0F766E; --accent-text: #0D9488; --text-on-accent: #ffffff; --chart-1: #0284C7; --chart-2: #0D9488; --chart-3: #4F46E5; --chart-4: #D97706; --chart-5: #DB2777; } [data-theme="ultraviolet"] { --blob-1: #6D28D9; --blob-2: #DB2777; --blob-3: #4F46E5; --blob-4: #9333EA; --accent: #A21CAF; --accent-strong: #86198F; --accent-soft: #FAE8FF; --accent-deep: #701A75; --accent-bright: #D946EF; --accent-badge: #A21CAF; --accent-text: #A21CAF; --text-on-accent: #ffffff; --chart-1: #A21CAF; --chart-2: #4F46E5; --chart-3: #DB2777; --chart-4: #0D9488; --chart-5: #D97706; } [data-theme="ember"] { --blob-1: #EA580C; --blob-2: #F43F5E; --blob-3: #EAB308; --blob-4: #BE123C; --accent: #E11D48; --accent-strong: #BE123C; --accent-soft: #FFE4E6; --accent-deep: #9F1239; --accent-bright: #FB7185; --accent-badge: #BE123C; --accent-text: #BE123C; --text-on-accent: #ffffff; --chart-1: #C2410C; --chart-2: #CA8A04; --chart-3: #BE185D; --chart-4: #0284C7; --chart-5: #7C3AED; } [data-theme="matrix"] { --blob-1: #22C55E; --blob-2: #84CC16; --blob-3: #06B6D4; --blob-4: #10B981; --accent: #65A30D; --accent-strong: #4D7C0F; --accent-soft: #ECFCCB; --accent-deep: #3F6212; --accent-bright: #84CC16; --accent-badge: #4D7C0F; --accent-text: #4D7C0F; --text-on-accent: #ffffff; --chart-1: #65A30D; --chart-2: #0891B2; --chart-3: #CA8A04; --chart-4: #4F46E5; --chart-5: #DB2777; } /* ============================================================ Dark mode — Tier 2 semantic remap ("color-rich dark" base). Deep indigo field, vivid blobs at higher mix weights (base.css), light text, dark glass surfaces (glass.css). ============================================================ */ [data-mode="dark"] { --bg-field: #0B0E1A; --field-page: var(--lamp-field); --surface-1: #131729; --surface-2: rgba(0, 0, 0, 0.25); --stroke-1: rgba(255, 255, 255, 0.10); --stroke-2: rgba(255, 255, 255, 0.14); --text-1: #F2F4FB; --text-2: #DDE1EE; --text-3: #A9B1C7; --text-4: #7C8499; /* P&L semantics: brighter for dark backdrops */ --status-gain: #34D399; --status-gain-strong: #6EE7B7; --status-gain-bg: rgba(52, 211, 153, 0.14); --status-gain-border: rgba(52, 211, 153, 0.35); --status-gain-text: #A7F3D0; --status-loss: #F87171; --status-loss-strong: #FCA5A5; --status-loss-bg: rgba(248, 113, 113, 0.14); --status-loss-border: rgba(248, 113, 113, 0.35); --status-loss-text: #FECACA; --status-info: #60A5FA; --status-info-bg: rgba(96, 165, 250, 0.14); --status-info-border: rgba(96, 165, 250, 0.35); --status-info-text: #BFDBFE; --status-warn: #FBBF24; --status-warn-bg: rgba(251, 191, 36, 0.14); --status-warn-border: rgba(251, 191, 36, 0.35); --chart-grid: rgba(255, 255, 255, 0.08); --chart-axis-text: #A9B1C7; --chart-indigo: #818CF8; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55); /* NOTE: legacy-var dark remaps (--gray-*, --success-*, --error-*) live in glass.css — styles.css re-defines those names in :root AFTER this file loads, so the override must come from the last layer to win the cascade. */ } /* Per-theme dark accent tunings — accents brighten on the deep field; light accents flip to dark on-accent text. */ [data-theme="aurora"][data-mode="dark"] { --accent: #8B5CF6; --accent-strong: #A78BFA; --accent-soft: rgba(139, 92, 246, 0.16); --accent-deep: #C4B5FD; --accent-text: #A78BFA; --accent-badge: #8B5CF6; } [data-theme="citrus"][data-mode="dark"] { --accent: #FBBF24; --accent-strong: #FCD34D; --accent-soft: rgba(251, 191, 36, 0.14); --accent-deep: #FDE68A; --accent-text: #FBBF24; --accent-badge: #F59E0B; --text-on-accent: #1A1305; } [data-theme="oceanic"][data-mode="dark"] { --accent: #2DD4BF; --accent-strong: #5EEAD4; --accent-soft: rgba(45, 212, 191, 0.14); --accent-deep: #99F6E4; --accent-text: #2DD4BF; --accent-badge: #14B8A6; --text-on-accent: #04211C; } [data-theme="ultraviolet"][data-mode="dark"] { --accent: #E879F9; --accent-strong: #F0ABFC; --accent-soft: rgba(232, 121, 249, 0.14); --accent-deep: #F5D0FE; --accent-text: #E879F9; --accent-badge: #D946EF; --text-on-accent: #2A0B2E; } [data-theme="ember"][data-mode="dark"] { --accent: #FB923C; --accent-strong: #FDBA74; --accent-soft: rgba(251, 146, 60, 0.14); --accent-deep: #FED7AA; --accent-text: #FB923C; --accent-badge: #F97316; --text-on-accent: #210E02; } [data-theme="matrix"][data-mode="dark"] { --accent: #A3E635; --accent-strong: #BEF264; --accent-soft: rgba(163, 230, 53, 0.14); --accent-deep: #D9F99D; --accent-text: #A3E635; --accent-badge: #84CC16; --text-on-accent: #131A02; }