/* * The Axis ยท design tokens * ------------------------ * Single source of truth for CSS custom properties. Mirror of theme.json so * that block editor and front end agree. Edit both files when a token changes. * * Brand guide reference: Branding/the-axis-brand-guide.html * WCAG 2.2 AAA: every body-text pair below clears 7:1. */ :root { /* Primary triad. Use the deep / dark ramps for text on paper. */ --red: #E63027; --red-dark: #B5251E; --red-deep: #7A1812; /* AAA body / CTA fill */ --red-pale: #F8D5D2; --yellow: #F4C518; --yellow-deep: #C99F0E; --yellow-amber:#E2A60B; --yellow-pale: #FCEFB8; --blue: #1B4A8F; --blue-dark: #0E2E5C; /* primary link colour, AAA */ --blue-mid: #2B6CB0; --blue-pale: #D3E0F2; /* Warm neutrals. Paper is never pure white. */ --ink: #1A1A1A; --graphite: #3D3D3D; --slate: #6B6B6B; --silver: #B5B2AC; --paper: #FAF7EF; --cream: #EFE9DC; --white: #FFFFFF; --line: rgba(26, 26, 26, 0.12); /* Type families. Self-hosted. */ --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif; --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, monospace; /* Type scale (major third, 1.25). */ --text-small: 0.875rem; /* 14 */ --text-body: 1rem; /* 16 */ --text-lede: 1.125rem; /* 18 */ --text-h3: 1.375rem; /* 22 */ --text-h2: 2rem; /* 32 */ --text-h1: 3.5rem; /* 56 */ /* Spacing scale (8px base, multiples of 8 with one half-step). */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; /* Structure. */ --rule: 2px solid var(--ink); --rule-hair: 1px solid var(--line); --radius: 0; --focus-ring: 3px solid var(--yellow); --focus-offset:2px; --target-min: 44px; --width-read: 720px; --width-full: 1320px; /* Motion. */ --ease-axis: cubic-bezier(0.2, 0.7, 0.2, 1); } /* Non-critical font faces. The two critical weights are preloaded in ; these declarations register the rest so font-display: swap is honoured. */ @font-face { font-family: "Archivo Black"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/archivo-black-latin.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-400-latin.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-700-latin.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/space-mono-400-latin.woff2") format("woff2"); }