/* ==========================================================================
TOKENS: the one file you edit to rebrand a site.
Load order: tokens.css, then base.css. base.css only uses the names below,
never a raw colour or size, so nothing else needs to change.
========================================================================== */
/* 1. Fonts =================================================================
Inter, self-hosted: variable .woff2 (every weight 100-900 in one file),
split into a Latin and a Greek file. unicode-range makes the browser fetch
only the files whose characters a page uses: an English page never
downloads the Greek file.
CHANGING THE FONT
1. Put the new font's Latin and Greek .woff2 files in /fonts/ (subset
with fonttools: see CLAUDE.md, "Fonts").
2. Point the two src lines below at them and rename the family.
3. Update the preload in each page's to the new Latin file.
4. Re-measure the fallback (block 2) for the new font.
A LATIN-ONLY FONT (no Greek glyphs)
Many display fonts have no Greek. Give the Latin file of that font and
the Greek file of a companion font the SAME font-family name: the browser
picks per character and the seam is invisible. Check that the two have
similar x-heights and weights. */
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-greek.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
U+03A3-03FF;
}
/* 2. Fallback with Inter's proportions =====================================
While Inter loads, text renders in Arial resized to Inter's metrics, so
nothing reflows when the real font arrives. Arial ships on Windows, macOS
and iOS. Browsers without these descriptors use plain Arial, which is
fine. If you change the font, re-measure (Capsize or Fontaine compute
these four values). */
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("ArialMT");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22.4%;
line-gap-override: 0%;
}
:root {
/* 3. Colour ==============================================================
Hex on purpose: works everywhere, easy to paste from a brand guide.
Brand red from the old site (logo heart #e32934); text uses its darker
#d61c27. Contrast, measured: accent 5.2:1 on white, 4.8:1 on
surface-alt; ink-soft 6.6:1 on white.
Keep text colours at 4.5:1 or better on both --color-bg and
--color-surface-alt. */
--color-bg: #ffffff; /* page background */
--color-surface-alt: #faf6f6; /* alternate sections, hover fills */
--color-ink: #14171c; /* text and headings */
--color-ink-soft: #565d6b; /* secondary text */
--color-line: #e4e7ec; /* hairlines, card borders */
--color-line-strong: #c9ced6; /* input borders, secondary buttons */
--color-accent: #d61c27; /* links, buttons, current page */
--color-accent-hover: #b0161f; /* same hue, darker */
--color-accent-soft: #fdeeef; /* tinted fills, text selection */
--color-accent-ring: rgba(214, 28, 39, 0.25); /* focus glow on inputs */
--color-brand: #e32934; /* the logo red: icons, hearts, never text */
--color-veil: rgba(255, 255, 255, 0.92); /* caption backing on photos */
--color-veil-clear: rgba(255, 255, 255, 0); /* its fade-out end */
--color-on-accent: #ffffff; /* text on accent buttons */
--color-success: #166534;
--color-success-bg: #f0fdf4;
--color-success-line: #bbf7d0;
--color-error: #b91c1c;
--color-error-bg: #fef2f2;
--color-error-line: #fecaca;
--color-error-ring: rgba(185, 28, 28, 0.2);
/* Keep in step with in every page. */
/* 4. Type ================================================================ */
--font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Fixed sizes: what browsers without clamp() get (iOS 12, early 13).
Fluid versions are in the @supports block at the end of this file. */
--step--1: 0.875rem;
--step-0: 1.0625rem;
--step-1: 1.25rem;
--step-2: 1.5rem;
--step-3: 2rem;
--step-4: 2.5rem;
--step-5: 2.875rem;
/* 5. Space & layout ====================================================== */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4.5rem;
--space-section: 3.5rem; /* top/bottom padding of a .section */
--container: 72rem; /* widest content column */
--measure: 68ch; /* longest comfortable line of text */
--gutter: 1.25rem; /* side padding on phones */
--header-h: 4.5rem; /* header bar height */
--radius-s: 8px;
--radius: 12px;
--radius-l: 20px;
--shadow-s: 0 1px 2px rgba(20, 23, 28, 0.06), 0 2px 8px rgba(20, 23, 28, 0.05);
--shadow-m: 0 4px 12px rgba(20, 23, 28, 0.08), 0 12px 32px rgba(20, 23, 28, 0.08);
}
@media (min-width: 48em) {
:root {
--gutter: 2rem;
--space-section: 5rem;
}
}
/* 6. Fluid type ===========================================================
Only inside @supports. Writing a fixed fallback line first does NOT
work through var(): a browser without clamp() would accept the variable
and then drop the whole declaration, resetting headings to body size. */
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
:root {
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
--step-2: clamp(1.3125rem, 1.17rem + 0.7vw, 1.75rem);
--step-3: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
--step-4: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
--step-5: clamp(2.25rem, 1.55rem + 3.5vw, 4rem);
--space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
}