/* ===================================================================== Per-theme color overrides — applied via . Each block overrides color tokens only; layout rules live in theme.css and app.css. :root carries the default (squared-away) values. Themes are 3–4 color systems: surface · brand · secondary · text/success. Accent overlays (data-accent) remap --secondary without a parallel system. ===================================================================== */ [data-theme="squared-away"] { /* Default product language = brand board (yellow CTAs, red emphasis, charcoal surfaces). Listed in full so switching away and back cannot inherit a stale --brand. Carbon and other picker themes remain alternate palettes. Orbit pages keep their isolated CSS. */ --bg: #121212; --surface: #1C1C1C; --surface-raised: #242424; --text: #FFFFFF; --text-muted: #A3A3A3; --brand: #FFD400; --brand-dim: #E6C000; --brand-light: #FFE566; --brand-dark: #C9A000; --brand-rgb: 255, 212, 0; --brand-gold: #FF8A00; --brand-gradient: linear-gradient(165deg, var(--brand-light), var(--brand-gold), #E53935); --accent: var(--brand); --accent-dim: var(--brand-dim); --accent-light: var(--brand-light); --accent-rgb: var(--brand-rgb); --success: #FFD400; --success-dim: #E6C000; --success-light: #FFE566; --success-dark: #C9A000; --success-rgb: 255, 212, 0; --secondary: #E53935; --secondary-dim: #C62828; --secondary-light: #EF5350; --secondary-rgb: 229, 57, 53; --danger: #E53935; --danger-rgb: 229, 57, 53; --warning: #FF8A00; --border: #2E2E2E; --border-highlight: rgba(255, 212, 0, 0.35); --grid-line: #1A1214; --glow-primary: var(--brand); --glow-secondary: var(--secondary); --glow-opacity: 0.14; --nav-bg: rgba(10, 10, 10, 0.92); } [data-theme="midnight"] { --bg: #0C0A12; --surface: #16131F; --surface-raised: #12101A; --text: #F2F0F7; --text-muted: #A89BB8; --brand: #A78BFA; --brand-dim: #8B5CF6; --brand-light: #C4B5FD; --brand-dark: #6D28D9; --brand-rgb: 167, 139, 250; --accent: #A78BFA; --accent-dim: #8B5CF6; --accent-light: #C4B5FD; --accent-rgb: 167, 139, 250; --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --success: #4ADE80; --success-rgb: 74, 222, 128; --border: #2A2438; --border-highlight: #3D3450; --grid-line: #18141F; --glow-primary: #A78BFA; --glow-secondary: #F0C94E; --glow-opacity: 0.12; --nav-bg: rgba(8, 6, 12, 0.9); } [data-theme="aurora"] { --bg: #0F1419; --surface: #182029; --surface-raised: #131A22; --text: #F1F5F9; --text-muted: #9AA8B8; --brand: #2DD4BF; --brand-dim: #14B8A6; --brand-light: #5EEAD4; --brand-dark: #0F766E; --brand-rgb: 45, 212, 191; --accent: #C084FC; --accent-dim: #A855F7; --accent-light: #D8B4FE; --accent-rgb: 192, 132, 252; --secondary: #C084FC; --secondary-dim: #A855F7; --secondary-light: #D8B4FE; --secondary-rgb: 192, 132, 252; --success: #4ADE80; --success-rgb: 74, 222, 128; --border: #2A3644; --border-highlight: #3D4E60; --grid-line: #171E26; --glow-primary: #2DD4BF; --glow-secondary: #C084FC; --glow-opacity: 0.14; --nav-bg: rgba(10, 14, 18, 0.88); } [data-theme="ocean"] { --bg: #0C141C; --surface: #15202B; --surface-raised: #111A24; --text: #E8F4FC; --text-muted: #8FAFC4; --brand: #38BDF8; --brand-dim: #0EA5E9; --brand-light: #7DD3FC; --brand-dark: #0369A1; --brand-rgb: 56, 189, 248; --accent: #38BDF8; --accent-dim: #0EA5E9; --accent-light: #7DD3FC; --accent-rgb: 56, 189, 248; --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --success: #4ADE80; --success-rgb: 74, 222, 128; --border: #243848; --border-highlight: #345064; --grid-line: #121C26; --glow-primary: #38BDF8; --glow-secondary: #F0C94E; --glow-opacity: 0.12; --nav-bg: rgba(8, 14, 20, 0.9); } [data-theme="ember"] { --bg: #1A1210; --surface: #2A1E1A; --surface-raised: #221814; --text: #FEF3E2; --text-muted: #C9B090; --brand: #F97316; --brand-dim: #EA580C; --brand-light: #FB923C; --brand-dark: #C2410C; --brand-rgb: 249, 115, 22; --accent: #F97316; --accent-dim: #EA580C; --accent-light: #FB923C; --accent-rgb: 249, 115, 22; --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --danger: #FB7185; --danger-rgb: 251, 113, 133; --border: #3D2A22; --border-highlight: #523830; --grid-line: #241810; --glow-primary: #F97316; --glow-secondary: #F0C94E; --glow-opacity: 0.14; --nav-bg: rgba(14, 10, 8, 0.9); } [data-theme="carbon"] { --bg: #141414; --surface: #1F1F1F; --surface-raised: #1A1A1A; --text: #F5F5F5; --text-muted: #B0B0B0; --brand: #39D353; --brand-dim: #2AA841; --brand-light: #5CE075; --brand-dark: #1A7F2E; --brand-rgb: 57, 211, 83; --accent: #39D353; --accent-dim: #2AA841; --accent-light: #5CE075; --accent-rgb: 57, 211, 83; --secondary: #A3A3A3; --secondary-dim: #737373; --secondary-light: #D4D4D4; --secondary-rgb: 163, 163, 163; --border: #2E2E2E; --border-highlight: #404040; --grid-line: #1C1C1C; --glow-primary: #39D353; --glow-secondary: #A3A3A3; --glow-opacity: 0.08; --nav-bg: rgba(10, 10, 10, 0.92); } [data-theme="light"] { --bg: #F5F7FA; --surface: #FFFFFF; --surface-raised: #EEF1F5; --text: #1A2330; --text-muted: #4A5C6E; --brand: #5B21B6; --brand-dim: #4C1D95; --brand-light: #7C3AED; --brand-dark: #3B0764; --brand-rgb: 91, 33, 182; --accent: #5B21B6; --accent-dim: #4C1D95; --accent-light: #7C3AED; --accent-rgb: 91, 33, 182; --secondary: #B45309; --secondary-dim: #92400E; --secondary-light: #D97706; --secondary-rgb: 180, 83, 9; --success: #15803D; --success-dim: #166534; --success-light: #22C55E; --success-rgb: 21, 128, 61; --danger: #DC2626; --danger-rgb: 220, 38, 38; --warning: #B45309; --border: #C8D2DC; --border-highlight: #A8B6C4; --grid-line: rgba(26, 35, 48, 0.07); --glow-primary: #5B21B6; --glow-secondary: #B45309; --glow-opacity: 0.06; --nav-bg: rgba(255, 255, 255, 0.92); } [data-theme="slate"] { --bg: #1B2430; --surface: #243041; --surface-raised: #1F2A38; --text: #EEF2F6; --text-muted: #A0B0C0; --brand: #94A3B8; --brand-dim: #64748B; --brand-light: #CBD5E1; --brand-dark: #475569; --brand-rgb: 148, 163, 184; --accent: #94A3B8; --accent-dim: #64748B; --accent-light: #CBD5E1; --accent-rgb: 148, 163, 184; --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --success: #4ADE80; --success-rgb: 74, 222, 128; --border: #334556; --border-highlight: #44586C; --grid-line: #222E3C; --glow-primary: #94A3B8; --glow-secondary: #F0C94E; --glow-opacity: 0.1; --nav-bg: rgba(12, 16, 22, 0.9); } [data-theme="sand"] { --bg: #1C1916; --surface: #2A241F; --surface-raised: #221E1A; --text: #F6F0E8; --text-muted: #B8A898; --brand: #D4A574; --brand-dim: #B8895A; --brand-light: #E0B890; --brand-dark: #8F6840; --brand-rgb: 212, 165, 116; --accent: #D4A574; --accent-dim: #B8895A; --accent-light: #E0B890; --accent-rgb: 212, 165, 116; --secondary: #E07A5F; --secondary-dim: #C45F45; --secondary-light: #E9957E; --secondary-rgb: 224, 122, 95; --border: #3D342C; --border-highlight: #52463B; --grid-line: #26201B; --glow-primary: #D4A574; --glow-secondary: #E07A5F; --glow-opacity: 0.11; --nav-bg: rgba(14, 12, 10, 0.9); } [data-theme="forest"] { --bg: #121A16; --surface: #1A2620; --surface-raised: #15201B; --text: #EAF2EC; --text-muted: #9AB0A0; --brand: #6B9F78; --brand-dim: #548263; --brand-light: #88B894; --brand-dark: #3D6B4A; --brand-rgb: 107, 159, 120; --accent: #6B9F78; --accent-dim: #548263; --accent-light: #88B894; --accent-rgb: 107, 159, 120; --secondary: #D4A574; --secondary-dim: #B8895A; --secondary-light: #E0B890; --secondary-rgb: 212, 165, 116; --border: #2A3A30; --border-highlight: #3A4E42; --grid-line: #1A261F; --glow-primary: #6B9F78; --glow-secondary: #D4A574; --glow-opacity: 0.12; --nav-bg: rgba(8, 12, 10, 0.9); } [data-theme="harbor"] { --bg: #12181E; --surface: #1A242E; --surface-raised: #151E26; --text: #EEF3F6; --text-muted: #9AADB8; --brand: #E07A5F; --brand-dim: #C45F45; --brand-light: #E9957E; --brand-dark: #A04832; --brand-rgb: 224, 122, 95; --accent: #E07A5F; --accent-dim: #C45F45; --accent-light: #E9957E; --accent-rgb: 224, 122, 95; --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --success: #81B29A; --success-rgb: 129, 178, 154; --border: #2A3844; --border-highlight: #3A4E5C; --grid-line: #182028; --glow-primary: #E07A5F; --glow-secondary: #F0C94E; --glow-opacity: 0.12; --nav-bg: rgba(10, 14, 18, 0.9); } [data-theme="contrast"] { --bg: #000000; --surface: #121212; --surface-raised: #0A0A0A; --text: #FFFFFF; --text-muted: #D8D8D8; --brand: #FFE566; --brand-dim: #E6C94A; --brand-light: #FFF089; --brand-dark: #C4A820; --brand-rgb: 255, 229, 102; --accent: #FFE566; --accent-dim: #E6C94A; --accent-light: #FFF089; --accent-rgb: 255, 229, 102; --secondary: #FFFFFF; --secondary-dim: #E5E5E5; --secondary-light: #FFFFFF; --secondary-rgb: 255, 255, 255; --success: #FFE566; --success-rgb: 255, 229, 102; --danger: #FF4D6A; --danger-rgb: 255, 77, 106; --warning: #FFE566; --border: #3A3A3A; --border-highlight: #5A5A5A; --grid-line: #1A1A1A; --glow-primary: #FFE566; --glow-secondary: #FFFFFF; --glow-opacity: 0.12; --nav-bg: rgba(0, 0, 0, 0.94); } [data-theme="signal"] { --bg: #140E0C; --surface: #221816; --surface-raised: #1A1210; --text: #F5F0E8; --text-muted: #C4B4A0; --brand: #F0C94E; --brand-dim: #D4AD32; --brand-light: #F5DA7E; --brand-dark: #A8841A; --brand-rgb: 240, 201, 78; --accent: #F0C94E; --accent-dim: #D4AD32; --accent-light: #F5DA7E; --accent-rgb: 240, 201, 78; --secondary: #E11D48; --secondary-dim: #BE123C; --secondary-light: #FB7185; --secondary-rgb: 225, 29, 72; --danger: #E11D48; --danger-rgb: 225, 29, 72; --warning: #F0C94E; --success: #4ADE80; --success-rgb: 74, 222, 128; --border: #3A2A24; --border-highlight: #524038; --grid-line: #1C1412; --glow-primary: #F0C94E; --glow-secondary: #E11D48; --glow-opacity: 0.14; --nav-bg: rgba(12, 8, 6, 0.92); } [data-theme="mist"] { --bg: #EEF2F6; --surface: #FFFFFF; --surface-raised: #E4EAF0; --text: #1A2330; --text-muted: #4A5C6C; --brand: #0F766E; --brand-dim: #115E59; --brand-light: #14B8A6; --brand-dark: #134E4A; --brand-rgb: 15, 118, 110; --accent: #0F766E; --accent-dim: #115E59; --accent-light: #14B8A6; --accent-rgb: 15, 118, 110; --secondary: #B45309; --secondary-dim: #92400E; --secondary-light: #D97706; --secondary-rgb: 180, 83, 9; --success: #15803D; --success-rgb: 21, 128, 61; --danger: #DC2626; --danger-rgb: 220, 38, 38; --warning: #B45309; --border: #C8D2DC; --border-highlight: #A8B6C4; --grid-line: rgba(26, 35, 48, 0.07); --glow-primary: #0F766E; --glow-secondary: #B45309; --glow-opacity: 0.06; --nav-bg: rgba(255, 255, 255, 0.94); } /* ----- Mix-and-match accent overlays (highlight / secondary) ----- */ html[data-accent="gold"] { --secondary: #F0C94E; --secondary-dim: #D4AD32; --secondary-light: #F5DA7E; --secondary-rgb: 240, 201, 78; --glow-secondary: #F0C94E; --warning: #F0C94E; } html[data-accent="amber"] { --secondary: #FBBF24; --secondary-dim: #D97706; --secondary-light: #FCD34D; --secondary-rgb: 251, 191, 36; --glow-secondary: #FBBF24; --warning: #FBBF24; } html[data-accent="crimson"] { --secondary: #E11D48; --secondary-dim: #BE123C; --secondary-light: #FB7185; --secondary-rgb: 225, 29, 72; --glow-secondary: #E11D48; } html[data-accent="coral"] { --secondary: #F07167; --secondary-dim: #D4544A; --secondary-light: #F49B94; --secondary-rgb: 240, 113, 103; --glow-secondary: #F07167; } html[data-accent="lime"] { --secondary: #84CC16; --secondary-dim: #65A30D; --secondary-light: #A3E635; --secondary-rgb: 132, 204, 22; --glow-secondary: #84CC16; } html[data-accent="violet"] { --secondary: #A78BFA; --secondary-dim: #8B5CF6; --secondary-light: #C4B5FD; --secondary-rgb: 167, 139, 250; --glow-secondary: #A78BFA; }