@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap'); /* --------------------------------------------------------------- Every colour lives here. Switching data-theme on swaps the whole palette. Per-client brand colours slot in as an override on --accent. --------------------------------------------------------------- */ :root { --paper: #F1F3F4; --surface: #FFFFFF; --ink: #16191C; --muted: #6B7278; --faint: #949BA1; --rule: #E1E5E7; --rule-soft: #EDF0F1; --page1: #1F7A4C; --page2: #D99A2B; --page3: #C4503C; --page4: #C9CFD3; --page5: #B0B8BD; --none: #8E979D; --up: #1F7A4C; --down: #C4503C; --up-bg: #E7F2EC; --down-bg: #F9EAE7; } [data-theme="dark"] { --paper: #0E1114; --surface: #171B1F; --ink: #E7EBED; --muted: #99A2A8; --faint: #6E777D; --rule: #272D33; --rule-soft: #1F252A; --page1: #3FA972; --page2: #E5B052; --page3: #D96D57; --page4: #4A5359; --page5: #3B4348; --none: #2E353A; --up: #3FA972; --down: #D96D57; --up-bg: #16291F; --down-bg: #2A1A17; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; transition: background 180ms ease, color 180ms ease; } :focus-visible { outline: 2px solid var(--page1); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }