/* ============================================================ The Swing Is On — Design Tokens Drop into your global stylesheet. Light is default; add data-theme="dark" to for dark mode. ============================================================ */ :root { /* ---- Party classification colours (THE only colour) ---- */ /* Canonical order, left → right. Never reorder. */ --party-grn: #16a34a; /* Greens */ --party-alp: #dc2626; /* Labor */ --party-oth-l: #0d9488; /* Other · Left */ --party-oth-u: #9ca3af; /* Other · Unaligned */ --party-oth-r: #ca8a04; /* Other · Right */ --party-lnp: #2563eb; /* Coalition */ --party-on: #f97316; /* One Nation */ /* ---- Neutrals · light ---- */ --paper: #f6f4ee; /* page background (warm newsprint) */ --card: #ffffff; /* raised surfaces */ --ink: #1b1a17; /* primary text / the logo needle */ --muted: #6e6a60; /* secondary text */ --faint: #a39e92; /* tertiary / hints */ --rule: #e4dfd3; /* hairline borders */ /* ---- Type ---- */ --font-serif: 'Newsreader', Georgia, serif; /* wordmark, headlines */ --font-sans: 'Libre Franklin', system-ui, sans-serif; /* UI, body */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* all numbers */ /* ---- Radius ---- */ --r-sm: 7px; --r-md: 10px; --r-lg: 16px; /* ---- Spacing scale (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px; /* ---- Shadow (use sparingly; prefer hairlines) ---- */ --shadow-card: 0 1px 2px rgba(27,26,23,.04); } [data-theme="dark"] { --paper: #16161a; --card: #1f2026; --ink: #f2efe7; /* now the light text colour */ --muted: #9a968c; --faint: #6b675f; --rule: #2c2d31; --shadow-card: none; /* Party colours stay identical in dark — they read fine. */ } /* Optional: nudge party colours slightly brighter on dark if you find them heavy. Uncomment to use. [data-theme="dark"] { --party-alp:#ef4444; --party-lnp:#3b82f6; --party-grn:#22c55e; --party-on:#fb923c; --party-oth-l:#14b8a6; --party-oth-r:#eab308; --party-oth-u:#b0b6bd; } */ /* ---- Base ---- */ html { background: var(--paper); scrollbar-gutter: stable; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, .wordmark { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.012em; } .num, [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }