/* ========================================================================== Self-hosted webfonts. Nothing here talks to fonts.googleapis.com or fonts.gstatic.com: no request may leave the browser for a third party before the visitor has given consent. The files under styles/fonts/ are the latin and latin-ext subsets of Fraunces, Nunito Sans and Caveat (all SIL OFL 1.1), fetched once from Google Fonts and committed to the repo. Caveat is a small hand accent: margin notes and captions only, never body. ========================================================================== */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/styles/fonts/fraunces-latin.woff2') format('woff2'); 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: 'Fraunces'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/styles/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/styles/fonts/nunito-sans-latin.woff2') format('woff2'); 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: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/styles/fonts/nunito-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/styles/fonts/caveat-latin.woff2') format('woff2'); 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; } /* ========================================================================== Design tokens — shared by the marketing site (site.css), the app (app.css) and the admin console (admin/admin.css). Every colour, radius, shadow and family lives here; components never hard-code a colour. Direction: "warm with character" — cream paper, deep green voice, ochre and terracotta for warmth, a paper grain over the whole page. THEME EXPERIMENT (see the experiment contract, frontend/variants.json). A running experiment of kind "theme" may override, at runtime, ONLY these token names — the allowlist; anything else is ignored client-side and refused server-side: --accent --accent-strong --accent-ink --accent-soft --accent-line --ochre --ochre-soft --ochre-line --terracotta --terracotta-ink --sun --bg --bg-2 --surface --surface-2 Values must match ^#[0-9A-Fa-f]{6}$. scripts/theme.js sets them as inline custom properties on via CSSOM before first paint, together with . Inline custom properties on the element beat every rule in this file, so the presets below are only the no-JS fallback for the two shipped variants. ========================================================================== */ :root { color-scheme: light dark; /* --- Surfaces: cream paper, a warmer paper for alternating bands --- */ --bg: #F7F1E5; --bg-2: #F0E7D5; --surface: #FFFCF6; --surface-2: #FBF6EC; --card: var(--surface); /* legacy alias: card surfaces follow --surface */ /* --- Ink --- */ --ink: #23201B; --ink-2: #574F45; /* secondary text — AA on --bg and --surface */ --muted: #6F6557; /* fine print and decorative text */ /* --- Lines --- */ --line: #E3D8C3; --line-strong: #CEBE9F; /* --- Green: the primary voice --- */ --accent: #1B6552; --accent-strong: #0F4436; --accent-ink: #FFFCF6; --accent-soft: #E2EDE5; --accent-line: #BBD3C6; /* --- Ochre and terracotta: used sparingly, for warmth --- */ --ochre: #C97A2B; --ochre-soft: #F7E7CE; --ochre-line: #E4C08A; --terracotta: #A94E28; --terracotta-ink: #FFFCF6; --sun: #E8A33D; /* --- Status --- */ --warn: #9A5A17; --warn-soft: #F7E7CE; --danger: #A3302A; --danger-soft: #F7E1DF; /* --- Shape --- */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 36px; --radius-pill: 999px; /* --- Type --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-hand: 'Caveat', 'Segoe Script', cursive; /* --- Layout --- */ --container: 72rem; --measure: 60ch; /* --- Effects --- */ --shadow-sm: 0 1px 2px rgba(60, 44, 24, .07); --shadow: 0 2px 4px rgba(60, 44, 24, .06), 0 14px 32px -18px rgba(60, 44, 24, .35); --shadow-lift: 0 4px 8px rgba(60, 44, 24, .07), 0 26px 50px -24px rgba(60, 44, 24, .45); --ring: 0 0 0 3px var(--ochre-line); /* --- Paper grain: an inline SVG data URI, never a network request --- */ --grain: url("data:image/svg+xml;utf8,"); --grain-opacity: .20; --grain-blend: multiply; } /* --------------------------- Dark: system preference --------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17130E; --bg-2: #1E1913; --surface: #221C15; --surface-2: #281F17; --card: var(--surface); --ink: #F4ECDD; --ink-2: #CBBFAD; --muted: #9C9080; --line: #3A3026; --line-strong: #4E4132; --accent: #6FC0A2; --accent-strong: #8FD3B8; --accent-ink: #0F1F19; --accent-soft: #1E332B; --accent-line: #34544A; --ochre: #E0A055; --ochre-soft: #372A1B; --ochre-line: #5C4529; --terracotta: #E8926A; --terracotta-ink: #22140D; --sun: #E8A33D; --warn: #E0A055; --warn-soft: #372A1B; --danger: #E58A82; --danger-soft: #3B221F; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px -18px rgba(0, 0, 0, .8); --shadow-lift: 0 4px 8px rgba(0, 0, 0, .4), 0 26px 50px -24px rgba(0, 0, 0, .9); --ring: 0 0 0 3px var(--ochre-line); --grain-opacity: .16; --grain-blend: screen; } } /* --------------------------- Dark: explicit choice ----------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #17130E; --bg-2: #1E1913; --surface: #221C15; --surface-2: #281F17; --card: var(--surface); --ink: #F4ECDD; --ink-2: #CBBFAD; --muted: #9C9080; --line: #3A3026; --line-strong: #4E4132; --accent: #6FC0A2; --accent-strong: #8FD3B8; --accent-ink: #0F1F19; --accent-soft: #1E332B; --accent-line: #34544A; --ochre: #E0A055; --ochre-soft: #372A1B; --ochre-line: #5C4529; --terracotta: #E8926A; --terracotta-ink: #22140D; --sun: #E8A33D; --warn: #E0A055; --warn-soft: #372A1B; --danger: #E58A82; --danger-soft: #3B221F; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px -18px rgba(0, 0, 0, .8); --shadow-lift: 0 4px 8px rgba(0, 0, 0, .4), 0 26px 50px -24px rgba(0, 0, 0, .9); --ring: 0 0 0 3px var(--ochre-line); --grain-opacity: .16; --grain-blend: screen; } /* --------------------------- Light: explicit choice ---------------------- */ :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== Theme-experiment presets (no-JS fallback). accent_2026_09: "green" is the base above and needs no block. "ochre" and "terracotta" repaint the accent family only; every other token is inherited so the paper, the ink and the lines stay identical across arms. Ordering matters: the light preset is (0,2,0) so the dark scheme blocks above still win in dark; the per-scheme blocks below are (0,3,0). Contrast, checked against the contract's rule (--accent vs --accent-ink >= 4.5:1, --accent vs --bg >= 3:1): ochre light #A4561A on #FFFCF6 = 5.2:1, on #F7F1E5 = 4.8:1 ochre dark #E0A055 on #22140D = 8.0:1, on #17130E = 8.0:1 terracotta light #A94E28 on #FFFCF6 = 5.4:1, on #F7F1E5 = 4.9:1 terracotta dark #E8926A on #22140D = 7.5:1, on #17130E = 7.7:1 The hexes below are exactly the ones frontend/variants.json ships for accent_2026_09, so the no-JS render and the runtime render agree. ========================================================================== */ :root[data-theme-variant="ochre"] { --accent: #A4561A; --accent-strong: #7F4213; --accent-ink: #FFFCF6; --accent-soft: #F7E7CE; --accent-line: #E4C08A; } :root[data-theme-variant="terracotta"] { --accent: #A94E28; --accent-strong: #83381A; --accent-ink: #FFFCF6; --accent-soft: #F8E3D8; --accent-line: #E8B79F; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-theme-variant="ochre"] { --accent: #E0A055; --accent-strong: #F0B877; --accent-ink: #22140D; --accent-soft: #372A1B; --accent-line: #5C4529; } :root:not([data-theme="light"])[data-theme-variant="terracotta"] { --accent: #E8926A; --accent-strong: #F2AC8B; --accent-ink: #22140D; --accent-soft: #3A231A; --accent-line: #5E3A2A; } } :root[data-theme="dark"][data-theme-variant="ochre"] { --accent: #E0A055; --accent-strong: #F0B877; --accent-ink: #22140D; --accent-soft: #372A1B; --accent-line: #5C4529; } :root[data-theme="dark"][data-theme-variant="terracotta"] { --accent: #E8926A; --accent-strong: #F2AC8B; --accent-ink: #22140D; --accent-soft: #3A231A; --accent-line: #5E3A2A; } :root[data-theme="light"][data-theme-variant="ochre"] { --accent: #A4561A; --accent-strong: #7F4213; --accent-ink: #FFFCF6; --accent-soft: #F7E7CE; --accent-line: #E4C08A; } :root[data-theme="light"][data-theme-variant="terracotta"] { --accent: #A94E28; --accent-strong: #83381A; --accent-ink: #FFFCF6; --accent-soft: #F8E3D8; --accent-line: #E8B79F; }