/* ============================================ pococo — design tokens Single source of truth for colors, type, spacing, motion. COLOURS ARE NOT DECIDED HERE. The authority is the brand reference `colors.md`; this file maps those values onto the roles the site renders. If a value here disagrees with colors.md, colors.md wins and this file is wrong. THE RULE THAT MATTERS (from colors.md's own yellow): a brand colour and a text colour are different jobs. Where a brand value does not clear AA as text on the ground it lands on, the brand value STAYS and a readable variant sits beside it. Never move the brand value to fix a text problem — that is how this file drifted away from the brand doc before. -- the brand value: fills, ticks, rules, borders ---text the same colour when it becomes text The two are identical everywhere except the two places noted. ============================================ */ :root { /* ---- Brand colours · colors.md ---- */ --blue: #364E7A; /* pococo blue. Accent, charts, best status */ --red: #8F2A1E; /* pococo red. Charts, fail status, errors */ --green: #325E3E; /* pococo green. Charts, good status */ --yellow: #8E651E; /* pococo yellow. Charts, caution status */ --purple: #5B4A7C; /* Extended brand colour, extra chart colour */ --plum: #97386A; /* Extended brand colour, extra chart colour */ /* ---- Light versions · colors.md ---- */ --blue-light: #7C8FC5; --red-light: #D25A47; --green-light: #729D7D; --yellow-light: #DFAC42; --purple-light: #9D92B0; --plum-light: #C188A6; /* ---- Text variants ---- Two, and only two. Both are cases where the brand value is correct as a brand value and unreadable as small text. --yellow-text is colors.md's own #7E5A1A, already published there for exactly this reason. --red-light-text is the same pattern applied to dark mode, where #D25A47 reads 4.17 on a dark card. */ --yellow-text: #7E5A1A; /* brand yellow is 4.47 on warm paper */ --red-light-text: #DD6A55; /* brand light red is 4.17 on a dark card */ /* ---- Neutrals · colors.md ---- */ --grey: #C0BCB4; /* Secondary bars */ --rule: #A6A6A6; /* Dividers */ /* ---- Surfaces (light) ---- colors.md assumes a white ground because it is written for documents. The site keeps warm paper, which costs about 0.9 of contrast on every colour and is why yellow needs its text variant here and does not in a workbook. */ --base-bg: #F1EDE7; /* pococo paper */ --base-card: #F7F4ED; /* pococo card */ --base-elev: #EAE5DC; /* pococo beige */ /* ---- Text tiers ---- colors.md carries no text tier below black: its greys are 1.9:1 and 2.4:1 as text, which are bar and divider values. These three are the site's own, and all clear AA as TEXT on every surface above. */ --text-main: #2C2A29; /* pococo black */ --text-muted: #5F5C58; /* Body and secondary. 5.7:1 on paper */ --text-subtle: #6D6965; /* Labels only. 4.52:1 on the tinted ground, which is the worst case: the section tint darkens the paper and costs about 0.15 against dark text. */ /* ---- Status · colors.md Style D: light ground, colour text ---- */ --status-red-bg: #F0E3DE; --status-red-text: #8F2A1E; --status-yellow-bg: #EFE9D8; --status-yellow-text: #7E5A1A; --status-green-bg: #E6EFE5; --status-green-text: #325E3E; --status-blue-bg: #E4E8F0; --status-blue-text: #364E7A; /* ---- Section roles ---- */ --ai-primary: var(--blue); --ai-primary-text: var(--blue); --games-primary: var(--red); --games-primary-text: var(--red); --labs-primary: var(--yellow); --labs-primary-text: var(--yellow-text); --founder-primary: var(--green); --founder-primary-text: var(--green); --gold: var(--yellow); --live: var(--green); /* "playable / live" status */ /* ---- Active section drives the adaptive tint ---- */ --primary: var(--ai-primary); --primary-text: var(--ai-primary-text); --tint-percent: 1.8%; /* Computed adaptive surfaces */ --bg-main: color-mix(in srgb, var(--primary) var(--tint-percent), var(--base-bg)); --bg-card: color-mix(in srgb, var(--primary) var(--tint-percent), var(--base-card)); --bg-elev: color-mix(in srgb, var(--primary) calc(var(--tint-percent) * 2), var(--base-card)); --hairline: color-mix(in srgb, var(--primary) 6%, var(--base-elev)); /* ---- Typography ---- */ --font-logo: 'Outfit', 'Helvetica Neue', sans-serif; --font-display: 'Literata', 'Georgia', serif; --font-body: 'Sora', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', monospace; /* --font-jp-sans is the one downloaded face the site does NOT have, so it is the one place a browser is left to guess. Read it as a list of everything that must be tried before `sans-serif` is reached, because `sans-serif` is where Han unification bites: Japanese and Chinese share codepoints for characters as common as 直 骨 今 令 海 器, the correct shapes differ, and a machine with only Chinese CJK fonts installed will draw the Chinese ones. Font matching runs PER CHARACTER (CSS Fonts 4 §5), so Segoe UI leading the list is harmless - it carries the Latin and every Japanese character falls straight through it to the first family that has a glyph. Both names for each Windows family. Browsers differ on whether they match the full name or the PostScript name, and the Japanese names are what a Japanese-locale install reports. Listing both costs nothing and a missed alias costs the whole point of the list. MS Gothic and Meiryo are in Japanese Supplemental Fonts, a Windows Feature on Demand, so they are absent from an English-locale machine that has never had Japanese enabled. Yu Gothic is understood to be in the base install of Windows 10/11 for all editions - but that is the single load- bearing assumption here and it is not one to rest on. Which is what 'JP Sans Guard' is for: a downloaded Noto Sans JP, sliced, declared in the asynchronously-loaded fonts-jp-guard.css, reached only when every family above it has missed. A machine with any Japanese font never fetches a byte of it; a machine with none gets real Japanese letterforms instead of Chinese ones. Read that file's header before changing this line - the ORDER is the mechanism, and moving the guard earlier would make every visitor download a font almost none of them need. */ --font-jp-sans: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', /* macOS, iOS */ 'Yu Gothic UI', 'Yu Gothic', 'YuGothic', '游ゴシック', /* Windows, base install */ 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', /* Windows, Feature on Demand */ 'Noto Sans CJK JP', 'Noto Sans JP', /* Android, Linux */ 'JP Sans Guard', /* downloaded, only if all of the above missed */ sans-serif; /* ⚠ reaching here means the browser guesses */ /* No such exposure on the serif: Shippori Mincho B1 is downloaded with full coverage, so a Japanese character never reaches the generic. */ --font-jp-serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif; /* ---- Spacing (4px grid) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; /* ---- Layout ---- */ --radius-sm: 6px; --radius: 14px; --radius-lg: 20px; --container: 1200px; --container-narrow: 680px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --d-fast: 150ms; --d-base: 250ms; --d-slow: 400ms; --d-dramatic: 800ms; /* ---- Density (tweakable) ---- */ --density: 1; --section-pad: calc(var(--sp-24) * var(--density)); color-scheme: light; } /* ---- Dark mode ---- The light versions from colors.md become the accents, and the grounds become sumi. Only --games-primary-text differs from its brand value, for the reason given above. */ [data-theme="dark"] { --base-bg: #181513; --base-card: #221E1B; --base-elev: #2A2522; --text-main: #ECEAE4; --text-muted: #C6C2BA; --text-subtle: #A5A29D; --ai-primary: var(--blue-light); --ai-primary-text: var(--blue-light); --games-primary: var(--red-light); --games-primary-text: var(--red-light-text); --labs-primary: var(--yellow-light); --labs-primary-text: var(--yellow-light); --founder-primary: var(--green-light); --founder-primary-text: var(--green-light); --gold: var(--yellow-light); --live: #6FBE8C; --grey: #4A4540; --rule: #57514B; --status-red-bg: #3A211C; --status-red-text: #E8A093; --status-yellow-bg: #332916; --status-yellow-text: #E7C171; --status-green-bg: #1E2E22; --status-green-text: #95B69E; --status-blue-bg: #1E2433; --status-blue-text: #9DABD4; --tint-percent: 4%; --hairline: color-mix(in srgb, var(--primary) 14%, var(--base-elev)); color-scheme: dark; } /* ---- Section primary overrides ---- */ [data-section="ai"] { --primary: var(--ai-primary); --primary-text: var(--ai-primary-text); } [data-section="labs"] { --primary: var(--labs-primary); --primary-text: var(--labs-primary-text); } [data-section="games"] { --primary: var(--games-primary); --primary-text: var(--games-primary-text); } [data-section="founder"] { --primary: var(--founder-primary); --primary-text: var(--founder-primary-text); } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }