/* * tokens.css — xyzcat.fyi design tokens * ───────────────────────────────────── * This file contains ONLY variables (design tokens). * No layout, no components, no visual rules here. * * Colour source: Flexoki palette by Steph Ango * https://stephango.com/flexoki — MIT licence * * How theming works: * - By default, the theme matches the visitor's OS preference * (dark OS = dark site, light OS = light site). * - The toggle button in the header overrides this by setting * a `data-theme` attribute on the element. * - CSS reads that attribute and applies the correct token set. * - The choice is saved to localStorage so it persists on reload. * * Accent colour: `ye` (yellow) — xyzcat-site's identifier in the ecosystem. * Other accents: gr = Moolah, cy = Privacy Audit, pu = Hub. */ /* ── DARK THEME (default) ─────────────────────────────────────────────────── */ /* * Applied when: * - OS is set to dark mode (via prefers-color-scheme) * - OR the user has manually selected dark via the toggle * (data-theme="dark" on ) */ :root, [data-theme="dark"] { /* Backgrounds */ --bg: #100F0F; /* Flexoki Black — main page background */ --bg-card: #1C1B1A; /* Flexoki 950 — card/surface background */ /* Borders */ --border: #282726; /* Flexoki 900 — subtle dividers and card edges */ /* Text hierarchy — from brightest to most faded */ --text-primary: #CECDC3; /* Flexoki 200 — headings, card titles */ --text-body: #B7B5AC; /* Flexoki 300 — body copy */ --text-muted: #878580; /* Flexoki 500 — secondary labels, descriptions */ --text-faint: #575653; /* Flexoki 600 — timestamps, section labels */ /* Accent — ye (yellow), xyzcat-site identifier */ --accent: #AD8301; /* Flexoki ye-dark — used for hover, focus, highlights */ } /* ── LIGHT THEME ──────────────────────────────────────────────────────────── */ /* * Applied when: * - OS is set to light mode (via prefers-color-scheme) * - OR the user has manually selected light via the toggle * (data-theme="light" on ) */ @media (prefers-color-scheme: light) { :root { --bg: #FFFCF0; /* Flexoki Paper — warm off-white, not harsh white */ --bg-card: #F2F0E5; /* Flexoki 50 — slightly darker surface for cards */ --border: #E6E4D9; /* Flexoki 100 — light, soft borders */ --text-primary: #100F0F; /* Flexoki Black — strong headings */ --text-body: #282726; /* Flexoki 900 — readable body text */ --text-muted: #6F6E69; /* Flexoki 500-light — secondary labels */ --text-faint: #B7B5AC; /* Flexoki 300 — section labels, timestamps */ --accent: #AD8301; /* ye — same yellow works in both themes */ } } [data-theme="light"] { /* Same values as above — needed so the manual toggle overrides even when OS is in dark mode */ --bg: #FFFCF0; --bg-card: #F2F0E5; --border: #E6E4D9; --text-primary: #100F0F; --text-body: #282726; --text-muted: #6F6E69; --text-faint: #B7B5AC; --accent: #AD8301; } /* ── SHARED TOKENS ────────────────────────────────────────────────────────── */ /* * These don't change between themes — they're structural constants. */ :root { /* Typography */ --font-prose: "Outfit", sans-serif; /* Headings, body, UI text */ --font-mono: "DM Mono", monospace; /* Code, labels, tags, nav links */ /* Layout */ --radius: 8px; /* Border radius used on cards, buttons, nav pills */ --max-w: clamp(600px, 90vw, 860px); /* Fluid width — min 600px, max 860px */ }