/* tokens.css — the design tokens Palmovka English shares across its two sites: the app (app.palmovka-english.co.uk) and the site (palmovka-english.co.uk). SOURCE OF TRUTH: rue-exp/css/tokens.css. Edit it here, never in the copy. The site holds a byte-identical copy at palmovka-english/public/tokens.css: py -X utf8 codex/sync_tokens.py (from rue-exp: writes the copy) py -X utf8 codex/check_tokens.py (rue-exp; session_end runs it) python tools/check_tokens.py (from palmovka-english) Each page loads this file before its own stylesheet. Only values the two sites already agree on live here; a value one site still sets differently stays in that site's own :root until James decides it (LOOK move 1, 2026-09-25). Names follow the site; app.css aliases its older names. Colour (look C, James 2026-09-25): mostly black, white, grey and silver. The accent is silver; --focus is the one blue left, for the keyboard focus ring, which has to stay easy to find. Vocab's teal went with it. Corners (James, 2026-09-25): 12 px for cards and panels, 8 px for anything you click or type in. The sans is Source Sans 3, Source Serif's designed companion (James chose comparison version C, 2026-09-25): the two voices read as one family, and it looks the same on Windows and Mac. SIL Open Font License 1.1, from @fontsource-variable/source-sans-3. The files sit in fonts/ beside this file in both repos, so one relative path serves both. Type scale (symmetria, James 2026-10-09, codex/DECISIONS.md): every text size is one note of the proportion 6 : 8 : 9 : 12, at 2 px a step — the octave, fifths, fourths and the tone. One voice per note: --fs-label 12 px 6 labels, notes, scores, the unit name in practice --fs-text 16 px 8 the app's own speech: instructions, Czech, buttons --fs-en 18 px 9 English standing alone: practised or looked up --fs-head 24 px 12 headings --fs-display 36 px 18 a big number (sprint score), a fifth above 12 No other size. Icons keep their own and say so in a comment; the check is codex/check_type_scale.py. The grey (--muted) was lifted from #93a0ad the same day so the 12 px labels read easily. Spacing (symmetria, the same day): every padding, margin and gap is a step of 6 px stretched only by the octave (2:1) and the fifth (3:2): --sp-3 · --sp-6 · --sp-9 · --sp-12 · --sp-18 · --sp-24 · --sp-36 · --sp-48 (--sp-72, --sp-96 for page-level space) Few steps, each clearly larger than the last, so near and apart read at a glance. Hairlines of 2 px or less, 0, auto, em and negative pulls stay as they are. The same check guards it. Line height and width (symmetria, the same day). Lines take the simplest ratios: --lh-tight 1 (unison: icons, single words), --lh-snug 4:3 (the fourth: headings, labels, single lines), --lh-text 3:2 (the fifth: reading text, so 16 px text sits on 24 px lines, four spacing steps), --lh-loose 2:1 (the octave: two widely spaced lists). Widths of a column take 6 : 8 : 9 : 12 of the frame: --w-6 21rem, --w-8 28rem, --w-9 31.5rem, --w-12 42rem, the frame itself in app and site. Pictures keep their own. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-latin-wght-normal.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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-latin-ext-wght-normal.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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-sans-3-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { --bg: #070b14; --surface: #0e1421; --ink: #e6e9ef; --ink-soft: #c3cad5; --muted: #a7b1c0; --line: #1c2638; --accent: #c6cdd6; --accent-strong: #e8ecf1; --on-accent: #0d1319; --focus: #6a9fd8; --fs-label: 0.75rem; --fs-text: 1rem; --fs-en: 1.125rem; --fs-head: 1.5rem; --fs-display: 2.25rem; --sp-3: 0.1875rem; --sp-6: 0.375rem; --sp-9: 0.5625rem; --sp-12: 0.75rem; --sp-18: 1.125rem; --sp-24: 1.5rem; --sp-36: 2.25rem; --sp-48: 3rem; --sp-72: 4.5rem; --sp-96: 6rem; --lh-tight: 1; --lh-snug: 1.3333; --lh-text: 1.5; --lh-loose: 2; --w-6: 21rem; --w-8: 28rem; --w-9: 31.5rem; --w-12: 42rem; --radius: 12px; --radius-btn: 8px; --correct: #6aa996; --wrong: #cdb07a; --serif: "Gentium Book Plus", Georgia, "Times New Roman", serif; --caps: "Cinzel", "Gentium Book Plus", Georgia, serif; --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; /* Night sky (James, 2026-10-12): "the feeling of peace and wonder of looking up at the night sky, the freedom from clutter and chaos". A page background for app, tree page and site: a faint lift towards the bottom like a horizon, a few far stars at the edges, never behind the words. Pages paint body with var(--sky). */ --sky: radial-gradient(1px 1px at 4% 9%, rgba(255, 255, 255, 0.5), transparent 60%), radial-gradient(1px 1px at 13% 3%, rgba(255, 255, 255, 0.3), transparent 60%), radial-gradient(1.5px 1.5px at 95% 7%, rgba(255, 255, 255, 0.55), transparent 60%), radial-gradient(1px 1px at 84% 2%, rgba(255, 255, 255, 0.3), transparent 60%), radial-gradient(1px 1px at 98% 38%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(1px 1px at 2% 52%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(1px 1px at 3% 84%, rgba(255, 255, 255, 0.25), transparent 60%), radial-gradient(1px 1px at 97% 76%, rgba(255, 255, 255, 0.3), transparent 60%), linear-gradient(to bottom, #060a13 0%, #0a1020 70%, #111a2c 100%); }