/* * Design tokens: typefaces, color palette, spacing and type scale. * Load this before every other stylesheet except normalize.css. */ /* ========================================================================== Tokens ========================================================================== */ :root { /* No web font is downloaded. Each stack picks the closest local face to the typeface the design was drawn with: display -> a neo-grotesque, in the lineage of Archivo body -> a screen serif, in the lineage of Spectral mono -> a grotesque monospace, in the lineage of IBM Plex Mono Avoid system-ui for display: it resolves to SF Pro and Segoe UI, two humanists whose rounder shapes read nothing like a grotesque. */ --font-display: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif; --font-body: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, 'Noto Serif', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* x-height over em, measured on the typefaces above. Paired with each font-family through font-size-adjust, these hold the apparent size steady whichever face the stack lands on: Charter (0.481) and Georgia (0.484) both come back down to Spectral's 0.45, so macOS and Windows render the page at the same scale. Browsers without the property just show the uncompensated face, slightly larger. */ --x-display: 0.526; /* Archivo */ --x-body: 0.45; /* Spectral */ --x-mono: 0.516; /* IBM Plex Mono */ /* Raw palette: the single source of truth for both schemes. The semantic tokens below are the only names the stylesheets ever reference. Amber is reserved for focus, pull-quotes and the active nav item. It is never decorative. */ --light-paper: #e9ecee; --light-surface: #ffffff; --light-ink: #16202a; --light-ink-muted: #5a6873; --light-band: #0e2a3b; --light-band-ink: #e5e9ec; --light-link: #0b4f72; --light-rule: #c9d0d5; --light-shadow: 0 1px 2px rgba(11, 26, 38, 0.16), 0 6px 18px -12px rgba(11, 26, 38, 0.35); --dark-paper: #0d161d; --dark-surface: #16232d; --dark-ink: #dce3e8; --dark-ink-muted: #8b9aa5; --dark-band: #081a26; --dark-band-ink: #dce3e8; --dark-link: #7acbff; --dark-rule: #2c3a45; --dark-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Scheme-independent. */ --color-amber: #e0a526; --color-on-accent: #16202a; --color-node-glyph: #ffffff; --radius: 2px; /* Fluid type scale, ratio ~1.25. The baseline rhythm is 1.5rem. */ --step-0: 1rem; --step-1: 1.25rem; --step-2: clamp(1.4rem, 0.9rem + 1.6vw, 1.75rem); --step-3: clamp(1.75rem, 1rem + 2.4vw, 2.4rem); --step-4: clamp(2.1rem, 1rem + 3.6vw, 3.2rem); --measure: 68ch; } /* -------------------------------------------------------------------------- Scheme mapping `data-scheme` is written on by script/color-scheme.js: absent | "auto" -> follow the operating system "light" | "dark" -> force, whatever the system says Forcing has to win over the media query, so the two cannot be collapsed into one rule. Both blocks assign the same raw values, so the palette itself stays defined in exactly one place above. -------------------------------------------------------------------------- */ :root, :root[data-scheme='light'] { color-scheme: light; --color-paper: var(--light-paper); --color-surface: var(--light-surface); --color-ink: var(--light-ink); --color-ink-muted: var(--light-ink-muted); --color-band: var(--light-band); --color-band-ink: var(--light-band-ink); --color-link: var(--light-link); --color-rule: var(--light-rule); --shadow-card: var(--light-shadow); } :root[data-scheme='dark'] { color-scheme: dark; --color-paper: var(--dark-paper); --color-surface: var(--dark-surface); --color-ink: var(--dark-ink); --color-ink-muted: var(--dark-ink-muted); --color-band: var(--dark-band); --color-band-ink: var(--dark-band-ink); --color-link: var(--dark-link); --color-rule: var(--dark-rule); --shadow-card: var(--dark-shadow); } /* System preference, unless the visitor has forced a scheme. Also covers the no-JavaScript case, where the attribute is never written at all. */ @media (prefers-color-scheme: dark) { :root:not([data-scheme='light']):not([data-scheme='dark']) { color-scheme: dark; --color-paper: var(--dark-paper); --color-surface: var(--dark-surface); --color-ink: var(--dark-ink); --color-ink-muted: var(--dark-ink-muted); --color-band: var(--dark-band); --color-band-ink: var(--dark-band-ink); --color-link: var(--dark-link); --color-rule: var(--dark-rule); --shadow-card: var(--dark-shadow); } }