/* ═══════════════════════════════════════════════════════════════════════════ agent2hire.ai — design system ─────────────────────────────────────────────────────────────────────────── Single source of truth for colour, type, spacing, radius and elevation. THEMING Every colour is a token, and every token is redefined under [data-theme="dark"]. Nothing else in the app needs to know a theme exists: a template that reads var(--surface) is already dark-mode correct. The corollary is the rule to follow when editing any template — never write a raw hex for a surface, a border or body text. Reach for the token. Theme resolution, in order: 1. data-theme on , written by the toggle (persisted, see theme.js) 2. the OS preference, via prefers-color-scheme 3. light BRAND (fixed by the logo package — do not drift) ink #0F1720 teal #0E9384 on light · #2AC0AD on dark grey #8593A0 The teal genuinely changes value between themes: #0E9384 is too dark to read on an ink field and #2AC0AD is too light to read on white. That is why --accent is a token and not a constant. Load order in every template: 1. fonts 2. design-system.css <- this file 3. page-specific