/* ─── IPE Design Tracker — Design Tokens ───────────────────────────── * * SINGLE source of truth for the design system's custom properties. * Consumed by TWO consumers, both via same-origin in : * * 1. client/index.html (Vite-built SPA) * 2. client/public/viewer/viewer.html (standalone PDF annotation viewer) * * Served verbatim at the deploy root URL "/tokens.css" by: * - Vite dev + build (client/public/ maps to root) * - express.static(client/public) in prod (server/src/index.js) * * MUST load BEFORE any consumer stylesheet — link order in * is significant. * * DO NOT add a second :root { … } block anywhere under client/. The * invariant is enforced by client/src/test/tokensInvariant.test.js * which fails if the definition moves out of this file or is * duplicated. See ruling docs/handoffs/CC_ADDENDUM_06Sep2026_Block39_ * UI_ALIGNMENT.md — Q3, JJ ruling 6 Sep 2026. * * Extracted from client/src/index.css on 2026-09-06. * ────────────────────────────────────────────────────────────────── */ :root { /* Brand colours */ --ipe-navy: #1a2e4a; --ipe-navy-dark: #0f1d30; --ipe-navy-mid: #243858; --ipe-teal: #00a9a5; --ipe-teal-light: #00c9c4; --ipe-teal-dim: #007f7c; /* RAG */ --rag-green: #22c55e; --rag-green-bg: #f0fdf4; --rag-amber: #f59e0b; --rag-amber-bg: #fffbeb; --rag-orange: #ea580c; --rag-orange-bg: #fff7ed; --rag-red: #ef4444; --rag-red-bg: #fef2f2; --rag-red-dark: #991b1b; --rag-red-dark-bg: #fef2f2; --rag-grey: #94a3b8; --rag-grey-bg: #f8fafc; /* Neutrals */ --bg: #f1f5f9; --surface: #ffffff; --surface-mid: #f8fafc; --border: #e2e8f0; --border-mid: #cbd5e1; --text: #0f172a; --text-mid: #334155; --text-muted: #64748b; --text-faint: #94a3b8; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Typography */ --font: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Consolas', 'Fira Mono', monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 24px; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); /* Sidebar */ --sidebar-w: 220px; --topbar-h: 56px; }