/* ============================================================================ tokens.css — the single source of colour, type and motion for the page. ---------------------------------------------------------------------------- Two complete themes. Dark is the default look; light is a real second design, not a filter over the first. Resolution order: 1. :root -> dark values 2. prefers-color-scheme:light -> light values, for devices set to light 3. [data-theme="light|dark"] -> the toggle, which must beat the media query in BOTH directions Two rules the palette exists to protect: - THE CTA IS THE ONLY LIME PIXEL ON THE PAGE. Nothing else may use --cta. On the bone background lime measures 1.23:1 and disappears, so the light theme swaps the CTA to deep forest rather than tinting the lime. - RED IS ONLY EVER TOXICITY. Never errors, never emphasis. That way red always means "this can hurt something you love". ========================================================================= */ @property --sweep-pos { syntax: ''; inherits: false; initial-value: -20%; } :root { /* ---- dark: forest ground -------------------------------------------- */ --bg: #0B1F17; --bg-deep: #071510; --bg-alt: #0C241A; /* alternating band */ --surface: #17352A; --surface-2: #1E4033; --surface-soft: rgba(23, 53, 42, .42); --line: #2A4A38; --line-soft: rgba(42, 74, 56, .6); --tx: #FFFFFF; /* 17.18:1 on --bg */ --tx-2: #A8C0AE; /* 8.85:1 */ --tx-3: #95AEA0; /* 4.81:1 even on --surface-2, the lightest dark ground */ --accent: #34D399; /* every decorative green: icons, eyebrows, rules */ --accent-soft: #A7F3D0; --accent-tint: rgba(52, 211, 153, .10); --accent-edge: rgba(52, 211, 153, .24); --cta: #D6F25B; /* 13.67:1 on --bg. CTA ONLY. */ --cta-hover: #E4FA85; --cta-ink: #0B1F17; /* 14.51:1 on --cta */ --cta-glow: rgba(214, 242, 91, .45); --amber: #E8B04B; /* stat numbers, streak */ --gold: #E8C766; /* premium, and never a button */ --water: #54B4E6; --sun: #F2A93B; --ai: #A99CFF; --safe: #79D19C; --mild: #F0BE6B; --toxic: #F0705A; --toxic-wash: rgba(240, 112, 90, .09); --toxic-edge: rgba(240, 112, 90, .30); /* pills keep their own bg/fg pair so contrast holds inside the pill */ --pill-safe-bg: #123024; --pill-safe-tx: #A7F3D0; /* 11.11:1 */ --pill-mild-bg: #2E240D; --pill-mild-tx: #FFD489; /* 10.94:1 */ --pill-tox-bg: #2E1414; --pill-tox-tx: #FFB3B3; /* 10.07:1 */ --grain-opacity: .035; --grain-blend: overlay; --pollen: 196, 232, 140; --glow-1: rgba(62, 142, 90, .20); --glow-2: rgba(214, 242, 91, .085); --shadow-lift: 0 14px 34px -14px rgba(0, 0, 0, .7); --shadow-device: 0 60px 110px -34px rgba(0, 0, 0, .9); --scheme: dark; /* ---- type ------------------------------------------------------------ */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ---- motion ---------------------------------------------------------- */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); /* ---- layout ---------------------------------------------------------- */ --shell: min(1180px, 100% - 44px); --nav-h: 64px; --bar-h: 68px; } /* -------------------------------------------------------------------------- Light: warm bone paper, not a grey inversion. Greens darken until they carry text weight; the CTA becomes forest because lime cannot. ----------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F5F1E8; --bg-deep: #EDE7DA; --bg-alt: #F0EBE0; --surface: #FFFFFF; --surface-2: #F8F5EE; --surface-soft: rgba(255, 255, 255, .72); --line: #E0D9C9; --line-soft: rgba(224, 217, 201, .8); --tx: #0B1F17; /* 15.24:1 on --bg */ --tx-2: #46584C; /* 7.01:1 */ --tx-3: #57685D; /* 4.81:1 even on --bg-deep, the darkest light ground */ --accent: #0E7A50; /* #34D399 is 1.9:1 on bone and unusable */ --accent-soft: #0A5C3C; --accent-tint: rgba(14, 122, 80, .08); --accent-edge: rgba(14, 122, 80, .22); --cta: #14432B; /* 9.98:1 on bone */ --cta-hover: #0F3521; --cta-ink: #F5F1E8; --cta-glow: rgba(20, 67, 43, .28); --amber: #8A5B05; --gold: #63490C; --water: #155C82; --sun: #855400; --ai: #5344C8; --safe: #0A6B3F; --mild: #7A4E05; --toxic: #A8291B; --toxic-wash: rgba(168, 41, 27, .06); --toxic-edge: rgba(168, 41, 27, .22); --pill-safe-bg: #DCF3EA; --pill-safe-tx: #085034; /* 8.18:1 */ --pill-mild-bg: #FCF0D8; --pill-mild-tx: #6B4100; /* 7.81:1 */ --pill-tox-bg: #FDECEC; --pill-tox-tx: #9E1B14; /* 7.02:1 */ --grain-opacity: .05; --grain-blend: multiply; --pollen: 20, 67, 43; --glow-1: rgba(14, 122, 80, .10); --glow-2: rgba(166, 106, 0, .07); --shadow-lift: 0 14px 30px -16px rgba(20, 40, 28, .3); --shadow-device: 0 50px 90px -32px rgba(20, 40, 28, .42); --scheme: light; } } /* The explicit toggle wins over the media query, in both directions. */ :root[data-theme="light"] { --bg:#F5F1E8; --bg-deep:#EDE7DA; --bg-alt:#F0EBE0; --surface:#FFFFFF; --surface-2:#F8F5EE; --surface-soft:rgba(255,255,255,.72); --line:#E0D9C9; --line-soft:rgba(224,217,201,.8); --tx:#0B1F17; --tx-2:#46584C; --tx-3:#57685D; --accent:#0E7A50; --accent-soft:#0A5C3C; --accent-tint:rgba(14,122,80,.08); --accent-edge:rgba(14,122,80,.22); --cta:#14432B; --cta-hover:#0F3521; --cta-ink:#F5F1E8; --cta-glow:rgba(20,67,43,.28); --amber:#8A5B05; --gold:#63490C; --water:#155C82; --sun:#855400; --ai:#5344C8; --safe:#0A6B3F; --mild:#7A4E05; --toxic:#A8291B; --toxic-wash:rgba(168,41,27,.06); --toxic-edge:rgba(168,41,27,.22); --pill-safe-bg:#DCF3EA; --pill-safe-tx:#085034; --pill-mild-bg:#FCF0D8; --pill-mild-tx:#6B4100; --pill-tox-bg:#FDECEC; --pill-tox-tx:#9E1B14; --grain-opacity:.05; --grain-blend:multiply; --pollen:20,67,43; --glow-1:rgba(14,122,80,.10); --glow-2:rgba(166,106,0,.07); --shadow-lift:0 14px 30px -16px rgba(20,40,28,.3); --shadow-device:0 50px 90px -32px rgba(20,40,28,.42); --scheme:light; } :root[data-theme="dark"] { --bg:#0B1F17; --bg-deep:#071510; --bg-alt:#0C241A; --surface:#17352A; --surface-2:#1E4033; --surface-soft:rgba(23,53,42,.42); --line:#2A4A38; --line-soft:rgba(42,74,56,.6); --tx:#FFFFFF; --tx-2:#A8C0AE; --tx-3:#95AEA0; --accent:#34D399; --accent-soft:#A7F3D0; --accent-tint:rgba(52,211,153,.10); --accent-edge:rgba(52,211,153,.24); --cta:#D6F25B; --cta-hover:#E4FA85; --cta-ink:#0B1F17; --cta-glow:rgba(214,242,91,.45); --amber:#E8B04B; --gold:#E8C766; --water:#54B4E6; --sun:#F2A93B; --ai:#A99CFF; --safe:#79D19C; --mild:#F0BE6B; --toxic:#F0705A; --toxic-wash:rgba(240,112,90,.09); --toxic-edge:rgba(240,112,90,.30); --pill-safe-bg:#123024; --pill-safe-tx:#A7F3D0; --pill-mild-bg:#2E240D; --pill-mild-tx:#FFD489; --pill-tox-bg:#2E1414; --pill-tox-tx:#FFB3B3; --grain-opacity:.035; --grain-blend:overlay; --pollen:196,232,140; --glow-1:rgba(62,142,90,.20); --glow-2:rgba(214,242,91,.085); --shadow-lift:0 14px 34px -14px rgba(0,0,0,.7); --shadow-device:0 60px 110px -34px rgba(0,0,0,.9); --scheme:dark; } /* Native form controls and scrollbars follow the resolved theme. */ :root { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light } } :root[data-theme="light"] { color-scheme: light } :root[data-theme="dark"] { color-scheme: dark }