/* ============================================================================ CALDARIUM — THEME TOKENS Every colour on the site is defined here. index.html contains no raw hex values; it references these variables only. Change a value here and it updates everywhere it is used. HOW TO SWITCH THE ACCENT COLOUR ------------------------------- Presets for the four explored directions are at the bottom of this file. To use one, add a data-theme attribute to the tag in index.html: cooler, clinical/tech warmer, more urgent/human premium, distinct from competitors (no attribute) = signal green, the default HOW TO SOFTEN THE BACKGROUND ("white is too bright") ---------------------------------------------------- Change --white below. It drives the page background and every light surface. Suggested off-whites: #fafaf8 warm off-white #f8f9fa cool off-white #f7f7f5 paper If you want cards to stay pure white while the page softens, set --white to the off-white and leave --surface-1 / --surface-2 as they are. ============================================================================ */ :root { /* ========================================================================== 1. QUICK EDITS — the handful that actually change the look of the site ========================================================================== */ --white: #ffffff; /* page + card backgrounds (27 uses) */ --accent: #00ff7d; /* signal green: buttons, rules, highlights */ --accent-deep: #0a7a44; /* links and green text on light */ --text-heading: #1d1d1f; /* headlines (40 uses) */ --text-body: #5c5c60; /* paragraph copy (29 uses) */ --text-default: #414042; /* default colour */ --border: #ececee; /* hairlines and card borders (19 uses) */ /* ========================================================================== 2. ACCENT SCALE — green family ========================================================================== */ --accent-rgb: 0,255,125; /* used by rgba() glows and rings */ --accent-hover: #00e671; /* button hover */ --accent-soft: #6dffb5; /* light green borders */ --accent-mid: #a9f5cd; --accent-pale: #d5f5e3; --accent-tint: #dbffec; /* hero radial gradient */ --accent-tint-rgb: 219,255,236; --accent-wash: #eafff4; /* very light green fills */ --accent-wash-2: #eafff3; --accent-wash-3: #f6fffb; --accent-wash-4: #f4fff9; --accent-deep-hover: #00b358; /* link hover */ --accent-deep-rgb: 10,122,68; --accent-darkest: #0d3b23; /* text on a green fill */ --accent-shadow-rgb: 10,80,45; /* green-tinted shadows */ /* ========================================================================== 3. NEUTRAL RAMP — lightest to darkest ========================================================================== */ --white-rgb: 255,255,255; --surface-1: #f7f7f8; /* subtle section background */ --surface-2: #f4f4f5; /* also used as light text on dark panels */ --surface-3: #e8e9ea; --border-2: #e3e4e6; --border-3: #d5d6d8; /* light text sitting on dark panels */ --on-dark-1: #c6c7c9; --on-dark-2: #bbbdbf; --on-dark-3: #b7b8bb; --text-placeholder: #a9abae; /* input::placeholder */ --text-faint: #a5a7aa; --text-meta: #9a9b9e; --text-meta-2: #98999c; /* mono labels, captions */ --text-muted: #808184; --text-muted-2: #6f6f73; /* dark UI fills — mock chrome, skeleton bars, dark panels */ --fill-dark-1: #4a4a4e; --fill-dark-2: #45454a; --fill-dark-3: #39393d; --fill-dark-4: #2c2c2f; --fill-dark-5: #2a2a2c; --fill-dark-6: #232326; --ink-1: #1d1d20; --ink-2: #1a1a1d; --ink-3: #161618; /* text on a green button, ::selection */ --ink-4: #131315; /* darkest surface */ --ink-rgb: 30,30,32; --ink-deep-rgb: 20,20,22; --ink-deepest-rgb: 19,19,21; --hairline-rgb: 20,20,22; /* nav bottom hairline — inverts on dark */ --shadow-rgb: 0,0,0; /* all drop shadows */ /* ========================================================================== 4. AMBER — secondary accent (warnings, denial states, contrast rows) ========================================================================== */ --amber: #f0b04a; --amber-soft: #eec79a; --amber-pale: #f0d9ad; --amber-tint: #fbe9d4; --amber-tint-rgb: 253,233,212; --amber-wash: #fdf3e0; --amber-wash-rgb: 253,243,224; --amber-deep: #8a4a06; --amber-darkest: #7a5410; --amber-darker: #3d2a05; } /* ============================================================================ 5. ACCENT PRESETS Each block overrides only the accent family. Neutrals, amber and typography stay identical, so switching is a one-word change on . ============================================================================ */ /* --- ICE BLUE — cooler, clinical/tech feel ------------------------------- */ [data-theme="ice"] { --accent: #38a1ff; --accent-rgb: 56,161,255; --accent-hover: #1f8ff5; --accent-soft: #9ecfff; --accent-mid: #c7e4ff; --accent-pale: #dcefff; --accent-tint: #dbeeff; --accent-tint-rgb: 219,238,255; --accent-wash: #eaf5ff; --accent-wash-2: #e9f4ff; --accent-wash-3: #f6fbff; --accent-wash-4: #f4faff; --accent-deep: #0a5a9e; --accent-deep-hover: #0070c9; --accent-deep-rgb: 10,90,158; --accent-darkest: #0d2b47; --accent-shadow-rgb: 10,45,80; } /* --- CORAL PULSE — warmer, more urgent/human ------------------------------ */ [data-theme="coral"] { --accent: #ff6b4a; --accent-rgb: 255,107,74; --accent-hover: #f4573a; --accent-soft: #ffab96; --accent-mid: #ffcabb; --accent-pale: #ffdfd6; --accent-tint: #ffe4dc; --accent-tint-rgb: 255,228,220; --accent-wash: #fff0eb; --accent-wash-2: #fff0ea; --accent-wash-3: #fffaf8; --accent-wash-4: #fff8f6; --accent-deep: #b03a1c; --accent-deep-hover: #cf4522; --accent-deep-rgb: 176,58,28; --accent-darkest: #4a1a0d; --accent-shadow-rgb: 80,30,15; } /* --- VIOLET SIGNAL — premium, distinct from competitors ------------------- */ [data-theme="violet"] { --accent: #9b6dff; --accent-rgb: 155,109,255; --accent-hover: #8a56f5; --accent-soft: #c9b0ff; --accent-mid: #ded0ff; --accent-pale: #ebe3ff; --accent-tint: #ece4ff; --accent-tint-rgb: 236,228,255; --accent-wash: #f3eeff; --accent-wash-2: #f3edff; --accent-wash-3: #fbf9ff; --accent-wash-4: #f9f7ff; --accent-deep: #5b2fb3; --accent-deep-hover: #6f3ed1; --accent-deep-rgb: 91,47,179; --accent-darkest: #2b1550; --accent-shadow-rgb: 45,25,80; } /* ============================================================================ 6. SOFT LIGHT — answers the "white is too bright" note without going dark. Use with (combine with an accent by editing the :root values instead, or duplicate this block under the accent you pick). ============================================================================ */ [data-theme="soft"] { --white: #fafaf8; /* page + surfaces drop off pure white */ --surface-1: #f4f4f1; --surface-2: #f0f0ed; --border: #e6e6e2; --text-heading: #22221f; --text-body: #55554f; } /* ============================================================================ 7. DARK — "Option A", signal green on dark. CURRENTLY ACTIVE. Set on the tag in index.html: Remove that attribute to go back to the original light theme. Reading this block: the tokens are grouped by what has to happen to them when the page inverts. Tokens that were ALREADY light-on-dark (--surface-2, --surface-3, --on-dark-*) are deliberately absent — they were correct as-is and overriding them would break the text they colour. ============================================================================ */ [data-theme="dark"] { /* --- page and surfaces: were the light end of the ramp, now the dark end - */ --white: #0f0f11; /* page + card backgrounds */ --white-rgb: 15,15,17; /* translucent nav bar */ --surface-1: #16161a; /* subtle section background */ --border: #26262b; /* hairlines and card borders */ --border-2: #2e2e34; --border-3: #3a3a41; --hairline-rgb: 255,255,255; /* nav underline flips to light */ /* --- text: was dark-on-light, now light-on-dark ------------------------- */ --text-heading: #f5f5f7; --text-body: #a8a9ad; --text-default: #b8b9bd; --text-muted: #8a8b8f; --text-muted-2: #97989c; --text-meta: #7e7f83; --text-meta-2: #808184; --text-faint: #7c7d81; --text-placeholder: #5c5c60; /* --- dark panels: lifted slightly so they still separate from the page --- */ --ink-4: #17171a; --ink-2: #1c1c20; --ink-1: #1f1f24; --fill-dark-6: #26262b; --fill-dark-5: #2c2c31; --fill-dark-4: #34343a; --fill-dark-3: #3c3c42; --fill-dark-2: #48484e; --fill-dark-1: #4d4d53; --on-dark-2: #4a4a51; /* mock-UI border, was near-white */ /* --- accent: green fills stay, but green TEXT has to lighten ------------ */ --accent: #00ff7d; /* unchanged — the brand green */ --accent-hover: #4dffa3; --accent-deep: #4dffa3; /* links: #0a7a44 is invisible on dark */ --accent-deep-hover: #8affc4; --accent-deep-rgb: 77,255,163; --accent-mid: #1f6b45; /* light-green borders become deep green */ --accent-pale: #17593a; --accent-tint: #0b2b1c; /* hero glow + green fills */ --accent-tint-rgb: 11,43,28; --accent-wash: #0d2b1e; --accent-wash-2: #0d2b1e; --accent-wash-3: #0a1f16; --accent-wash-4: #0a1f16; --accent-shadow-rgb: 0,255,125; /* --accent-soft, --accent-darkest, --ink-3 unchanged: they already sit on a green fill, so their contrast is independent of the page background */ /* --- amber: same treatment, fills darken and text lightens -------------- */ --amber-tint: #2e2312; --amber-tint-rgb: 46,35,18; --amber-wash: #261d0f; --amber-wash-rgb: 38,29,15; --amber-soft: #7a5a2a; --amber-pale: #6b4d22; --amber-deep: #f0b04a; --amber-darkest: #e8c98a; --amber-darker: #f5dfae; /* --- shadows read as pure black on a dark page -------------------------- */ --ink-rgb: 0,0,0; --ink-deep-rgb: 0,0,0; --ink-deepest-rgb: 5,5,6; }