/* Design tokens — semantic colour, spacing, radius, elevation and type scale. * (c) Meridian Logic. All rights reserved. Unauthorised use, reproduction and or distribution is strictly prohibited. * * Loaded BEFORE the other stylesheets so these tokens cascade everywhere. * Light values live on :root; dark values on body.dark-mode (the app toggles * dark mode by adding .dark-mode to ). Legacy palette variables in * main.css / dark-mode.css are repointed at --brand-* so the whole app picks * up the new scheme without rewriting hardcoded hex values. */ /* Self-hosted Inter (variable, latin subset) — replaces the render-blocking * Google Fonts stylesheet formerly in index.html. One 48KB variable woff2 * covers all weights. font-src 'self' is already permitted by every CSP layer. */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand */ --brand-primary: #4338CA; --brand-accent: #6366F1; --accent-soft: #EEF0FF; /* Neutrals / surfaces */ --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --border: #E2E8F0; /* Text */ --fg: #1E293B; --fg-strong: #0F172A; --muted-fg: #64748B; /* Semantic status */ --success: #16A34A; --success-soft: #ECFDF3; --warning: #D97706; --warning-soft: #FEF6E7; --danger: #DC2626; --danger-soft: #FEF1F1; --info: #0284C7; --info-soft: #E8F4FB; /* Pill text — accessible on the matching -soft background */ --success-strong: #15803D; --warning-strong: #B45309; --danger-strong: #B91C1C; --info-strong: #0369A1; --neutral-fg: #475569; /* Radius (does not redefine --radius-sm/--radius-md owned elsewhere) */ --radius: 8px; --radius-lg: 10px; --radius-pill: 999px; /* Spacing — 4 / 8 grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Elevation — one soft shadow scale */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body.dark-mode { /* Brand */ --brand-primary: #6366F1; --brand-accent: #818CF8; --accent-soft: #1E2747; /* Neutrals / surfaces */ --bg: #0F172A; --surface: #1E293B; --surface-2: #243044; --border: #334155; /* Text */ --fg: #E2E8F0; --fg-strong: #F1F5F9; --muted-fg: #94A3B8; /* Semantic status */ --success: #34D399; --success-soft: #0E2A22; --warning: #FBBF24; --warning-soft: #2C2410; --danger: #F87171; --danger-soft: #2E1717; --info: #38BDF8; --info-soft: #0C2435; /* Pill text */ --success-strong: #34D399; --warning-strong: #FBBF24; --danger-strong: #F87171; --info-strong: #38BDF8; --neutral-fg: #CBD5E1; /* Elevation */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50); }