/* ============================================================= tokens.css – Design tokens for Headset Store Portal Matches Call Insights palette. Typography, colours, spacing. Load first. Dark theme via [data-theme="dark"] on . ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); :root { /* Typography — aligned with ci/assets/css/tokens.css (Call Insights) */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; --font-size-xs: 0.65rem; --font-size-sm: 0.75rem; --font-size-base: 0.9375rem; --font-size-md: 0.875rem; --font-size-lg: 0.9rem; --font-size-xl: 1.35rem; --font-size-2xl: 1.65rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Brand colours (Call Insights palette) */ --blue: #0095C8; --blue-hover: #0284c7; --blue-mid: #0284c7; --blue-deep: #0369a1; --blue-pale: #e0f4fb; /* Extended accents (Call Insights KPI / charts) */ --indigo: #4f46e5; --indigo-pale: #eef2ff; --purple: #7c3aed; --purple-pale: #ede9fe; --yellow-metric: #f5a623; --yellow-pale-metric: #fef3c7; --teal-metric: #0d9488; --teal-pale: rgba(13, 148, 136, 0.12); --on-primary: #ffffff; /* Page chrome */ --header-bg: #f0f7fb; --page-bg: #f8f9ff; --card-bg: #ffffff; --border: #e2e8f0; --border-input: #e2e8f0; /* Text */ --text-dark: #1e293b; --text-mid: #475569; --text-light: #64748b; /* Greys */ --grey-50: #f8fafc; --grey-100: #f1f5f9; /* Semantic */ --error: #dc2626; --error-bg: #fee2e2; /* Subtle “cancel / exit” secondary (not aggressive destructive red) */ --cancel-muted-bg: #fef2f2; --cancel-muted-border: #fecaca; --cancel-muted-text: #b91c1c; --cancel-muted-hover-bg: #fee2e2; --cancel-muted-hover-border: #f87171; --cancel-muted-hover-text: #991b1b; --success: #16a34a; --success-bg: #d1fae5; --success-text: #065f46; --warning-bg: #fef3c7; --warning-text: #92400e; /* Layout */ --radius: 12px; --radius-sm: 8px; --radius-lg: 14px; --card-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); /* Buttons — shared chrome (icon + label, consistent touch targets) */ --btn-radius: var(--radius-sm); --btn-min-height: 40px; --btn-pad-y: 10px; --btn-pad-x: 16px; --btn-gap: 8px; --btn-icon-size: 16px; --btn-font-size: var(--font-size-base); /* Sidebar (app shell) — matches Call Insights chrome */ --sidebar-bg: #4a5568; --sidebar-bg-gradient: linear-gradient(180deg, #4f5b6a 0%, #3d4852 100%); --sidebar-active: #0095C8; --sidebar-width: 240px; --sidebar-collapsed-width: 60px; } /* Dark theme (Call Insights style) */ [data-theme="dark"] { color-scheme: dark; --header-bg: #0c1222; --page-bg: #0f172a; --card-bg: #1e293b; --border: rgba(255,255,255,.08); --border-input: rgba(255,255,255,.12); --text-dark: #f1f5f9; --text-mid: #94a3b8; --text-light: #64748b; --grey-50: #334155; --grey-100: #475569; --blue: #38bdf8; --blue-hover: #0ea5e9; --blue-mid: #0ea5e9; --blue-deep: #38bdf8; --blue-pale: rgba(56,189,248,.15); --error: #f87171; --error-bg: rgba(248,113,113,.2); --cancel-muted-bg: rgba(248, 113, 113, 0.14); --cancel-muted-border: rgba(248, 113, 113, 0.38); --cancel-muted-text: #fecaca; --cancel-muted-hover-bg: rgba(248, 113, 113, 0.22); --cancel-muted-hover-border: rgba(248, 113, 113, 0.55); --cancel-muted-hover-text: #fef2f2; --success: #4ade80; --success-bg: rgba(22,163,74,.2); --success-text: #4ade80; --card-shadow: 0 4px 24px rgba(0,0,0,.15); --sidebar-bg: #0c1222; --sidebar-bg-gradient: linear-gradient(180deg, #0f172a 0%, #0c1222 100%); --sidebar-active: #38bdf8; --indigo-pale: rgba(79, 70, 229, 0.2); --purple-pale: rgba(124, 58, 237, 0.2); --yellow-pale-metric: rgba(245, 166, 35, 0.18); --teal-pale: rgba(13, 148, 136, 0.22); }