/** * SCBL — Typography Tokens (variables only) * * Safe to load in the Gutenberg editor: this file ONLY declares CSS custom * properties + the @font-face import. It does not restyle , headings, * or links, so the WordPress editor UI keeps its native fonts and sizes. * * Block CSS (frontend) consumes these variables via var(--fs-...). */ @import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@400;500;600;800;900&family=Figtree:wght@400;500;600&display=swap'); :root { /* ─── Families ───────────────────────────────────────────────────── */ --font-primary: 'Zalando Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-secondary: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ─── Weights ────────────────────────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-extrabold: 800; --fw-black: 900; /* ─── Display (Zalando Sans, ExtraBold 800, UPPER) ───────────────── */ --fs-display-1: clamp(3.5rem, 6vw + 1rem, 6rem); /* 56 → 96 */ --fs-display-2: clamp(3rem, 5vw + 1rem, 5rem); /* 48 → 80 */ --fs-display-3: clamp(2.5rem, 4vw + 1rem, 4rem); /* 40 → 64 */ --fs-display-4: clamp(2.25rem, 3vw + 1rem, 3.5rem); /* 36 → 56 */ /* ─── Headings (Zalando Sans, SemiBold 600) ──────────────────────── */ --fs-h1: clamp(2.25rem, 3vw + 1rem, 3rem); /* 36 → 48 */ --fs-h2: clamp(2rem, 2.5vw + 1rem, 2.5rem); /* 32 → 40 */ --fs-h3: clamp(1.75rem, 1.5vw + 1rem, 2rem); /* 28 → 32 */ --fs-h4: clamp(1.375rem, 0.75vw + 1rem, 1.5rem); /* 22 → 24 */ --fs-h5: 1.25rem; /* 20 */ --fs-h6: 1rem; /* 16 */ --fs-h7: 0.875rem; /* 14 */ /* ─── Body / Regular ramp ────────────────────────────────────────── */ --fs-r1: 1.5rem; /* 24 */ --fs-r2: 1.25rem; /* 20 */ --fs-r3: 1rem; /* 16 — default body */ --fs-r4: 0.875rem; /* 14 */ --fs-r5: 0.75rem; /* 12 */ --fs-body: var(--fs-r3); --fs-small: var(--fs-r4); --fs-xs: var(--fs-r5); /* ─── Line heights ───────────────────────────────────────────────── */ --lh-tight: 1.25; /* 125% — Figma headings */ --lh-snug: 1.4; /* 140% — Figma body */ --lh-normal: 1.5; /* 150% — Figma links */ --lh-loose: 1.7; /* ─── Letter spacing (Uppercase ramp) ────────────────────────────── */ --ls-uppercase-sm: 0.04em; /* U1, U2 */ --ls-uppercase-md: 0.08em; /* U3, U4 */ --ls-uppercase-lg: 0.16em; /* U5 */ } @media (min-width: 48rem) { :root { --fs-h1: clamp(2.125rem, 2vw + 0.75rem, 2.625rem); /* 34 → 42 */ } }