/* ═══════════════════════════════════════════════════════════════════════ EMERXING MEDIA — DESIGN TOKENS v7 Approved Calendly-inspired system per the release mandate §7. Bright surfaces · confident blue primary · dark readable text · pale blue supporting surfaces · restrained accents. Every value measured for WCAG 2.2 AA. No other palette is authorised. ═══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* ── §7 semantic tokens (authoritative) ────────────────────────────── */ --primary: #006BFF; /* Blue Ribbon. White on it = 4.62:1 */ --primary-hover: #0057D1; /* 6.39:1 */ --primary-active: #0046A8; /* 8.60:1 */ --page-background: #FFFFFF; --surface: #FFFFFF; --surface-subtle: #F0F6FF; /* pale blue supporting surface */ --text-primary: #102A3D; /* 15.05:1 on white. Phase 6: this is the EXACT disc colour of the approved master logo (Editorial Ink). Aligning the site's darkest surface to the brand's own ink is what lets the original lockup sit on the footer without a visible seam. */ --text-secondary: #44658A; /* 6.04:1 on white */ --link: #0046A8; /* 8.60:1 on white */ --accent: #AC8245; /* Muted Brass, from the brand document. Used only as a hairline / rule accent; never for text on white (3.4:1). */ --accent-ink: #6E4A10; /* 6.6:1 on white — brass, safe for text */ --border: #D6E2F0; --focus: #006BFF; --success: #0A6C3D; /* 6.51:1 on white */ --warning: #8A5300; /* 6.33:1 on white */ --error: #B3261E; /* 6.54:1 on white */ --disabled: #93A5B8; --footer-background: #102A3D; --footer-text: #FFFFFF; /* 12.62:1 */ --footer-muted: #B7CBE0; /* 7.59:1 */ --footer-label: #8EC0FF; /* 6.69:1 — primary is only 2.73:1 */ --surface-deep: #0046A8; /* accent band. White on it = 8.60:1 */ --success-bg: #E4F5EC; --error-bg: #FDECEA; /* ── structural aliases consumed by site.css ───────────────────────── */ --ink: var(--text-primary); --forest: var(--primary); --ivory: var(--page-background); --paper: var(--surface); --sage: var(--surface-subtle); --brass: var(--primary); --stone: var(--text-secondary); --brass-label: var(--link); --brass-label-dark: var(--footer-label); --ivory-dim: var(--footer-muted); --ink-press: #0A1D2B; --forest-press: var(--primary-active); --rule-dark: #2C4A5F; --clay-ink: var(--error); --clay-bg: var(--error-bg); --bg: var(--page-background); --bg-paper: var(--surface); --bg-sage: var(--surface-subtle); --bg-ink: var(--footer-background); --bg-forest: var(--surface-deep); --text: var(--text-primary); --text-muted: var(--text-secondary); --on-dark: var(--footer-text); --on-dark-muted: var(--footer-muted); --label: var(--link); --label-dark: var(--footer-label); --rule: var(--border); /* ── Type ──────────────────────────────────────────────────────────── */ --serif: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fr-display: "opsz" 144, "SOFT" 20, "WONK" 1; --fr-text: "opsz" 24, "SOFT" 0, "WONK" 0; --t-display: clamp(38px, 3.4vw + 1rem, 76px); --t-h1: clamp(38px, 3.0vw + 1rem, 68px); --t-h2: clamp(32px, 1.9vw + 1rem, 54px); --t-h3: clamp(23px, 0.7vw + 1rem, 32px); --t-h4: clamp(18px, 0.3vw + 1rem, 21px); --t-body-lg: clamp(19px, 0.4vw + 1rem, 22px); --t-body: clamp(17px, 0.2vw + 1rem, 19px); --t-body-sm: clamp(14px, 0.15vw + .8rem, 16px); --t-label: 12px; --t-meta: 13px; --t-button: 16px; --t-caption: 13.5px; --t-foot-link: 15px; --t-legal: 12.5px; --lh-display: 1.04; --lh-head: 1.14; --lh-body: 1.62; --lh-tight: 1.32; --track-label: .16em; --measure: 62ch; --measure-read: 720px; /* ── Spacing ───────────────────────────────────────────────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:112px; --s12:128px; /* ── Grid ────────────────────────────────────────────────────────────── Phase 4 L-01. --section previously peaked at 112px, so two adjacent bands of different colours put 224px of empty ground between them at 1440 and above. Measured on the rejected preview, that was the largest single source of "excessive empty space". The band change itself is the separation; the padding only has to keep content off the seam. L-02: one column gap for the whole site, slightly wider, so the 12-column rail is legible rather than incidental. */ --container: 1240px; --gutter: 20px; --col-gap: clamp(20px, 2.1vw, 36px); --section: clamp(44px, 4.2vw, 92px); --section-sm: clamp(34px, 2.9vw, 62px); /* Vertical rhythm inside a section: header → body → tail. L-05: the minimums matter more than the maximums. A mobile page is long because every multi-column section restacks, so each restacked block pays the gap again. These minimums are deliberately below the desktop scale. */ --gap-head: clamp(22px, 2.6vw, 48px); --gap-block: clamp(18px, 2.2vw, 36px); /* One magazine, one size, expressed as a share of its grid track so the artwork fills the column instead of floating in the middle of it. */ --cover-max: 440px; --cover-max-hero: 460px; --radius: 4px; --radius-lg: 8px; --tap: 44px; --lift: 0 1px 2px rgba(16,42,61,.06); --lift-card: 0 3px 14px rgba(16,42,61,.08); --lift-cover: 12px 18px 44px rgba(16,42,61,.20); /* ── Motion (§23) ──────────────────────────────────────────────────── */ --dur-instant: 0ms; --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease: cubic-bezier(.2,.6,.3,1); }