/* ============================================================================ * Design tokens — the single themeable layer for the Uptales marketing site. * * Everything else (base.css, per-page styles) consumes these via var(--…), so * a future dark mode is a matter of overriding this block under a theme * selector — no page CSS needs to change. * * To add dark mode later: * 1. Uncomment the [data-theme="dark"] block below and tune the values. * 2. (Optional) add an @media (prefers-color-scheme: dark) mirror so it * follows the OS by default. * 3. Set data-theme on from a small toggle script. * ========================================================================== */ :root { /* Brand */ --red: #EF2D56; --red-deep: #D91E45; --amber: #F5A623; /* Ink & surfaces (semantic names so dark mode can remap them cleanly) */ --ink: #15151C; /* primary text / dark surfaces */ --white: #FFFFFF; /* page background */ --soft: #FAFAF9; /* subtle raised background */ --gray: #6E6E78; /* secondary text */ --line: #E4E1DD; /* borders / hairlines */ --photo: #E8E5E1; /* image placeholder */ /* Shape */ --radius: 14px; /* Ink-surface companions (promoted from the Masters page design): --mist secondary text on ink surfaces. Raw #C9C9D2 is already hardcoded across homepage/builders ink bands; promoting it makes the planned dark remap possible. --pink-soft eyebrow/label color on ink (homepage .ledger-eyebrow hardcodes it today). --dot the quiet roster-wall dot — one step darker than --line so unnamed Masters register without shouting. --ink-line hairline on ink surfaces (rgba white .16 appears raw in every existing ink band). */ --mist: #C9C9D2; --pink-soft: #F7A8B8; --dot: #D9D5D0; --ink-line: rgba(255, 255, 255, .16); /* Promoted from the How-It-Works redesign: --ink-2 raised card surface on ink bands (stage-05 destination cards, flywheel step pills) — one step lighter than --ink so dark cards read as cards, not holes. --red-tint pale Master fill on light (money highlight column, the ghost income-line numerals) — was raw #FDE7EC. --amber-tint pale Builder fill on light (legend/builder chips, the red closer's builder label) — was raw #FDF0DC. --amber-deep AA-safe small Builder labels on light. Raw #9A5E06 is already hardcoded by homepage + the old how-it-works; promoting it makes it official. */ --ink-2: #1F1F28; --red-tint: #FDE7EC; --amber-tint: #FDF0DC; --amber-deep: #9A5E06; } /* Dark-mode starter values, in :root order: ink/white/soft/gray/line/photo, * then the ink-surface companions (mist, pink-soft, dot, ink-line) and the * how-it-works set (ink-2, red-tint, amber-tint, amber-deep). * NOTE: keep this block free of nested comments — an inner star-slash * terminates the outer comment and turns the @media block below into LIVE * CSS (this actually happened; dark-OS visitors got a half-finished theme). */ /* :root[data-theme="dark"] { --ink: #F4F4F6; --white: #121218; --soft: #1B1B22; --gray: #A2A2AD; --line: #2A2A33; --photo: #24242C; --mist: #5A5A64; --pink-soft: #B8455C; --dot: #34343E; --ink-line: rgba(0, 0, 0, .16); --ink-2: #E8E8EC; --red-tint: #3A1520; --amber-tint: #33270F; --amber-deep: #E0A33C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F4F4F6; --white: #121218; --soft: #1B1B22; --gray: #A2A2AD; --line: #2A2A33; --photo: #24242C; --mist: #5A5A64; --pink-soft: #B8455C; --dot: #34343E; --ink-line: rgba(0, 0, 0, .16); --ink-2: #E8E8EC; --red-tint: #3A1520; --amber-tint: #33270F; --amber-deep: #E0A33C; } } */