/* ========================================================================== VELONOVA, TOKEN LAYER Studio Notebook · v1.0 · August 2026 Companion document: BRAND.md (repo root). Loaded BEFORE style.css. Installed from brand-assets/tokens.css on 2026-08-30. It lives at the repo ROOT, not in brand-assets/, because build.sh excludes brand-assets/ from the published output; a token layer inside it would 404 in production. FOUR DELIBERATE DEVIATIONS from the authored file, each marked DEVIATION below with the reason. Do not "restore" them without reading the reason: 1. --font-display names 'Fraunces Velonova', not "Fraunces" 2. --font-body-he keeps its 'IBM Plex Sans' fallback 3. --pencil is #656A6A, not #9AA0A0 4. the body ground and the em colour are scoped, not global, until the page migration is finished ========================================================================== */ :root{ /* ---- COLOUR ------------------------------------------------------------ Ratios below are MEASURED against --base (and --tint where a token is painted on it), not estimated. They differ slightly from BRAND.md §2, which is conservative on accent and wrong on pencil; BRAND.md has been corrected to match these. */ --base: #FBFAF8; /* page ground */ --ink: #17181A; /* body + headlines 17.03:1 AAA */ --sec: #565A5F; /* secondary text, captions 6.66:1 AA */ --accent: #0E5A54; /* inline emphasis, links 7.72:1 AA body */ --accent-2: #0A423E; /* accent hover / pressed 10.81:1 */ --rule: #E3E0D9; /* grid lines, borders non-text */ --tint: #F0ECE3; /* filled blocks, table heads non-text */ /* DEVIATION 3, authored as #9AA0A0, "3.1:1, large/non-essential only". Measured, #9AA0A0 is 2.55:1 on --base and 2.25:1 on --tint. That fails AA for small text (4.5:1) AND for large text (3:1), so the authored value does not satisfy the authored rule. It carries the margin rail, revision counter, section labels, annotations, timestamps and footer at 0.64-0.78rem, all small text. #656A6A measures 5.27:1 on --base and 4.66:1 on --tint. Both grounds matter: pencil sits on --tint whenever a card is hovered, which is why an intermediate #6E7373 was rejected (4.61 on base, 4.08 on tint). accessibility.html promises AA. Do not restore #9AA0A0. */ --pencil: #656A6A; /* metadata, unfilled states 5.27:1 AA */ /* ---- TYPE: roles ------------------------------------------------------ Components reference roles, never families. Hebrew remaps below. NOTE ON OWNERSHIP: the FAMILY tokens (--font-display, --font-body, --font-display-he, --font-body-he, --font-mono) stay in style.css, beside the @font-face rules that declare them. Splitting a family name from its @font-face is exactly what produced DEVIATION 1: the authored token said "Fraunces", but the only family this repo declares is 'Fraunces Velonova' (instanced with SOFT=30/WONK=1 and internally renamed, see docs/typography.md), so "Fraunces" would have silently fallen back to Georgia on every page. Keep the two together. */ --display: var(--font-display); --body: var(--font-body); --hand: var(--font-hand-en); /* handwritten fix, EN: Caveat */ --hand-note: var(--font-hand); /* handwritten note / CTA line, both */ --emphasis-style: italic; /* Latin uses real italic */ --emphasis-weight: 500; --track-label: .16em; /* Latin eyebrow tracking */ --lh-heading: 1.16; --lh-body: 1.7; /* ---- SPACE / RADIUS ---------------------------------------------------- */ --s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:3rem; --s5:5rem; --s6:7rem; --r-ui:2px; --r-card:4px; --r-pill:999px; /* ---- MOTION ------------------------------------------------------------ */ --ease: cubic-bezier(.22,.61,.36,1); --elastic: cubic-bezier(.2,1.5,.4,1); --t-fast:180ms; --t-mid:420ms; --t-slow:820ms; } /* ========================================================================== HEBREW / RTL, role remap Hebrew has no italic and no case. Both facts are handled here, once. ========================================================================== */ :root:lang(he), [lang="he"], [dir="rtl"]{ --display: var(--font-display-he); --body: var(--font-body-he); --hand: var(--font-hand); /* Hebrew has one hand face: Amatic SC */ --emphasis-style: normal; /* never fake a slant */ --emphasis-weight: 900; --track-label: 0; /* no tracking on Hebrew */ --lh-heading: 1.22; --lh-body: 1.82; } /* -------------------------------------------------------------------------- RTL RESET, global, and it is a real bug fix, not a precaution. Measured on /he/ before installing: 240 Hebrew-bearing elements, of which 14 inherited Latin tracking and 6 inherited uppercase. The worst was .about-credit-label at 2.29px letter-spacing on "היי, אני". BRAND.md §3 describes this as "58 uppercase rules and zero RTL resets"; the real figures are 63 uppercase rules and 120 [dir="rtl"] selectors that simply do not cover these cases. The defect is real either way. Retire the !important once those rules migrate to logical properties. -------------------------------------------------------------------------- */ [dir="rtl"], [lang="he"]{ text-align:start; } [dir="rtl"] *, [lang="he"] *{ text-transform:none !important; letter-spacing:0 !important; } /* -------------------------------------------------------------------------- EMPHASIS Split into two parts on purpose. (a) GLOBAL, the anti-fake-italic rule. Hebrew has no italic, so a browser asked for one synthesises an oblique. That is always wrong and it is worth fixing site-wide today (CLAUDE.md §13.3). (b) DEVIATION 4a, SCOPED, the accent colour. The authored file colours every on the site. Two places already own deliberately and would break: - coffee-with-tanya/coffee.css:638 wraps pull-quote text in as STRUCTURE, not emphasis. Colouring it turns a whole quote teal and bold, which is the exact bug §13.3 records for the old coral. - blog/blog.css:275 and :404 set their own treatment. So the colour applies on pages that have opted into the new ground, and blockquotes are excluded everywhere. -------------------------------------------------------------------------- */ /* (a) GLOBAL: font-style only. Hebrew never takes a slant, synthesized or otherwise. This corrects rendering without changing any weight or colour, so it is safe on all 41 coffee editions and every blog post. */ [dir="rtl"] em, [dir="rtl"] .em, [lang="he"] em, [lang="he"] .em{ font-family: var(--body); font-style: normal; /* belt and braces: block synthesized obliques */ } /* (b) SCOPED: weight and colour, on opted-in pages only. These were global in the authored file. Weight cannot be, either: `font-weight: var(--emphasis-weight)` set every Latin to 500, which measurably bolded the italics in coffee #42 and would have hit every blog post. CLAUDE.md's standing gotcha is that Tanya reads a weighted as unwanted bold, so quietly bolding 40+ published pages is the exact wrong direction. Verified after scoping: coffee em stays italic at its inherited weight, and no anywhere renders teal. */ .page-sheet em, .page-sheet .em{ font-style: var(--emphasis-style); font-weight: var(--emphasis-weight); color: var(--accent); } .page-sheet[dir="rtl"] em, [dir="rtl"] .page-sheet em, .page-sheet[lang="he"] em, [lang="he"] .page-sheet em{ font-style: normal; font-weight: 900; } .page-sheet[dir="ltr"] em, [dir="ltr"] .page-sheet em{ font-family: var(--font-display); } /* Pull quotes wrap their text in as STRUCTURE, not emphasis (§13.3). Without this a whole quote turns teal and bold. */ .page-sheet blockquote em{ color: inherit; font-weight: inherit; font-family: inherit; } /* -------------------------------------------------------------------------- EYEBROWS / LABELS Latin gets uppercase + tracking. Hebrew rebuilds the same rank with weight and size, because Hebrew has no uppercase. -------------------------------------------------------------------------- */ .eyebrow{ font-family: var(--body); font-size:.8rem; font-weight:600; color: var(--sec); text-transform: uppercase; letter-spacing: var(--track-label); } [lang="he"] .eyebrow, [dir="rtl"] .eyebrow{ text-transform:none; letter-spacing:0; font-weight:700; font-size:.86rem; /* Hebrew needs a touch more optical size */ } /* -------------------------------------------------------------------------- BASE TYPE DEVIATION 4b, the authored file paints `body` with the new ground unconditionally. Doing that today would flip ~130 pages to paper while their component CSS still assumes the dark canvas, and the dark override layer's hardcoded rgba(255,255,255,...) values would NOT follow a token change. Pages opt in with `body.page-sheet`; the dark layer is deleted once nothing references it. Same endpoint, never a half-migrated site. -------------------------------------------------------------------------- */ body.page-sheet{ font-family: var(--body); line-height: var(--lh-body); color: var(--ink); background: var(--base); } body.page-sheet h1, body.page-sheet h2, body.page-sheet h3{ font-family: var(--display); line-height: var(--lh-heading); } body.page-sheet[dir="rtl"] h1, [dir="rtl"] body.page-sheet h1, body.page-sheet[dir="rtl"] h2, [dir="rtl"] body.page-sheet h2, body.page-sheet[dir="rtl"] h3, [dir="rtl"] body.page-sheet h3{ font-weight:900; } body.page-sheet[dir="ltr"] h1, [dir="ltr"] body.page-sheet h1, body.page-sheet[dir="ltr"] h2, [dir="ltr"] body.page-sheet h2, body.page-sheet[dir="ltr"] h3, [dir="ltr"] body.page-sheet h3{ font-weight:700; } /* Display faces are display only. Never below ~16px. */ .mono, .meta{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; } /* Latin terms inside Hebrew running text keep their own direction */ .lat{ direction: ltr; unicode-bidi: isolate; display: inline-block; } /* -------------------------------------------------------------------------- DARK GROUNDS Antialiasing only where text sits light-on-dark, never globally. -------------------------------------------------------------------------- */ .on-dark{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------------------------------------------------- FOCUS -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- MOTION SAFETY Every animated component must render its finished state here. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }