/* ============================================================================ tokens.css — the composition scale for every site in this workspace. ============================================================================ WHY THIS FILE EXISTS Every enforceable number in Skills/ was an asset, QA or content constraint — 375/768/1440, WCAG 4.5:1, 500/250 words, 44px targets, ~1600px WebP, 70vh hero. Composition had no numbers at all: no type scale, no spacing scale, no container, no grid rule, no link colour, no card-vs-list threshold. It was delegated entirely to prose reasoning, and prose reasoning degrades over a long build session. The Montana Builders Venetian Plaster page is the receipt: body content landing on four different left edges, 2-word items wearing card chrome, a 4-column grid ending in a 2-item orphan row, long prose centred, and a button measured at 1.96:1 against a 4.5 requirement. Every value below was measured off that page while fixing it. None was invented first and applied after. THE STANDING RULE No stylesheet in any site may define a raw font-size, padding, margin or max-width. Every one is a var() from this file. The reason is not tidiness. A raw number is a decision made once, in one place, by whoever was looking at one section — and it cannot be checked, because there is nothing to check it against. A token can be asserted: once --lede is a token and --h2 is a token, "the lede must never be larger than the H2" stops being a paragraph someone has to remember at section fourteen and becomes a comparison a script makes in a millisecond. Raw numbers are also how four left edges happen: nobody chose them, they accumulated. Where a site genuinely needs a value this file does not have, add it here rather than inlining it. A one-off raw number is the first of four. ========================================================================= */ :root { /* ---- type scale -------------------------------------------------------- Measured at 1440 on the fixed page. The scale is deliberately short: nine steps, each with a job. Anything between two steps is a step too many. */ --fs-label: 13px; /* eyebrows, meta, form labels */ --fs-sm: 15px; /* footer, captions, fine print */ --fs-list: 16px; /* list items in a taglist or capability list */ --fs-body: 17.5px; /* body copy — measured; reference site ran 17.9 */ --fs-lead: 20px; /* a lead paragraph inside a section */ --fs-h3: 23px; /* card titles, sub-heads */ --fs-lede: 29px; /* the AI-Overview paragraph under the hero */ --fs-h2: 48px; /* body-section headings */ --fs-h2-major: 54px; /* section headings in a full-width band */ --fs-h1: 92px; /* page title, once per page */ /* HIERARCHY INVARIANT, asserted by checks/hierarchy-check.mjs: --fs-h1 > --fs-h2-major >= --fs-h2 > --fs-lede > --fs-body --fs-lede can never exceed --fs-h2. Measured here: 29 < 48. The content-pack rule used to say the overview paragraph gets "slightly larger type", which has no ceiling and therefore no failure condition. --fs-h3 is deliberately NOT in that chain. A card title is a heading at a different level from a page lede, and 29 > 23 here is correct rather than an inversion — the check compares section-level headings only. Enforcing the literal h3 >= lede reading failed 60 pages that were right. */ --lh-tight: 1.04; /* display headings */ --lh-heading: 1.1; /* section headings */ --lh-body: 1.75; /* body copy — measured 30.6/17.5 */ --lh-list: 1.5; /* ---- spacing scale ----------------------------------------------------- Measured from the section padding already in use. Six steps plus two section rhythms. */ --sp-1: 8px; --sp-2: 14px; --sp-3: 16px; --sp-4: 22px; --sp-5: 30px; --sp-6: 44px; --sp-section: clamp(56px, 6.5vw, 92px); /* standard band */ --sp-section-lg: clamp(70px, 8vw, 112px); /* opening band under a hero */ /* ---- container --------------------------------------------------------- ONE container width. Every section's inner wrapper uses it, so every section reports the same left edge — asserted by checks/container-check.mjs. At 1440 this measures a 92px left edge, which is the number the check compares against. */ --container: 1240px; --container-width: 92%; /* gutter; yields the 92px edge at 1440 */ --measure: 62ch; /* prose column */ --measure-wide: 68ch; /* single-column prose with no art beside it */ /* ---- colour: link and accent ------------------------------------------ The accent rule already covered the accent. It said nothing about link colour, which is how a button ended up at 1.96:1 — a nav rule won on specificity and painted white button text muted grey on the rust ground. Link colour is therefore declared per ground, and every one of these clears 4.5:1 against the ground it names. */ /* ---- call to action ---------------------------------------------------- Measured off the final-cta band already on the page: 54px heading on rgb(51,62,53) with white type. A mid-page CTA uses the same two, which is what makes it read as a CTA rather than as another prose band — the one on Montana Builders sat on the same transparent paper as both its neighbours, five light bands in a row, which is the failure the Homestead band-rhythm note already records. */ --fs-cta: 54px; --ground-cta: rgb(51, 62, 53); --on-cta: #ffffff; --link-on-light: var(--ink); /* prose links on paper */ --link-on-dark: #ffffff; /* prose links on ink or pine */ --link-on-accent: #ffffff; /* anything sitting on the accent */ --link-underline: 1px solid currentColor; /* ---- grid -------------------------------------------------------------- Card-vs-list threshold, measured across every grid on the site: real card grids median 26 words per item (services), 12 (promise) chip grids that read as broken median 2-3 words The boundary sits in that gap. See checks/grid-check.mjs. */ --grid-card-min-words: 8; /* under this median, never card chrome */ --grid-card-min-item: 260px; /* auto-fit track floor for real cards */ --grid-gap: var(--sp-5); }