/* ============================================================================ Roadside Modern — design tokens Source of truth: docs/brianprice-design-visual-spec.md § 3, 4, 5, 9, 10 Nothing in this file should be overridden ad hoc; add a token instead. ========================================================================== */ :root { /* --- color: surfaces & ink ------------------------------------------ */ --paper: #f6eedc; /* default page background (cream stock) */ --paper-warm: #fff9ee; /* fine-print strips, cards-on-paper */ --sand: #e4d5b8; /* secondary surfaces, hover fills, block rules */ --ink: #2a2018; /* primary text, hard offset shadows */ --ink-soft: #5c5044; /* secondary text, captions */ --box: #17140f; /* shadow-box surround: hero frame, nav, footer */ /* --- color: brand ---------------------------------------------------- */ --gold: #f0a81e; /* THE brand color */ --gold-deep: #9a6a0a; /* gold that is safe as text on paper */ --rust: #c14f2a; /* interaction accent */ --rust-deep: #8f3a1d; /* rust at body size on paper (AA) */ --sky: #a8cbd9; /* --- color: case-study tints ----------------------------------------- */ --teal: #27655f; --teal-deep: #1c4a46; --avocado: #6e7a34; --avocado-deep: #4f5a22; --denim: #4e6e8c; --denim-deep: #3a5470; /* Per-page tint hooks. Case study pages set --tint / --tint-deep on ; everything tint-aware reads these two and nothing else. */ --tint: var(--rust); --tint-deep: var(--rust-deep); /* --- type ------------------------------------------------------------ */ --font-display: "Fraunces", "Cooper Black", Georgia, serif; --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --type-billboard: clamp(3.5rem, 9vw, 7.5rem); --type-h1: clamp(2.5rem, 5vw, 3.5rem); --type-h2: clamp(1.75rem, 3vw, 2.25rem); --type-h3: 1.375rem; --type-body: 1.0625rem; --type-eyebrow: 0.8125rem; --type-fine: 0.8125rem; --type-stat: clamp(4rem, 10vw, 6.5rem); /* Fraunces variable axes — the Windsor/Cooper wonk lives here. */ --display-variation: "SOFT" 100, "WONK" 1; /* --- space & shape ---------------------------------------------------- */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 192px; --measure: 65ch; --col-read: 720px; --col-break: 1000px; --col-max: 1200px; --gutter: 24px; --radius-card: 20px; --radius-pill: 999px; /* Screenprint misregistration: hard offset, never blurred. */ --shadow-hard: 4px 4px 0 var(--ink); --shadow-hard-lg: 8px 8px 0 var(--ink); --shadow-hard-hover: 6px 6px 0 var(--ink); --ringer: 2px solid var(--ink); /* --- motion ------------------------------------------------------------ */ --ease-peel: cubic-bezier(0.22, 1, 0.36, 1); --ease-slide: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 200ms; --dur-base: 300ms; --dur-slide: 400ms; --dur-peel: 500ms; --stagger: 60ms; /* --- chrome ------------------------------------------------------------ */ --nav-h: 64px; } /* Depth-zone body classes set the page's single hue block (spec § 3.4: one hue block maximum on paper pages, plus the truth strip). */ body.zone-fore { --tint: var(--gold); --tint-deep: var(--gold-deep); } body.zone-sky { --tint: var(--sky); --tint-deep: var(--rust-deep); } body.tint-teal { --tint: var(--teal); --tint-deep: var(--teal-deep); } body.tint-avocado { --tint: var(--avocado); --tint-deep: var(--avocado-deep); } body.tint-denim { --tint: var(--denim); --tint-deep: var(--denim-deep); } body.tint-rust { --tint: var(--rust); --tint-deep: var(--rust-deep); }