/* ───────────────────────────────────────────────────────────────────── Africa Coffee Park · Management OS · Design Tokens Live theme syncing via [data-theme="..."] on . Every module uses the SAME variable names — the cascade does the work. ───────────────────────────────────────────────────────────────────── */ /* Default — "Mission Control" (Home, Mail, Account) */ :root { --bg: #0b1426; --surface: #0f1b32; --surface-2: #18254a; --surface-3: #1f2f5e; --line: #233764; --text: #e6ecf5; --text-muted: #8ea1c0; --primary: #00d4ff; /* electric cyan */ --primary-2: #7fe8ff; --accent: #ffb800; /* amber */ --accent-2: #e91e63; /* magenta */ --ok: #22c55e; --warn: #f59e0b; --err: #ef4444; --info: #38bdf8; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.18); --shadow-2: 0 4px 12px rgba(0,0,0,.35); --shadow-3: 0 10px 30px rgba(0,0,0,.5); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --topbar-h: 60px; --sidebar-w: 256px; --sidebar-rail: 64px; } [data-theme="infrastructure"] { --primary: #2563eb; --primary-2: #60a5fa; --accent: #ff6a00; --accent-2: #fbbf24; --surface: #0f1b32; --surface-2: #1e293b; --surface-3: #243453; } [data-theme="finance"] { --primary: #059669; --primary-2: #34d399; --accent: #d4a017; --accent-2: #fde68a; --surface: #0c2118; --surface-2: #163128; --surface-3: #1f4a3a; } [data-theme="hr"] { --primary: #7c3aed; --primary-2: #a78bfa; --accent: #ff7b6e; --accent-2: #fb923c; --surface: #1e1b3a; --surface-2: #2a2752; --surface-3: #3a366b; } [data-theme="stores"] { --primary: #f59e0b; --primary-2: #fbbf24; --accent: #0d9488; --accent-2: #2dd4bf; --surface: #1c1917; --surface-2: #2a2520; --surface-3: #3d362e; } [data-theme="procurement"] { --primary: #6366f1; /* indigo */ --primary-2: #818cf8; --accent: #84cc16; /* lime */ --accent-2: #bef264; --surface: #1a1b3a; --surface-2: #252753; --surface-3: #303373; } [data-theme="gallery"] { --bg: #000; --surface: #0a0a0a; --surface-2: #141414; --surface-3: #1f1f1f; --primary: #39ff14; --accent: #ffffff; --accent-2: #39ff14; --text: #ffffff; --text-muted: #a3a3a3; } /* ─── Extended tokens (v3 visual polish pass) ─────────────────────── */ :root { /* Glow helpers — used by KPI cards and active nav items */ --glow-primary: 0 0 24px -10px var(--primary); --glow-ok: 0 0 20px -10px var(--ok); --glow-err: 0 0 20px -10px var(--err); --glow-warn: 0 0 20px -10px var(--warn); /* Transition timing for theme swaps */ --transition-theme: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, fill .25s ease, stroke .25s ease; --transition-ui: .15s ease; /* Utility: text on an active pill/badge (must contrast the primary colour). Dark fixed value works because primary colours across all themes are saturated mid-to-high brightness — confirmed against WCAG AA. */ --pill-fg: #001828; /* Semi-transparent black overlays (for filter-count badges, etc.) */ --black-a18: rgba(0,0,0,.18); --black-a25: rgba(0,0,0,.25); } /* Smooth live-sync transitions on every visual property. `prefers-reduced-motion` opts out for accessibility. */ *, *::before, *::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, fill .25s ease, stroke .25s ease, opacity .25s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }