/* ============================================================ tokens.css — shared design tokens for every live page. Load with as the FIRST stylesheet in , before styles.css / site-chrome.css and any page-specific stylesheet. Do NOT @import it — @import serializes the request waterfall, and two page stylesheets already have a load-bearing @import as their own first line. Custom-property substitution is late-bound: when the media queries below redefine --gutter (or --text-*), every rule that consumes var(--shell) / var(--text-sm) / etc. anywhere in the cascade picks up the new value automatically. No per-component overrides needed. ============================================================ */ :root { /* Layout rail */ --gutter: 48px; --gutter-safe: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --shell: min(1120px, calc(100% - var(--gutter-safe) * 2)); /* Chrome geometry */ --nav-h: 60px; --announcement-h: 44px; --tap: 44px; --tap-lg: 56px; --overlay-gutter: 48px; /* Safe-area insets (iOS home indicator / notch) */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 112px; /* Focus ring. Must clear WCAG 2.4.11's 3:1 on BOTH section families, which bounds its luminance to roughly 0.12-0.26. The old #ffca28 measured 1.33:1 on Paper and 1.5:1 inside the white nav overlay — effectively invisible on the site's default backgrounds. Cobalt measures 5.1:1 on Paper (#f3efe6) and 3.2:1 on Dark (#0d1113), and is already the brand accent. */ --focus-ring: #2458e8; /* Hoisted from styles.css / site-chrome.css: both files declared these identically, so they now live in exactly one place. Colour tokens, --serif/--sans, --shadow and --glass-* stay in those two files unchanged — out of scope for this pass. */ --measure-wide: 960px; --measure-prose: 800px; --measure-narrow: 640px; --section-y: clamp(64px, 8vw, 112px); --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-display: 40px; --text-hero: 48px; --weight-regular: 400; --weight-medium: 500; --tracking-display: -0.035em; } @media (max-width: 1180px) { :root { --gutter: 28px; } } @media (max-width: 980px) { :root { --gutter: 24px; --nav-h: 56px; /* 60, not 44: the bar has to fit a 44px tap target plus 8px of clearance above and below so its link is not adjacent to the nav controls. It no longer costs fixed viewport space — the bar scrolls away on mobile. */ --announcement-h: 60px; --shell: min(900px, calc(100% - var(--gutter-safe) * 2)); } } /* 360, not 430: every current iPhone is 360-430pt wide (SE 375, 13/14 390, 14 Pro 393, 15 Pro Max 430), so a 430 rung would hand 20px to every phone on the market and 24px only to tablets. 24px is the phone gutter; 20px is reserved for genuinely narrow devices (12 mini 360, older 320). */ @media (max-width: 360px) { :root { --gutter: 20px; } } /* Mobile type scale — redefines the existing --text-* token names so every font-size: var(--text-sm) upgrades with no per-component work. Must win over the desktop values declared in styles.css / site-chrome.css, which is why those two files no longer declare --text-* unconditionally. */ @media (max-width: 980px) { :root { --text-xs: 13px; /* was 11 */ --text-sm: 15px; /* was 12 */ --text-base: 16px; /* was 14 */ --text-md: 17px; /* was 16 */ --text-lg: 19px; /* was 18 */ --text-xl: 21px; /* was 20 */ --text-2xl: 26px; /* was 24 */ } /* Mockups are pictures of an app, not reading copy. Hard floor 8px. */ .product-ui, .hi-embed, .evidence-map, .affiliate-dashboard, .source-record, .mockup-drom { --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; } } /* ------------------------------------------------------------ Utilities .hit-target — invisible hit-area expander for icon-only controls. Zero visual change: the ::after pseudo-element grows the click/tap area to var(--tap) without touching the icon's own drawn size. Apply to any icon-only control (e.g. .team-card__linkedin) that is visually smaller than 44px. Lives here (not styles.css/site-chrome.css) because tokens.css is the one file every live page loads. ------------------------------------------------------------ */ /* Lives here, not in styles.css: /demo/ loads site-chrome.css instead of styles.css, so the house focus ring never reached it and every control on that page fell back to the browser default. tokens.css is the one stylesheet every page loads. Offset keeps the ring outside filled buttons, so it lands on the section background where the contrast above was measured. */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .hit-target { position: relative; } /* Centred fixed-size box rather than a negative inset derived from the icon's own width: an inset formula silently stops reaching 44px the moment someone resizes the icon (a 24px mark shrunk to 16px yields 36px, not 44). */ .hit-target::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--tap); height: var(--tap); transform: translate(-50%, -50%); }