/* Design tokens -- the single place colours, spacing, radii, shadows and type sizes are decided. base.css (shared components) and the two theme layers (portal.css for customers, style.css for the admin console) only ever reference these variables. The old variable names (--bg, --panel, --border, --text, --muted, --accent, --accent-dark, --danger, --success, --warning) are kept so existing templates that use var(--warning) etc. keep working. */ :root { /* surfaces + text */ --bg: #f7f8fa; --panel: #ffffff; --surface-2: #f1f4f8; --border: #e3e8ef; --border-strong: #cbd3de; --border-color: var(--border); --text: #0f172a; --muted: #5b6776; --on-accent: #ffffff; /* brand */ --accent: #1d4ed8; --accent-dark: #1e3a8a; --accent-soft: #e0e9ff; --focus: #2563eb; /* status pairs: text on soft background, all >= 4.5:1 */ --success: #166534; --success-soft: #dcfce7; --warning: #92400e; --warning-soft: #fef3c7; --danger: #b91c1c; --danger-soft: #fee2e2; --info: #1d4ed8; --info-soft: #dbeafe; --neutral: #475569; --neutral-soft: #eef2f6; /* charts */ --chart-1: #1d4ed8; --chart-2: #0891b2; --chart-3: #7c3aed; --chart-4: #db2777; --chart-5: #ca8a04; --chart-6: #16a34a; --chart-grid: #e3e8ef; /* spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* radii + elevation */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 6px rgba(15, 23, 42, 0.04); --shadow-2: 0 12px 32px rgba(15, 23, 42, 0.16); /* type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --lh: 1.5; --lh-tight: 1.25; /* density multiplier -- admin sets 0.8 for tighter cards/tables */ --density: 1; } /* Admin console follows the OS colour scheme; the customer portal never matches this block because its carries data-app="portal". */ html[data-app="admin"] { color-scheme: light dark; } @media (prefers-color-scheme: dark) { html[data-app="admin"] { --bg: #0f1218; --panel: #171b23; --surface-2: #1f2430; --border: #2a3140; --border-strong: #3b4453; --text: #e6eaf0; --muted: #9aa5b5; --on-accent: #ffffff; --accent: #6d95ff; --accent-dark: #a5bdff; --accent-soft: #1e2a4a; --focus: #8ab0ff; --success: #86efac; --success-soft: #14321f; --warning: #fcd34d; --warning-soft: #3a2a08; --danger: #fca5a5; --danger-soft: #3f1515; --info: #93c5fd; --info-soft: #172a4a; --neutral: #cbd5e1; --neutral-soft: #262d3a; --chart-1: #6d95ff; --chart-2: #22d3ee; --chart-3: #a78bfa; --chart-4: #f472b6; --chart-5: #facc15; --chart-6: #4ade80; --chart-grid: #2a3140; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.6); } }