/* =================================================================== tokens.css — Podcast Episode Audit Written 6 September 2026, from the decisions taken that evening. Specimen: design-reference/type-test.html Every colour and every size in the product comes from this file. Nothing downstream writes a hex value or a pixel number of its own. Change a number here and the whole system follows. THIS IS THE LIVE FILE, and the only one. Every page and both PDFs read it from feed-check/. Decision A, 11 September 2026. The copy that used to sit in design-reference/ is now a pointer to this one. Values, plus ONE kind of rule: the font rules below. They say where the Barlow files are, and they live here because this is the one sheet that every page and both PDFs load. =================================================================== */ /* --- THE FONT FILES ---------------------------------------------- Added 11 September 2026. Before this, no page loaded the fonts at all: anyone without Barlow installed was reading a fallback. The paths are read from THIS file's folder — fonts/ beside tokens.css. WeasyPrint reads them the same way when the stylesheet is handed to it as a file; proved by tests/weasyprint-probe/ on 11 September. font-display: swap shows text at once in the fallback face and swaps to Barlow when the file arrives, so nobody waits on a blank page. ⚠ These files are the LATIN subset. A character outside it — the arrow → was one — is drawn from whatever other font the machine has. On a ** 17 September 2026: the arrows are gone. Barlow HAS » and ›, checked in the font files themselves, and » is what the report uses now. ** screen that is invisible; in a PDF on a rented box it can be an empty box. See BUILD-for-mac.md section 6, the glyph trap. ----------------------------------------------------------------- */ @font-face{ font-family:"Barlow"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/barlow-latin-400-normal.woff2") format("woff2") } @font-face{ font-family:"Barlow"; font-weight:400; font-style:italic; font-display:swap; src:url("fonts/barlow-latin-400-italic.woff2") format("woff2") } @font-face{ font-family:"Barlow"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/barlow-latin-500-normal.woff2") format("woff2") } @font-face{ font-family:"Barlow"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/barlow-latin-600-normal.woff2") format("woff2") } @font-face{ font-family:"Barlow Semi Condensed"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2") } @font-face{ font-family:"Barlow Semi Condensed"; font-weight:400; font-style:italic; font-display:swap; src:url("fonts/barlow-semi-condensed-latin-400-italic.woff2") format("woff2") } @font-face{ font-family:"Barlow Semi Condensed"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2") } @font-face{ font-family:"Barlow Semi Condensed"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2") } :root{ /* --- COLOUR ------------------------------------------------------ Hamish's own five swatches. These are the palette; everything else in this block is derived from them or is a named role. ⚠ THE COLOUR RULE, AND IT HAS NO EXCEPTIONS: Blocks of colour with dark ink on top. NEVER coloured type on the cream. Measured: teal type on cream is 2.3:1 — unreadable at any size. Ink on teal is 6.4:1. Brown behaves the same way. ----------------------------------------------------------------- */ --ground: #F5F0E8; /* page ground — warm cream */ --surface: #EFEAE5; /* second surface — cards sitting on the ground. Two creams a shade apart is what lets a finding card sit there WITHOUT a border. Use this before reaching for a rule. */ --ink: #202020; --brown: #A2896F; /* highlight, quiet */ --brown-fill: #CCBCAC; /* ADDED 11 September, Hamish. A lighter brown for BLOCKS WITH WRITING ON THEM — the beta bars, the verdict, the example bar, the error line, "act now". Ink on it is 8.81:1; on the swatch it was 4.92:1, which passed but read as muddy. --brown itself is unchanged and stays for marks with no writing on them. Derived: the swatch taken halfway to --ground. */ --teal: #23AAB0; /* highlight, primary */ --orange: #EA5513; /* second accent — see the rule below. CORRECTED 10 September from #E05112: ink on that measured 4.15:1, which passes only for large text, and orange carries button labels. #EA5513 gives 4.51:1 and passes at every size, on screen and on paper. Visually all but identical. */ /* Derived. Not Hamish's swatches: ink mixed toward the ground, for text that has to sit back without leaving the ink family. */ --ink-soft: #5C5952; /* secondary text, captions, caveats */ --ink-faint: #6D6861; /* uppercase labels, the quietest text on the page. CORRECTED 10 September from #8A857C, which measured 3.23:1 on the ground and needs 4.5:1 — every 15px uppercase label on the page failed. This clears both creams: 4.87:1 on ground, 4.62:1 on surface. */ --rule: #DDD6CB; /* hairlines and table borders */ /* WHICH ACCENT DOES WHICH JOB. Proposed by Claude, Hamish's to overrule. One accent describes, the other asks. teal — the audit's own furniture: counts, What to do blocks, section rules. It reports. orange — anything asking the reader to ACT: the deep audit call to action, the beta buttons. It asks. ⚠ 11 September, Hamish: orange is an OUTLINE on those buttons, never a fill under writing — small dark writing on orange does not work. */ --accent: var(--teal); --accent-action: var(--orange); /* LINKS ARE INK WITH AN UNDERLINE. Decided 6 September. Teal cannot be link text — it fails contrast on the cream — and a second darker teal was rejected as one more value to keep straight across three stylesheets. This also prints correctly in black. */ --link: var(--ink); --link-underline: 1.5px; /* --- TYPE -------------------------------------------------------- Barlow superfamily, self-hosted as woff2. No Google Fonts call: no third-party request, faster, and no privacy question on a page that will be taking money. Body is Barlow REGULAR, not Condensed. Tested on a phone 6 September at three settings and the condensed cuts lost. Headings are Barlow Semi Condensed. ----------------------------------------------------------------- */ --face-body: "Barlow", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --face-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif; --face-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* DISPLAY — type set large for effect rather than for reading. The .display utility in CLASSES.md B2. Barlow for now, decided 10 September: it costs no new font file. Barlow Condensed remains the upgrade if this reads too close to the body face. --lh-tight below is its line height. */ --face-display: var(--face-body); /* THE LADDER. Signed off 6 September, in this order: 15.5 was too small → 20 → 22, then the headings moved to keep their step above it. */ --t-h1: clamp(34px, 7vw, 46px); /* page headline */ --t-show: clamp(27px, 4.6vw, 34px);/* the show's title on the audit */ --t-sec: 33px; /* section heading — "Not working" */ --t-find: 28px; /* finding heading */ --t-count: 26px; /* the count beside it */ --t-lead: 23px; /* the roll-up's lead line */ --t-body: 22px; /* BODY PARAGRAPH — the base of everything */ --t-do: 22px; /* the What to do block — same size as the body, the teal fill does the separating */ --t-secd: 18px; /* section description */ --t-small: 16px; /* caveats, small print, stat captions */ --t-mono: 15px; /* the fixed-width block */ --t-stat: 34px; /* stat number */ --t-label: 15px; /* uppercase labels — raised from 13, too small */ --t-tile-date: 11px; /* a catalogue tile's date, "12 MAR 2024" — small on purpose, so it fits under the tile (25 Sep 2026) */ --t-display: clamp(40px, 8vw, 58px); /* .display — above the h1, on purpose */ --lh-body: 1.55; --lh-head: 1.15; --lh-tight: 1.06; /* the largest display sizes only */ /* Uppercase labels are ALWAYS weight 600. Tried at 400 on the What to do block, looked wrong, reverted the same evening. */ --w-label: 600; --track-label: .14em; /* --- MEASURE ----------------------------------------------------- ⚠ THIS IS NOT OPTIONAL AT 22px. The old page capped paragraphs at 48em. At 15px that was already about 95 characters a line; at 22px it is unreadable. 34em is roughly 65 characters at any size, because it is measured in ems. Applies to running text: finding paragraphs, section descriptions, roll-up list items, the limits block. NOT to the What to do panel — that is a filled block, not running text. ----------------------------------------------------------------- */ --measure: 34em; --measure-lead: 32em; /* the roll-up lead line, which wants to be shorter */ /* ⚠ ON PAPER THE MEASURE WIDENS. Added 14 September 2026, TODO.md A5 item 4. A screen column and a printed one are not the same problem: on screen the reader's window sets the width and 34em is a kindness, but on A4 the card is a fixed 176mm and a paragraph stopping at 119mm sits above a full-width teal block. Hamish, reading the paper proof: it reads as a fault rather than a choice. 44em leaves about 12mm at the right — still a measure, no longer a ragged gap. The remedy block takes no measure at all, on purpose, and that stays. */ --measure-print: 44em; --page: 1000px; /* the outer container */ /* --- SPACE ------------------------------------------------------- Proportions from design-reference/brave-man-project.ulss, tightened for card interiors. ----------------------------------------------------------------- */ --s-1: 5px; --s-2: 9px; --s-3: 14px; --s-4: 20px; --s-5: 30px; --s-6: 44px; --s-7: 66px; /* --- EDGES ------------------------------------------------------- Added 11 September, Hamish, choosing from two drawn options. A box is the PAGE cream with a thin line round it — like the old offer page he liked. The KPI figures are the exception: the darker card cream, and the line. A block that is already a colour (teal, brown) gets no line, and neither does a box inside a box. ----------------------------------------------------------------- */ --edge: 1px; /* the thickness of every box's line */ --radius: 10px; /* every box, and every block of colour */ --radius-inner: 6px; /* a box inside a box: the evidence, What to do */ } /* =================================================================== NOT IN THIS FILE, AND DELIBERATELY PRINT SIZES. The print sheet runs around 9.9pt because paper is held closer than a phone. It does NOT get scaled by the same factor as the screen. Set it against a proof, in step 6, on its own terms. DARK MODE. The product is light and warm by decision. There is no dark palette to define. =================================================================== */