/* Accent theme overrides — structural + accent tokens on */ /* ───────────────────────────────────────────────────────────────────────────── COPPER — Warm earth, burnished metal, premium feel ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="copper"] { --accent: #C07830; --copper: #C07830; --copper-hover: #A35F20; --copper-active: #864D18; --copper-active-gradient: #B06A28; --copper-light: #FEF2E4; --copper-border: #EDBD8C; --copper-rgb: 192,120,48; --copper-shadow: rgba(192,120,48,0.30); --copper-bg-subtle: rgba(192,120,48,0.08); --copper-border-subtle: rgba(192,120,48,0.30); --copper-contrast: #fff; --forest: #1F4035; --forest-dark: #162D26; --forest-mid: #28503F; --forest-light: #EAF3EF; --forest-border: #A4C8BC; --forest-rgb: 31, 64, 53; --sage: #8DB09F; --sage-bg: #F0F5F2; --bg: #F8FAF9; --charcoal: #1C2820; --text-body: #324038; --text-muted: #617068; --text-light: #96A8A2; --border: #D9E5E0; --border-dark: #BFCEC9; } /* ───────────────────────────────────────────────────────────────────────────── SIGNAL GREEN — High-energy lime, industrial vitality ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="signal-green"] { --accent: #6AAD0C; --copper: #6AAD0C; --copper-hover: #518A08; --copper-active: #3E6B06; --copper-active-gradient: #5A9D0A; --copper-light: #EBF6D4; --copper-border: #B0D86A; --copper-rgb: 106,173,12; --copper-shadow: rgba(106,173,12,0.28); --copper-bg-subtle: rgba(106,173,12,0.08); --copper-border-subtle: rgba(106,173,12,0.28); --copper-contrast: #fff; --forest: #3D6610; --forest-dark: #2E4E0C; --forest-mid: #4A7A14; --forest-light: #EFF8E2; --forest-border: #BADA88; --forest-rgb: 61, 102, 16; --sage: #B8D48C; --sage-bg: #F3F9EA; --bg: #F7FBF0; --charcoal: #1E3008; --text-body: #2E4A10; --text-muted: #4E6030; --text-light: #7A8E58; --border: #DAEEC0; --border-dark: #C8E0A0; } /* ───────────────────────────────────────────────────────────────────────────── STEEL BLUE — Trust, precision, industrial-corporate cool ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="steel-blue"] { --accent: #2464A0; --copper: #2464A0; --copper-hover: #1C5288; --copper-active: #154070; --copper-active-gradient: #1E5A98; --copper-light: #E0EEFA; --copper-border: #7CB4E4; --copper-rgb: 36,100,160; --copper-shadow: rgba(36,100,160,0.28); --copper-bg-subtle: rgba(36,100,160,0.08); --copper-border-subtle: rgba(36,100,160,0.28); --copper-contrast: #fff; --forest: #1A4E7A; --forest-dark: #133D60; --forest-mid: #205A8A; --forest-light: #E2EDF6; --forest-border: #96BDD9; --forest-rgb: 26, 78, 122; --sage: #94B8D4; --sage-bg: #EAF0F8; --bg: #EFF4FA; --charcoal: #0E2C44; --text-body: #1A3D5C; --text-muted: #3E5870; --text-light: #6A8AA0; --border: #C8D8E8; --border-dark: #AABFD4; } /* ───────────────────────────────────────────────────────────────────────────── PURE WHITE — Minimal, clean, light-mode purity with soft sage accents ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="pure-white"] { --accent: #4A8040; --copper: #4A8040; --copper-hover: #3A6832; --copper-active: #2E5228; --copper-active-gradient: #427238; --copper-light: #EEF6EC; --copper-border: #A8D0A0; --copper-rgb: 74,128,64; --copper-shadow: rgba(74,128,64,0.20); --copper-bg-subtle: rgba(74,128,64,0.06); --copper-border-subtle: rgba(74,128,64,0.22); --copper-contrast: #fff; --forest: #3A6832; --forest-dark: #2E5228; --forest-mid: #447A3A; --forest-light: #EAF4E8; --forest-border: #A4CCAC; --forest-rgb: 58, 104, 50; --sage: #A8C8A8; --sage-bg: #F2F8F2; --bg: #FFFFFF; --charcoal: #1A261C; --text-body: #243624; --text-muted: #506050; --text-light: #8A9E8A; --border: #E0EAE0; --border-dark: #C8D8C8; } /* ───────────────────────────────────────────────────────────────────────────── CHARCOAL — True dark mode: near-black backgrounds, light text, copper pop ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="charcoal"] { --accent: #C07830; --copper: #C07830; --copper-hover: #A35F20; --copper-active: #864D18; --copper-active-gradient: #B06A28; --copper-light: #3A2810; --copper-border: #7A5030; --copper-rgb: 192,120,48; --copper-shadow: rgba(192,120,48,0.40); --copper-bg-subtle: rgba(192,120,48,0.12); --copper-border-subtle: rgba(192,120,48,0.35); --copper-contrast: #fff; --forest: #A8B4B0; --forest-dark: #0C0F0E; --forest-mid: #2A2E2C; --forest-light: #1E2420; --forest-border: #3A4040; --forest-rgb: 168, 180, 176; --sage: #5A6460; --sage-bg: #181E1C; --bg: #111614; --charcoal: #E8EAE9; --text-body: #D4D8D6; --text-muted: #8C9490; --text-light: #5A6460; --border: #2C3430; --border-dark: #3A4440; } /* ───────────────────────────────────────────────────────────────────────────── AMBER — Rich golden harvest, warm russet, autumn depth ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="amber"] { --accent: #D47A10; --copper: #D47A10; --copper-hover: #B4660C; --copper-active: #945008; --copper-active-gradient: #C07010; --copper-light: #FEF2DC; --copper-border: #EAB86C; --copper-rgb: 212,122,16; --copper-shadow: rgba(212,122,16,0.30); --copper-bg-subtle: rgba(212,122,16,0.09); --copper-border-subtle: rgba(212,122,16,0.30); --copper-contrast: #fff; --forest: #945010; --forest-dark: #743E0C; --forest-mid: #A85E14; --forest-light: #FAF0E0; --forest-border: #E8C080; --forest-rgb: 148, 80, 16; --sage: #D4A868; --sage-bg: #FCF5E8; --bg: #FDF9F0; --charcoal: #3C2008; --text-body: #503010; --text-muted: #705030; --text-light: #9A7850; --border: #F0E0C0; --border-dark: #E8D0A0; } /* ───────────────────────────────────────────────────────────────────────────── HI-VIS YELLOW — Electric safety yellow on deep charcoal, ultra-high contrast ───────────────────────────────────────────────────────────────────────────── */ [data-theme-accent="hi-vis"] { --accent: #F0C800; --copper: #F0C800; --copper-hover: #D4AE00; --copper-active: #B89400; --copper-active-gradient: #E0B800; --copper-light: #FFF8CC; --copper-border: #F5E060; --copper-rgb: 240,200,0; --copper-shadow: rgba(240,200,0,0.40); --copper-bg-subtle: rgba(240,200,0,0.12); --copper-border-subtle: rgba(240,200,0,0.40); --copper-contrast: #1A1A00; --forest: #2A2A00; --forest-dark: #1A1A00; --forest-mid: #3A3A00; --forest-light: #FFFAE0; --forest-border: #F0DC60; --forest-rgb: 42, 42, 0; --sage: #D4C050; --sage-bg: #FFFCE8; --bg: #FFFEF0; --charcoal: #1A1800; --text-body: #252200; --text-muted: #5A5420; --text-light: #8A8040; --border: #F0E880; --border-dark: #E0D460; } /* ── Swatch dot colours ───────────────────────────────────────────────────── */ .theme-grid__swatch[data-accent="copper"] { background: #C07830; } .theme-grid__swatch[data-accent="signal-green"] { background: #6AAD0C; } .theme-grid__swatch[data-accent="steel-blue"] { background: #2464A0; } .theme-grid__swatch[data-accent="pure-white"] { background: #4A8040; } .theme-grid__swatch[data-accent="charcoal"] { background: #2A2E2C; border: 1px solid rgba(255,255,255,0.15); } .theme-grid__swatch[data-accent="amber"] { background: #D47A10; } .theme-grid__swatch[data-accent="hi-vis"] { background: #F0C800; border: 1px solid rgba(0,0,0,0.12); }