/* ============================================================================ RTR design tokens — THE single source of truth for the campaign's look. Consumed by: the website (assets/campaign.css + page CSS), the web Briefs, and (values mirrored) the Working-Paper Typst theme. Change a value HERE and it propagates everywhere — no per-page hand-rolling. Light + dark are both first-class: semantic role tokens are remapped per theme. Default = light; dark via prefers-color-scheme OR an explicit data-theme on (set by assets/theme.js, persisted). ============================================================================ */ :root { /* --- brand primitives (the WP/Brief palette; never reference these directly in components — use the semantic roles below) --- */ --rtr-red: #BD3341; --rtr-red-2: #9c2a36; /* darker red for hovers/dark-bg */ --rtr-blue: #28427B; --rtr-blue-2: #4a63a0; /* lighter blue for dark-bg */ --rtr-ink: #1A1A1A; --rtr-paper: #ffffff; --rtr-wash: #f5f3ef; --rtr-cream: #f1e8d3; --rtr-muted: #5d6a71; /* AA (≥4.5:1) on both paper and the cream surface */ --rtr-line: #d7d7d7; /* --- type (FOSS / OFL only) --- */ --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif; /* condensed display */ --font-serif: "Source Serif 4", "Georgia", serif; /* reading */ --font-ui: "Inter Tight", system-ui, sans-serif; /* UI / nav / labels */ --font-mono: "PT Mono", "Menlo", monospace; /* eyebrows / meta */ /* fluid type scale (mobile-first; grows with viewport) */ --t-eyebrow: .75rem; --t-body: clamp(1rem, .96rem + .25vw, 1.125rem); --t-h3: clamp(1.05rem, 1rem + .6vw, 1.25rem); --t-h2: clamp(1.35rem, 1.2rem + 1.6vw, 1.9rem); --t-h1: clamp(2.2rem, 1.6rem + 5vw, 4rem); --t-display: clamp(2.2rem, 1.5rem + 4vw, 4rem); /* spacing / radius / motion */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --radius: 2px; --maxw-page: 960px; /* THE standard page width — every page's shell uses this */ --maxw-read: 720px; /* narrower reading column for prose inside a page */ --ease: cubic-bezier(.2,.6,.2,1); /* ---------- SEMANTIC ROLES — LIGHT (default) ---------- */ --bg: var(--rtr-paper); --surface: var(--rtr-wash); --surface-2: var(--rtr-cream); --text: var(--rtr-ink); --text-soft: #3a3a3a; --text-muted:var(--rtr-muted); --accent: var(--rtr-red); --accent-2: var(--rtr-blue); --on-accent: #ffffff; --rule: var(--rtr-line); --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); } /* ---------- SEMANTIC ROLES — DARK ---------- */ /* explicit toggle */ /* warm dark — a deep warm ink, not cold black, to suit the cream/red brand */ :root[data-theme="dark"] { --bg: #16130f; /* warm near-black */ --surface: #201c16; --surface-2: #2a241b; --text: #f3efe6; /* warm cream */ --text-soft: #d9d2c4; --text-muted:#a89f8e; /* warm muted */ --accent: #e2606c; /* brighter red for AA contrast on dark */ --accent-2: #7b95cf; /* brighter blue, readable on dark */ --on-accent: #16130f; --rule: #38312a; /* warm hairline */ --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5); } /* system preference when no explicit choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#16130f; --surface:#201c16; --surface-2:#2a241b; --text:#f3efe6; --text-soft:#d9d2c4; --text-muted:#a89f8e; --accent:#e2606c; --accent-2:#7b95cf; --on-accent:#16130f; --rule:#38312a; --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.5); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }