/* Echo Digital design tokens: two full themes, one switch. ============================================================================ HOW TO SWITCH THEMES (internal use, not shown to site visitors) ============================================================================ Open index.html and find this line near the top: Change "dark" to "light" (or back) and refresh. That is the whole switch. Every color on the page is a variable defined below, so nothing else needs to change. There is also a small floating button on the page itself that does the same thing for convenience while you compare the two. It is clearly marked as an internal preview tool. Once you have picked a theme, delete it: see the "REMOVE BEFORE SHIPPING" comment block at the bottom of index.html and in js/main.js. ============================================================================ Every component rule in styles.css reads color through a var(--token). The two blocks below are the only place color values are written down. That is what makes the swap total: no component rule needs to know which theme is active. */ :root { color-scheme: dark; /* Surfaces, darkest to lightest. */ --ink: #0b0710; --ink-2: #120c1a; --ink-3: #1a1024; /* Text. */ --fg: #f6f2f8; --muted: #a396ad; /* Hairlines and borders. */ --line: rgb(255 255 255 / 0.1); --line-soft: rgb(255 255 255 / 0.08); /* Brand identity, constant across both themes. */ --brand: #961eb4; --brand-2: #fe007c; /* Two calibrated gradient variants, per theme, because the same brand hue needs to sit at opposite ends of the lightness scale to read against opposite backgrounds. grad-surface: a filled brand surface carrying white text (buttons, the closing band). Worst point contrasts 6.9:1 against white, so this one gradient clears WCAG AA in both themes without changing. grad-text: the foreground headline gradient, applied via background-clip: text. This one DOES need to differ: light, vivid stops read against dark ink; the same stops would wash out against a light page, so light theme gets deeper, more saturated stops instead. */ --grad-surface: linear-gradient(100deg, #7a1595 0%, #b0006a 100%); --grad-text: linear-gradient(100deg, #c24fe0 0%, #fe007c 100%); /* Ghost (secondary) button. */ --ghost-border: rgb(255 255 255 / 0.2); --ghost-border-hover: rgb(255 255 255 / 0.4); --ghost-bg: rgb(255 255 255 / 0.04); --ghost-bg-hover: rgb(255 255 255 / 0.08); /* Logos in /logos are pre-flattened to solid white ink on transparent, to read as one system on a dark page. See --logo-filter below for how the light theme recolors them without new asset files. */ --logo-filter: none; /* Page grain. Same texture, same low opacity, both themes; see the note above .grain in styles.css. */ --grain-opacity: 0.35; } /* Light theme overrides. Every token above gets a light-appropriate value. Nothing outside this block and :root should ever hold a literal color. */ :root[data-theme="light"] { color-scheme: light; --ink: #faf9fc; --ink-2: #f2eff6; --ink-3: #eae4f0; --fg: #191420; --muted: #665e70; --line: rgb(25 20 32 / 0.12); --line-soft: rgb(25 20 32 / 0.08); --brand: #961eb4; --brand-2: #fe007c; --grad-surface: linear-gradient(100deg, #7a1595 0%, #b0006a 100%); --grad-text: linear-gradient(100deg, #7a1595 0%, #c4006b 100%); --ghost-border: rgb(25 20 32 / 0.16); --ghost-border-hover: rgb(25 20 32 / 0.32); --ghost-bg: rgb(25 20 32 / 0.03); --ghost-bg-hover: rgb(25 20 32 / 0.06); /* These logo files are solid white ink on transparent alpha. Inverting the RGB channels turns white ink into black ink and leaves the transparent background untouched, so every logo recolors correctly for a light page with zero new image files. */ --logo-filter: invert(1); --grain-opacity: 0.22; }