/* bb_tokens.css - the platform's PRIMITIVES. One definition, every page. * * Loaded by `_premium_head.html`, so it reaches the login, the agency portal, the admin tree, the * super-admin console and all four knowledge-base pages; the KB templates link it directly as well, * so those pages do not silently lose their type scale if that include is ever moved. * * 🔴 NO COLOUR LIVES HERE, ON PURPOSE. The portal is AGENCY-THEMED - its palette comes from the * registry as `{{ theme.bg }}` / `{{ theme.accent }}` and differs per tenant (Extrablack is black * and amber, 100% Digital is blue), while the knowledge base is gold on near-black. A shared colour * token would either be wrong for one of them or force them to look alike. What IS shared is * everything structural: the type scale, the space grid, the radii, the shadows and the easings. * * --- WHY THIS FILE EXISTS ----------------------------------------------------------------------- * Before 2026-09-23 these pages carried roughly TWENTY-FIVE different font sizes between them * (7.5 8 9 9.5 10 10.5 11 11.5 12 12.5 13 13.5 14 14.5 15 15.5 16 17 20 21 22 23 26 38) and no two * of them meant anything different from each other. There are now SEVEN steps, each with a job. * A page uses the subset it needs - the dense tools live in the first five, the front door reaches * for the last two - and nothing on any screen sits between them. * * 🔴 IF YOU NEED A SIZE THAT IS NOT HERE, YOU NEED A WEIGHT. Adding an eighth step is how the * twenty-five came back the first time. Emphasis without extra size is what `--fw-*` is for. * * Two rules the scale encodes, both from Apple's type guidance: * - TRACKING IS SIZE-SPECIFIC. Letters read too far apart as they grow, so the large steps carry * negative tracking; small text reads too tight, so the small steps are opened up. One * letter-spacing value applied to everything is wrong somewhere by definition. * - LEADING TRACKS SIZE INVERSELY. Tight on the display steps, generous on body copy. Each size * therefore ships WITH its line-height and its tracking - use the three together or the step * does not do its job. */ :root{ /* --- type ------------------------------------------------------------------------------------ step size used for */ --fs-caption:11px; /* pills, badges, table heads, timestamps, micro-labels */ --fs-small:12px; /* secondary text, chips, notes, helper copy */ --fs-body:13px; /* THE base: rows, inputs, prose, buttons */ --fs-title:15px; /* panel titles, card titles, tile headings */ --fs-heading:19px; /* a section's heading, a modal's title, a dense tool's page title */ --fs-display:24px; /* the biggest thing in its context: a page H1, a KPI figure */ --fs-hero:32px; /* one per page at most. The front door's hero mark. */ --lh-caption:1.45; --lh-small:1.5; --lh-body:1.55; --lh-title:1.38; --lh-heading:1.28; --lh-display:1.16; --lh-hero:1.05; --tr-caption:.012em; --tr-small:.004em; --tr-body:0; --tr-title:-.008em; --tr-heading:-.018em; --tr-display:-.022em; --tr-hero:-.028em; /* Four weights. 800 and 900 are gone from every surface that loads this file: past --fw-bold the face stops adding authority and starts adding noise, and it was most of why these pages read as heavy rather than as confident. */ --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; /* --- space: a 4px grid, named by role so a gap is a decision rather than a guess ------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* --- radius: nested surfaces step DOWN, never up -------------------------------------------- */ --r-xs:6px; --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:22px; /* --- elevation: a bigger surface reads as a thicker one ------------------------------------- */ --el-1:0 1px 2px rgba(0,0,0,.34); --el-2:0 4px 16px -4px rgba(0,0,0,.48), 0 1px 3px rgba(0,0,0,.3); --el-3:0 18px 48px -12px rgba(0,0,0,.66), 0 2px 8px rgba(0,0,0,.38); --el-4:0 32px 80px -16px rgba(0,0,0,.74), 0 4px 12px rgba(0,0,0,.42); /* --- motion --------------------------------------------------------------------------------- --ease-out decelerates: it leaves fast and settles slowly, which is what a real object does. --ease-spring carries a little overshoot and is for things a gesture threw, never for something that merely appeared. `ease-in` is deliberately absent: it delays the first frame, which is the frame the eye is on, so it feels slower than ease-out at the same duration. */ --ease-out:cubic-bezier(.32,.72,0,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:110ms; --t-base:180ms; --t-slow:280ms; --blur:20px; } /* --- the type utility --------------------------------------------------------------------------- A step is a SET - size, leading and tracking move together - so these three-line classes exist to stop a rule taking the size and leaving the other two behind, which is how a heading ends up correctly sized and still reading loose. */ .t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--tr-caption)} .t-small {font-size:var(--fs-small); line-height:var(--lh-small); letter-spacing:var(--tr-small)} .t-body {font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--tr-body)} .t-title {font-size:var(--fs-title); line-height:var(--lh-title); letter-spacing:var(--tr-title)} .t-heading{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)} .t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)} .t-hero {font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--tr-hero)} /* Figures are read in columns against the figure above them, so they are tabular wherever they are counted, paced or compared. Doing it once here is what stops a number shifting sideways as it counts up. */ .tnum,[data-num]{font-variant-numeric:tabular-nums}