/* tokens.css: design tokens only. Revision 4. Palette, type scale, spacing rhythm. No page styles, no components. Values and rationale are recorded in DIRECTION.md. */ :root { /* ---- Palette ------------------------------------------------------------ Revision 5. THE GROUND IS MERIT'S OWN BRAND NAVY, not a derived color. CLAUDE.md section 2 order of authority, level 1: an established client brand identity always takes precedence. Merit's logo is REGISTERED and in continuous use across site, signage and stationery. Revision 4 asserted that "no client brand is in use here" and derived a graphite ground from ANSI/ASME A13.1 instead. That assertion was wrong, it confused not REPRODUCING their logo with their identity not EXISTING. Corrected here. --navy and --wave are BRAND VALUES, sampled from the logo. Everything else is derived to work with them. --legend (A13.1 safety yellow) is retained as the single accent: it is absent from their identity, so it adds a conversion color without competing with the mark. ESTIMATES, NOT BRAND SPEC. --navy and --wave were sampled from a compressed JPEG, which CLAUDE.md section 2 requires be labelled as estimates and never presented as the client's actual values. Request vector artwork and exact hex or Pantone before production. See img/merit/SOURCES.md. Measured contrast, verified before implementation: sheet on navy 8.42:1 sheet on navy-deep 12.09:1 legend on navy 6.14:1 legend on navy-deep 8.81:1 navy on SOLID legend 6.14:1 <- primary action is a filled panel navy-deep on SOLID legend 8.81:1 mist on navy 5.59:1 mist on navy-deep 8.03:1 navy on sheet 8.42:1 muted on sheet 5.26:1 <- tightest pair on the site CONSTRAINTS, these fail AA and must never appear: --legend on --sheet (1.37:1) <- the yellow-on-light trap, the live risk --wave as body text (3.06:1 on navy) <- BRAND COLOR, but rules only, never text below 24px --muted on --navy (2.36:1) --mist on --sheet (1.51:1) Rule of thumb: --mist is the secondary text color on NAVY, --muted on SHEET. Not interchangeable. --legend is a fill on light panels, never text. --wave is structure, never type. */ --navy: #214176; /* BRAND, sampled estimate. Dominant ground */ --navy-deep: #16294A; /* derived from --navy. Alternate bands, raised blocks */ --wave: #4394CF; /* BRAND, sampled estimate. Rules and dividers ONLY */ --sheet: #E9EBEA; --legend: #F5C400; /* A13.1 safety yellow, the single accent */ --mist: #A9C4DE; /* secondary text on navy */ --muted: #5A6165; /* secondary text on sheet */ /* ---- Type families ------------------------------------------------------ A real pairing, which extended tier permits. Space Grotesk (display). SIL OFL 1.1, @fontsource/space-grotesk@5.2.5 IBM Plex Sans (body) / IBM Plex Mono (legend, data). SIL OFL 1.1 Both self-hosted, Latin subset, font-display: swap. See fonts/README.md. */ --font-display: "Space Grotesk", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Type scale --------------------------------------------------------- Explicit sizes, line-heights and tracking. Body leading 1.65, inside the 1.5-1.7 band required by CLAUDE.md section 3. Every fluid step carries a rem component in the middle term, not pure vw. A pure-vw middle term ignores the user's font-size setting: at a 200% root the headline would grow ~10% while body text doubled. This was recorded as an audit finding against revision 3 and is fixed here rather than inherited. */ --size-display: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); --leading-display: 0.95; --tracking-display: -0.03em; --size-h2: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem); --leading-h2: 1.08; --tracking-h2: -0.02em; --size-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --leading-h3: 1.25; --tracking-h3: -0.01em; /* A display headline dropping straight to lead is one enormous step: 80px to 21px with nothing between. --size-standfirst is the intermediate level for supporting copy that has to hold its own under a display headline. */ --size-standfirst: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); --leading-standfirst: 1.35; /* A headline set across the full container rather than at an 18ch measure carries more words per line, so it takes the lower of the two display steps. Same scale, not an arbitrary size. */ --size-display-long: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); --size-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --leading-lead: 1.55; --size-body: 1.0625rem; --leading-body: 1.65; --size-small: 0.9375rem; --size-meta: 0.8125rem; --leading-meta: 1.4; --tracking-meta: 0.1em; /* ---- Spacing rhythm ----------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --space-section: clamp(3.5rem, 8vw, 7rem); /* ---- Grid -------------------------------------------------------------- Editorial column with hanging margin. The margin is a real column, not a padding value: --rail carries the metadata (division number, county names, sector counts) that the composition exists to expose. */ --page-max: 96rem; /* 1536px. 82rem left 39% of a 1920 viewport unused */ /* ONE MEASURE CANNOT SERVE EVERY TYPE SIZE. --measure is derived from --size-body: 34rem is about 66 characters at 17px, which is right for prose and wrong for everything else. Applied to an 80px headline it gives roughly eight characters a line, so the headline stacks into a narrow column and the rest of the band reads as empty. So the measures are separate, and the display one is in `ch` rather than rem deliberately: ch is a function of the current font size, so a display measure written this way holds its character count as the type scales up the clamp, where a rem value would tighten as the type grew. */ --measure: 34rem; /* prose, ~66 characters at --size-body */ --measure-lead: 44rem; /* lead and standfirst, one step wider than prose */ --measure-display: 26ch; /* display type, ~26 characters a line at any size */ /* Pinned independently of --page-max. The carousel proportion is matched to Merit's own slideshow, so widening the page container must not drag the centre image up with it. */ --carousel-max: 82rem; --rail: 11rem; /* hanging margin column, desktop */ --rail-gap: 3rem; --gutter: clamp(1.25rem, 4vw, 4.5rem); /* ---- Interaction -------------------------------------------------------- */ --target-min: 44px; --focus-width: 3px; --duration-fast: 130ms; --duration-slow: 620ms; --easing: cubic-bezier(0.2, 0, 0.2, 1); --easing-out: cubic-bezier(0.16, 1, 0.3, 1); }