/* ==========================================================================
TOKENS - design tokens: colors, typography, spacing, radii, shadows,
transitions, and reusable CSS custom properties (light + dark theme).
Extracted from the original single style.css - see git history for the
pre-split file if you need to compare.
========================================================================== */
/* Fonts (Archivo Black, Inter, IBM Plex Mono, Poppins) are loaded via
+ tags in each page's
, not via @import here - @import blocks font discovery until
this whole file is fetched and parsed first, adding an avoidable
round-trip before any font request even starts. */
:root {
--black: #0d0d0f;
--charcoal: #17171a;
--charcoal-2: #212124;
--yellow: #ffc629;
--yellow-dark: #e0a800;
--white: #ffffff;
--off-white: #f7f5ef;
--grey: #6e6e73;
--line: #2a2a2e;
--green: #1fae5c;
--red: #e5484d;
/* Semantic tokens that flip between light and dark mode. Everything
above is a fixed brand color (the yellow accent, network colors, the
header/footer which are always dark regardless of theme); everything
below is what actually changes when [data-theme="dark"] is set on
. Components should use these for page backgrounds, card
surfaces, borders and default text so theming stays centralized here
instead of scattered across every rule. */
--bg: var(--off-white);
--surface: var(--white);
--surface-border: #eae7dd;
--text: var(--black);
--glass-bg: rgba(255, 255, 255, 0.94);
--glass-border: rgba(255, 255, 255, 0.85);
--glass-text: var(--black);
--glass-text-soft: rgba(13, 13, 15, 0.72);
--font-display: "Archivo Black", "Inter", sans-serif;
--font-body: "Inter", -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", monospace;
--font-numeric: "Poppins", "Inter", sans-serif;
--radius: 14px;
--shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
:root[data-theme="dark"] {
--bg: #121214;
--surface: #1c1c1f;
--surface-border: rgba(255, 255, 255, 0.1);
--text: #f2f1ec;
--shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
--glass-bg: rgba(23, 23, 26, 0.94);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-text: #f2f1ec;
--glass-text-soft: rgba(242, 241, 236, 0.75);
/* --grey needs a different value per theme, unlike the fixed brand
colors above it: the lighter shade in the base :root (#6e6e73, chosen
to pass contrast against light backgrounds) would only score ~3.3:1-
3.7:1 against dark-mode's dark backgrounds - too low. The original,
lighter grey already had good contrast here (5.45:1/4.95:1), so dark
mode keeps it rather than inheriting the light-mode-tuned value. */
--grey: #8a8a8f;
}
/* ---------- header ---------- *//* Header surface flips with the site theme (unlike the fixed dark
mobile-sheet/footer) - light, softly-frosted white by default;
dark glass once data-theme="dark" is set. */
:root {
--header-bg: rgba(255, 255, 255, 0.82);
}
:root[data-theme="dark"] {
--header-bg: rgba(23, 23, 26, 0.92);
}