/* ════════════════════════════════════════════════════════════ TRW v8 · DESIGN TOKENS Editorial broadsheet × institutional research desk Linked AFTER main.css so v8-specific tokens cascade-win. Loaded only on pages that have been retrofitted to v8. Phase 1 — index.html only. Phase 4 — wired into every page. ════════════════════════════════════════════════════════════ */ :root { /* ── TYPE STACKS · v8 swaps IBM Plex Sans for Inter Tight ── */ --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; /* --serif and --mono unchanged from v7 */ /* ── COLOR TOKENS · all moved to main.css v4 (heritage palette). This file no longer overrides --ink, --paper, --signal, --warning, --night, verdict colors, or shadows. Those tokens cascade-win from main.css — adding overrides here would silently revert the rebrand. */ /* Additive-only color helpers (do not collide with v4 token block) */ --paper-shade: #E2DAC8; /* edge of paper family */ --rule-fine: #EFEAE0; --signal-mid: #C8DBD0; --signal-glow: rgba(67, 14, 19, 0.22); /* mahogany-tinted glow */ /* ── LAYOUT additions ──────────────────────────────────── */ --tape-h: 28px; /* ── DENSITY-9 SPACING SCALE ───────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 36px; --s-8: 48px; --s-9: 64px; --s-10: 88px; --section-y: clamp(28px, 3.6vw, 56px); --section-y-lg: clamp(40px, 5vw, 80px); --grid-gap: 16px; /* ── MOTION easings + timings ──────────────────────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-snap: cubic-bezier(0.5, 0, 0.1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 120ms; --t-base: 220ms; --t-slow: 420ms; --t-page: 600ms; /* ── FUND-PAGE TYPE SCALE · 1.25 major-third ratio ─────── Used by the fund-detail + report-card redesign. Hierarchy is carried by these steps plus weight, never by a flat scale. */ --fp-step--1: 0.8rem; /* 12.8px · captions, fine print */ --fp-step-0: 1rem; /* 16px · body prose */ --fp-step-1: 1.25rem; /* 20px · sub-heads */ --fp-step-2: 1.563rem; /* 25px · section titles */ --fp-step-3: 1.953rem; /* 31px · headline claim */ --fp-step-4: 2.441rem; /* 39px · large figures */ --fp-step-5: 3.052rem; /* 49px · score / hero figure */ /* ── FUND-PAGE chart + data-viz surfaces ───────────────── Mirror of the charts-trw.js JS palette so CSS-rendered chart chrome (legends, frames, annotations) matches the canvases. Colour-blind-safe: pos/neg are green vs clay, not red/green. */ --fp-chart-grid: #e7e0cf; --fp-chart-axis: #9a9079; --fp-series-fund: #211d18; --fp-series-bench: #a89e87; --fp-pos: #3f7a4e; --fp-neg: #c1623f; } /* ════════════════════════════════════════════════════════════ v8-page — Inter Tight body when page is opted in (Pages opt in via class="v8-page" on ) ════════════════════════════════════════════════════════════ */ body.v8-page { font-family: var(--sans); font-feature-settings: "ss01", "cv11", "tnum"; letter-spacing: -0.005em; } body.v8-page h1, body.v8-page h2, body.v8-page h3, body.v8-page h4 { font-family: var(--serif); font-variation-settings: "SOFT" 50, "opsz" 80; letter-spacing: -0.018em; } body.v8-page .mono, body.v8-page .eyebrow, body.v8-page .kicker, body.v8-page .card-num, body.v8-page .stat-label, body.v8-page .sec-meta { font-family: var(--mono); }