/* ========================================================================== tokens.css — design tokens for the Hyper Reality report -------------------------------------------------------------------------- A flat, cool digital report in the register of a modern consultancy publication: near-white cool canvas, crisp near-black ink, essentially no color. NO texture, NO grain, NO page depth — sections lie flat on the page. Color strategy is RESTRAINED — one accent, used only on chapter numerals and the headline figure. Everything else is ink on near-white. Neutrals are cool greys (a hair toward blue), never warm. ========================================================================== */ :root { /* --- Surface & ink ----------------------------------------------------- Cool near-white canvas; crisp near-black ink. Kept a hair off pure #fff / #000 so it reads as a considered publication, not a raw default. */ --paper: #FAFAF8; /* cool near-white canvas */ --paper-sunk: #F2F2EF; /* a half-step deeper, for set-apart areas */ --paper-raised: #FFFFFF; /* a half-step lighter, table zebra etc. */ --ink: #141414; /* crisp near-black */ --ink-soft: #4A4A48; /* muted ink — captions, metadata, labels */ --ink-faint: #6B6B68; /* faintest ink — overlines, fine print (AA on all bg) */ --rule: #E3E3DF; /* cool hairline rule */ --rule-strong: #C9C9C4; /* a heavier cool hairline for openers */ --selection: #E4E7EC; /* text selection background (cool) */ /* --- Accent candidates ------------------------------------------------- THREE restrained, sophisticated accents to compare against the paper. All pass WCAG AA (>=4.5:1) for text-sized use on --paper (#F7F5F0). Default :root is Candidate A. Switch the whole document by adding `accent-b` or `accent-c` to the element. A — OXBLOOD deep burnt red-brown. Contrast on paper ~7.9:1. (default) B — INK-BLUE muted slate navy. Contrast on paper ~9.4:1. C — FOREST/OLIVE deep pine green. Contrast on paper ~6.6:1. */ --accent: #7A2B22; /* A — oxblood */ --accent-strong: #5E2019; /* pressed / hover variant of A */ } /* Candidate B — ink-blue */ html.accent-b { --accent: #234155; /* ink-blue */ --accent-strong: #1A3140; } /* Candidate C — forest / olive */ html.accent-c { --accent: #34492F; /* forest/olive */ --accent-strong: #283821; } :root { /* --- Type families ----------------------------------------------------- Newsreader (opsz/wght variable transitional serif) for display + headings. Inter for body and UI. Self-hosted woff2 via fonts.css. */ --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* --- Fluid type scale -------------------------------------------------- A major-third-ish scale that widens at the top. clamp(min, fluid, max). --step-0 is the body size. */ --step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem); --step-0: clamp(1.06rem, 1.01rem + 0.27vw, 1.25rem); --step-1: clamp(1.28rem, 1.18rem + 0.50vw, 1.66rem); --step-2: clamp(1.53rem, 1.36rem + 0.86vw, 2.21rem); --step-3: clamp(1.84rem, 1.56rem + 1.40vw, 2.94rem); --step-4: clamp(2.21rem, 1.77rem + 2.18vw, 3.91rem); --step-5: clamp(2.65rem, 2.00rem + 3.27vw, 5.20rem); --step-6: clamp(3.18rem, 2.21rem + 4.83vw, 6.92rem); /* Display step for the cover figure — allowed to go very large. */ --step-display: clamp(4.5rem, 2.4rem + 10.5vw, 13rem); /* --- Spacing scale (fluid where it pays) ------------------------------ */ --space-3xs: clamp(0.31rem, 0.30rem + 0.04vw, 0.34rem); --space-2xs: clamp(0.63rem, 0.61rem + 0.09vw, 0.69rem); --space-xs: clamp(0.94rem, 0.91rem + 0.13vw, 1.03rem); --space-s: clamp(1.25rem, 1.21rem + 0.18vw, 1.38rem); --space-m: clamp(1.88rem, 1.82rem + 0.27vw, 2.06rem); --space-l: clamp(2.50rem, 2.42rem + 0.36vw, 2.75rem); --space-xl: clamp(3.75rem, 3.62rem + 0.54vw, 4.13rem); --space-2xl: clamp(5.00rem, 4.83rem + 0.71vw, 5.50rem); --space-3xl: clamp(7.50rem, 7.25rem + 1.07vw, 8.25rem); /* --- Measure & layout -------------------------------------------------- */ --measure: 64ch; /* the single readable column */ --measure-wide: 78ch; /* slightly wider for openers / lead-ins */ --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --page-max: 90rem; /* full-bleed outer bound */ /* --- Misc -------------------------------------------------------------- */ --rule-hair: 1px; --reveal-curve: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ }