/* ============================================================ App-UI (system UI) design tokens — "Warm, considered documentation" Scoped to the product screens only. Kept fully separate from the marketing-site tokens so changes here can never affect the main site. Fonts are loaded via a Google Fonts in each screen's . ============================================================ */ :root { /* ---- Colour ---- */ --canvas: #F8F5EC; /* page background */ --surface: #FCFBF9; /* cards, raised content */ --ink: #16203A; /* primary text, headings */ --ink-muted: #5C6273; /* secondary text, metadata */ --accent: #0A2DB8; /* one primary action, links, active nav, wordmark */ --positive: #5B8C6E; /* positive marks (dot/label only) */ --border: #E8E4DD; /* 1px hairlines, card edges */ --error: #A23A2E; /* alert only */ --warning: #B8852F; /* alert only */ /* ---- Type families ---- */ --font-body: 'Hanken Grotesk', sans-serif; /* body, UI, labels, buttons */ --font-heading: 'Schibsted Grotesk', sans-serif; /* h1–h3, nav links */ --font-prose: 'Fraunces', serif; /* prose / synthesis only */ --font-mono: 'Space Mono', monospace; /* eyebrows, short metadata */ /* Compatibility alias — the screens reference var(--font-sans) for body/UI. */ --font-sans: var(--font-body); /* ---- Type scale (only these sizes) ---- */ --text-eyebrow: 12px; --text-meta: 13px; --text-body: 16px; --text-title: 18px; --text-heading: 22px; --line-body: 1.6; --measure: 70ch; /* max reading width */ /* ---- Spacing scale (only these values) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --space-6: 80px; /* ---- Shape ---- */ --radius-card: 8px; --radius-chip: 6px; --border-width: 1px; } /* ---- Base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; } ::selection { background: rgba(10, 45, 184, 0.12); }