/* Fast Repair CRM — UI Tokens (Dark Theme) Keep this file small, stable, and backwards compatible. It defines the core design tokens used by base styles and component CSS. */ :root { /* Enable dark form controls in supported browsers */ color-scheme: dark; /* --------------------------- Background layers --------------------------- */ --bg: #0b1220; /* app background */ --surface: #0f1b33; /* cards / panels */ --elevated: #0b1730; /* inputs, topbar, popovers */ /* RGB helpers (for rgba() usage in component styles) */ --bg-rgb: 11, 18, 32; --surface-rgb: 15, 27, 51; --elevated-rgb: 11, 23, 48; /* --------------------------- Border + divider --------------------------- */ --border: rgba(231, 238, 252, 0.12); --divider: rgba(231, 238, 252, 0.10); /* --------------------------- Text --------------------------- */ --text: #e7eefc; --muted: rgba(231, 238, 252, 0.70); --text-rgb: 231, 238, 252; --slate-rgb: 148, 163, 184; /* --------------------------- Brand + states --------------------------- */ --primary: #60a5fa; --success: #22c55e; --warning: #eab308; --danger: #ef4444; --info: #38bdf8; --primary-rgb: 96, 165, 250; --success-rgb: 34, 197, 94; --warning-rgb: 234, 179, 8; --danger-rgb: 239, 68, 68; --info-rgb: 56, 189, 248; --violet: #a78bfa; --violet-rgb: 167, 139, 250; /* --------------------------- Radius --------------------------- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; /* --------------------------- Spacing scale (4px system) --------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* --------------------------- Shadows --------------------------- */ --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.22); --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.38); /* --------------------------- Back-compat aliases The existing UI uses these variables widely. Keep them mapped so older styles remain stable while we gradually adopt the new token names. --------------------------- */ --card: var(--surface); --accent: var(--success); --accent2: var(--primary); } /* --------------------------- Light theme (opt-in) Activated by setting `data-theme="light"` on the element. The default theme remains dark for backwards compatibility. --------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f8ff; --surface: #ffffff; --elevated: #eef3ff; --bg-rgb: 246, 248, 255; --surface-rgb: 255, 255, 255; --elevated-rgb: 238, 243, 255; --border: rgba(11, 18, 32, 0.12); --divider: rgba(11, 18, 32, 0.08); --text: #0b1220; --muted: rgba(11, 18, 32, 0.70); --text-rgb: 11, 18, 32; --shadow-1: 0 10px 24px rgba(11, 18, 32, 0.08); --shadow-2: 0 18px 40px rgba(11, 18, 32, 0.14); }