/* =================================================================== campoli.me — design tokens =================================================================== One paper ground that TRAVELS: clean at the top, clouding as the reader collects problems, clear again once the system is whole. `--t` is the travel (0 = clear, 1 = darkest); JS moves it and every surface token derives from it, so nothing is re-themed by hand. Colour comes from the 2026-09 logo package (deep green). The brand green has three renditions, split by job — see "The Three Renditions Rule" in DESIGN.md: #0f7a5a on paper, OBJECTS ONLY — the brand green exactly as the logo package specifies it. Fills the CTA, the centre plate, the mark. It reaches 4.76:1 on clear paper and only 3.81:1 once the ground clouds, so it must never carry small text. #0a5c44 on paper, TEXT — kickers, links, locked-piece strokes. 7.35:1 on clear paper and 5.88:1 on the clouded end, so it holds AA the whole length of the travel. #22a077 on the dark ground only — the deep green goes muddy below Ink and cannot carry small text there. =================================================================== */ /* ---------- typefaces ---------- Here rather than in a page's own sheet: every surface uses them, and a page that loads only tokens.css must still get the brand's type. The test spent its first days rendering in Times because these lived in site.css. Outfit for display, Nunito for everything else. Nunito replaced Barlow (2026-09-07) for one measured reason: x-height 0.493 against Barlow's 0.449, so at the same nominal size it puts ~10% more letter above the baseline. On twelve questions someone reads once and has been asked to answer honestly, that is the difference between reading and skimming. fico_app made the same swap, away from Outfit, for the same reason. Nunito is variable 300-800, so one file covers body, medium and the bold of a label — where Barlow needed three. */ @font-face { font-family: 'Outfit'; src: url("/assets/Outfit-latin-9bbb8353.woff2") format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap } @font-face { font-family: 'Nunito'; src: url("/assets/nunito-latin-a6de09cc.woff2") format('woff2'); font-weight: 300 800; 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: 'Nunito'; src: url("/assets/nunito-latin-ext-6e74a3a2.woff2") format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; 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 } :root { /* Display: Outfit, sentence case — it is the wordmark's face, so the lockup and the headings speak one language. Body and labels: Nunito. See DESIGN.md "The Three Voices Rule". */ --display: 'Outfit', system-ui, -apple-system, sans-serif; --body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --label: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t: 0; /* the travelling ground */ --paper-0: #f3f2f2; /* clear paper */ --paper-1: #dcdad6; /* fully clouded */ --bg: color-mix(in srgb, var(--paper-1) calc(var(--t) * 100%), var(--paper-0)); --bg-2: color-mix(in srgb, #000 6%, var(--bg)); --bg-lift: color-mix(in srgb, #fff 55%, var(--bg)); /* type */ --ink: #201e1d; /* headings */ --txt: #46423f; /* body copy */ --on-green: #ffffff; /* text ON a green fill */ /* Dim text TRAVELS with the ground, because the ground it sits on does. The old flat #726c67 was picked against clear paper, where it reaches 4.63:1 — and then the page darkens under it. By the eighth piece it was at 3.71:1 on the body and 3.26:1 on the counter strip, so the quotes and the counter failed AA exactly where the argument peaks. Two changes, both required. The base darkens to #655f59 so it clears AA on --bg-2 (the counter strip, 6% black) even at t=0, where the old value was already under at 4.04:1. And it mixes toward --txt as --t rises, so it keeps pace with the clouding instead of being overtaken by it. Worst case across the whole travel: 5.64:1 on the body, 4.92:1 on the strip. It is still visibly the quiet colour — --txt sits at 8.90:1 — but it is now quiet everywhere rather than only at the top of the page. */ --txt-dim-base: #655f59; --txt-dim: color-mix(in srgb, var(--txt) calc(var(--t) * 60%), var(--txt-dim-base)); /* the single signal */ --green: #0f7a5a; /* paper: objects only */ --green-ink: #0a5c44; /* paper: text and hairlines */ --green-lift: #22a077; /* dark ground only */ --green-glow: #7fd9b8; /* dark ground: keylines, hover */ --hair: rgba(32, 30, 29, .17); --scrim: color-mix(in srgb, var(--bg) 92%, transparent); /* the one inverted surface: the closing call */ --dark: #101d18; --dark-2: #0a1410; --on-dark: #f3f2f2; --on-dark-dim: #9aa8a1; } @supports not (color: color-mix(in srgb, red, blue)) { /* Old engines get the mid-tone ground, so dim text gets the value that clears AA against it: #5a534d is 5.62:1 on --bg-2's fallback. */ :root { --bg: #eceae7; --bg-2: #e0ded9; --bg-lift: #f8f7f6; --txt-dim: #5a534d; } }