/* ==================================================================
TOKENS — the design system's single source of truth.
Think of this file like your Figma variables panel:
PRIMITIVE = the raw value ("this hex", "this pixel number").
Never used directly in components/pages.
SEMANTIC = a primitive given a *job* ("this is what I use for
a primary color / body spacing"). Components and
pages should only ever reference semantic tokens.
If you find yourself writing a hex code, a raw pixel number, or
var(--void)/var(--funk)/etc. inside reset.css, components.css or
pages.css — stop. Add or reuse a semantic token here instead.
That's the rule that keeps this file the ONE place you edit to
restyle the whole site.
================================================================== */
/* JetBrains Mono is loaded via + in each page's , not an @import here.
@import is sequential/render-blocking — the browser couldn't even
start fetching the font until it had fetched and parsed this file
(which, before this fix, wasn't first in line either — reset.css,
components.css, and pages.css all imported tokens.css a second
time, each adding another hop). A in lets the font
request start immediately, in parallel with everything else. */
/* ------------------------------------------------------------------
COLOUR — Primitives
Raw palette values. Named for what they look like, not what
they're for (same idea as a Figma "Colors" collection).
------------------------------------------------------------------ */
:root {
--void: #181925;
--nebula: #312B52;
--zest: #46EDAC;
--solar: #FDC602;
--funk: #D951D8;
--voltage: #6503FD;
--white: #ffffff;
}
/* ------------------------------------------------------------------
COLOUR — Semantics
What each primitive is *for*. Components/pages use these, never
the primitives above directly.
------------------------------------------------------------------ */
:root {
--colour-surface-background: var(--void);
--colour-surface-subtle: var(--nebula);
--colour-primary: var(--funk);
--colour-secondary: var(--solar);
--colour-tertiary: var(--zest);
--colour-accent: var(--voltage);
/* was defined as a primitive but never given a job — added so it's actually usable */
}
/* ------------------------------------------------------------------
COLOUR / TYPE — "Corporate" vibe override
Same semantic tokens, different values — nothing downstream
(components.css, pages.css) needs to know this exists. Toggled by
setting data-vibe="corporate" on (see js/vibe.js). Swap
the hex values below to retune the corporate palette; don't add
new token *names* here unless the default vibe gets one too.
Contrast note: .button.text pairs `background: var(--colour-secondary)`
with `color: var(--colour-surface-background)` — it reuses the page
background colour as its "light text" colour. That trick only works
if --colour-secondary stays dark enough to contrast against a light
--colour-surface-background, so keep secondary/primary dark here
even though surface-background flips from near-black to near-white.
------------------------------------------------------------------ */
:root[data-vibe="corporate"] {
--colour-surface-background: #F6F7F9;
/* First pass at this was #E3E6EB — visually almost the same
lightness as surface-background, so anything using it (the
toggle track, .toc, .skip-link) read as barely-there. This is
still a light neutral grey, just with enough separation from
the page background to actually look like a distinct surface. */
--colour-surface-subtle: #D7DCE3;
--colour-primary: #101828;
--colour-secondary: #1E3A5F;
--colour-tertiary: #3B4758;
/* Accent is deliberately NOT another shade of navy — the brief was
"keep the muted blue as the base, but it's reading monochrome".
A muted brass/gold pairs with navy without turning "corporate"
into "colourful", and gives the toggle + active nav link (see
components.css) one spot of actual colour instead of four
shades of the same blue-grey. */
--colour-accent: #7A5D18;
--font-family-body: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--radius-sm: 4px;
--radius-md: 8px;
/* --shadow-control is `none` by default (see the utility tokens
section below) — this is the only vibe that turns it on, giving
a couple of surfaces (the toggle thumb, the primary CTA) a soft
lift instead of the site's usual flat fill. Default vibe is
untouched since it never sets this to anything but none. */
--shadow-control: 0 1px 2px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
}
/* ------------------------------------------------------------------
TYPOGRAPHY — Primitives
Raw type scale + weights + font stack.
------------------------------------------------------------------ */
:root {
--font-family-mono: "JetBrains Mono", monospace;
/* Indirection, not a duplicate: everywhere the *body* font is
applied (reset.css, .drawer-nav-list) reads --font-family-body
rather than --font-family-mono directly. Default vibe points it
at the mono font; the corporate vibe override below repoints it
at a plain sans stack. --font-family-mono itself is untouched,
in case something later wants "the mono font" specifically
regardless of vibe. */
--font-family-body: var(--font-family-mono);
--font-size-header-xl: 64px;
--font-size-header-lg: 40px;
--font-size-header-md: 24px;
--font-size-header-sm: 18px;
--font-size-body-md: 14px;
--font-size-body-sm: 12px;
--font-size-body-xs: 10px;
--font-weight-bold: 700;
--font-weight-regular: 400;
}
/* ------------------------------------------------------------------
TYPOGRAPHY — Semantics
Base HTML elements styled directly, so any page automatically
gets on-brand type with zero classes. Page/component CSS can
still override font-size etc. per-context (see .content-homepage
h1 in pages.css for an example) — that's expected and fine.
------------------------------------------------------------------ */
h1 {
font-size: var(--font-size-header-lg);
font-weight: var(--font-weight-bold);
text-decoration: none;
color: var(--colour-primary);
}
h2 {
font-size: var(--font-size-header-md);
font-weight: var(--font-weight-bold);
text-decoration: none;
color: var(--colour-secondary);
}
h3 {
font-size: var(--font-size-header-sm);
font-weight: var(--font-weight-bold);
text-decoration: none;
color: var(--colour-secondary);
}
p {
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-regular);
text-decoration: none;
color: var(--colour-tertiary);
}
ul {
list-style-position: outside;
padding-inline-start: 40px;
}
ol {
list-style-position: outside;
padding-inline-start: 40px;
}
li {
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-regular);
text-decoration: none;
color: var(--colour-tertiary);
text-align: match-parent;
}
figcaption {
margin-top: var(--space-xs);
color: var(--colour-primary);
font-size: var(--font-size-body-sm);
font-style: italic;
text-align: center;
}
/* ------------------------------------------------------------------
SPACING — Primitives
One scale, used everywhere. Every padding/gap/margin in
components.css and pages.css should trace back to one of these
instead of a one-off pixel number. If a design genuinely needs a
value that isn't on this scale, add a rung to the scale rather
than writing a raw number inline — that keeps spacing consistent
across the whole site the way a Figma spacing scale does.
------------------------------------------------------------------ */
:root {
--space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 12px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
}
/* ------------------------------------------------------------------
RADIUS — Primitives
------------------------------------------------------------------ */
:root {
--radius-sm: 8px;
--radius-md: 16px;
}
/* ------------------------------------------------------------------
OTHER SEMANTIC / UTILITY TOKENS
Small cross-cutting values that don't fit neatly under color,
type, or spacing, but are still "the one place to change it."
------------------------------------------------------------------ */
:root {
--hover-opacity: 0.7;
--hover-transition: all 0.2s;
--nav-width: 240px;
--max-content-width: 1500px;
/* `none` in the default vibe; the corporate override above is the
only place that gives this a real value. */
--shadow-control: none;
}
/* ------------------------------------------------------------------
Responsive type scale
The header sizes above shrink on smaller screens. Kept here,
next to the tokens they override, rather than scattered in
whichever component file happened to need a media query.
Breakpoints match the layout breakpoints used in components.css:
900px — mobile nav kicks in, side nav collapses to top bar
600px — single-column layouts, reduced padding
400px — very narrow phones
------------------------------------------------------------------ */
/* 600–900px: tablet / large phone in landscape.
Side nav is gone so content is wider, but there's more room than
a small phone. Titles can be a little smaller than desktop but
don't need to collapse as aggressively as they do at <600px. */
@media (max-width: 900px) {
:root {
--font-size-header-xl: 52px;
--font-size-header-lg: 32px;
--font-size-header-md: 22px;
--font-size-header-sm: 17px;
}
}
@media (max-width: 600px) {
:root {
--font-size-header-xl: 42px;
--font-size-header-lg: 26px;
--font-size-header-md: 20px;
--font-size-header-sm: 16px;
}
}
@media (max-width: 400px) {
:root {
--font-size-header-xl: 32px;
--font-size-header-lg: 22px;
--font-size-header-md: 18px;
}
}