/* ───────────────────────────────────────────────────────────── Design tokens — Scam Contact Registry & Arrears Tracker Registry vocabulary: paper, ink, hairline rules, one stamp. ───────────────────────────────────────────────────────────── */ :root { /* Colour — light (default) */ --paper: #f5f5f2; --surface: #ffffff; --ink: #17191d; --muted: #6c7078; --rule: #e2e2dc; --stamp: #a8322d; /* Derived status colours */ --ochre: #8a6a1f; --sunk: #eeeeea; /* recessed fill: inputs, redaction bars on surface */ --stamp-wash: rgba(168, 50, 45, 0.08); --ochre-wash: rgba(138, 106, 31, 0.1); --focus: #2f5fd0; /* Type */ --font-ui: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; --font-data: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 20px; --t-xl: 32px; /* Hero headline. Fluid so the landing's one big statement scales with the viewport instead of stepping at a single breakpoint. */ --t-hero: clamp(30px, 1.6rem + 1.6vw, 44px); /* Space — 4px base */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --radius: 4px; --rail-w: 200px; --content-max: 1240px; --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.14); /* A resting card sits on the paper, it doesn't hover over it. Reserve --shadow-lift for things that genuinely float (drawer, modals). */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05); color-scheme: light; } :root[data-theme="dark"] { --paper: #141517; --surface: #1c1e21; --ink: #ecede9; --muted: #8d919a; --rule: #2b2e33; --stamp: #d9584f; --ochre: #c9a227; --sunk: #26282c; --stamp-wash: rgba(217, 88, 79, 0.12); --ochre-wash: rgba(201, 162, 39, 0.12); --focus: #6f9bff; --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.24); color-scheme: dark; } /* Honour the OS preference until the user picks a theme explicitly. app.js stamps data-theme on , which wins over this block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #141517; --surface: #1c1e21; --ink: #ecede9; --muted: #8d919a; --rule: #2b2e33; --stamp: #d9584f; --ochre: #c9a227; --sunk: #26282c; --stamp-wash: rgba(217, 88, 79, 0.12); --ochre-wash: rgba(201, 162, 39, 0.12); --focus: #6f9bff; --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.24); color-scheme: dark; } }