/* ============================================================================ Optimum — console + POS theme tokens (2026-09-25) Single source of truth for every colour in the admin console and the agent POS. Widget rules never use raw colours: they read these variables, so a theme only has to redefine the palette. Selected with , persisted per user (users.theme) and mirrored to localStorage so the sign-in screen is themed before first paint. Ids must stay in sync with js/admin.js (THEMES) and api/theme.php. ========================================================================== */ :root { /* Brand: also set from Settings -> brand colour (applyBrand in admin.js). */ --brand: #0e9f8a; --brand-dark: #0b7d6d; --brand-soft: #e7f7f4; --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--card)); --brand-ring: rgba(14, 159, 138, .18); --brand-ring: color-mix(in srgb, var(--brand) 22%, transparent); --on-brand: #ffffff; --link: var(--brand-dark); /* Surfaces */ --bg: #f9fafb; --card: #ffffff; --surface-2: #f3f4f6; --surface-3: #eef1f5; --input-bg: #ffffff; --topbar-bg: rgba(255, 255, 255, .88); --login-bg: #111827; --banner-bg: #111827; --banner-ink: #e2e8f0; /* Dark chrome used by the agent POS sidebar */ --chrome-bg: #111827; --chrome-ink: #cbd5e1; --chrome-hover: #1e293b; --chrome-line: #1e293b; --chrome-strong: #ffffff; /* Text */ --ink: #111827; --body: #374151; --muted: #6b7280; --faint: #9ca3af; /* Lines */ --line: #e5e7eb; --line-soft: #f1f5f9; --grid: #e5e7eb; --track: #e5e7eb; /* Status families: soft = chip fill, ink = text on the chip */ --ok: #16a34a; --ok-soft: #dcfce7; --ok-ink: #15803d; --blue: #3b82f6; --blue-soft: #dbeafe; --blue-ink: #0369a1; --violet: #6366f1; --violet-soft: #e0e7ff; --violet-ink: #4338ca; --amber: #f97316; --amber-soft: #ffedd5; --amber-ink: #b45309; --pink: #ec4899; --pink-soft: #fce7f3; --pink-ink: #be185d; --danger: #dc2626; --danger-soft: #fee2e2; --danger-ink: #b91c1c; /* Notice panels */ --warn-bg: #fffbeb; --warn-ink: #92400e; --warn-line: #fde68a; --notice-bg: #fff7ed; --notice-ink: #9a3412; --notice-line: #fed7aa; /* Geometry + type */ --side-w: 252px; --r-card: 12px; --r-ctl: 8px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --shadow-pop: 0 18px 50px rgba(15, 23, 42, .22); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Cool grey light */ html[data-theme="slate"] { --bg: #eef2f6; --card: #ffffff; --surface-2: #f1f5f9; --surface-3: #e5ebf2; --line: #d7e0e9; --line-soft: #e9eff5; --grid: #d7e0e9; --track: #d7e0e9; --ink: #0d1624; --body: #37475c; --muted: #5b6b80; --faint: #8496a8; --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--card)); } /* True dark */ html[data-theme="midnight"] { color-scheme: dark; --bg: #0a1120; --card: #121b2c; --surface-2: #1a2439; --surface-3: #222e47; --input-bg: #0e1727; --topbar-bg: rgba(18, 27, 44, .9); --login-bg: #060b14; --banner-bg: #1c2740; --banner-ink: #dbe3ef; --chrome-bg: #0d1526; --chrome-ink: #b9c5d6; --chrome-hover: #1a2439; --chrome-line: #1c2740; --chrome-strong: #eef2f8; --ink: #eef2f8; --body: #c2ccdc; --muted: #93a1b5; --faint: #718095; --line: #26324a; --line-soft: #1c2740; --grid: #243049; --track: #26324a; --link: color-mix(in srgb, var(--brand) 60%, #ffffff); --ok: #22c55e; --ok-soft: rgba(34, 197, 94, .16); --ok-ink: #86efac; --blue: #60a5fa; --blue-soft: rgba(96, 165, 250, .16); --blue-ink: #bfdbfe; --violet: #818cf8; --violet-soft: rgba(129, 140, 248, .18); --violet-ink: #c7d2fe; --amber: #fb923c; --amber-soft: rgba(251, 146, 60, .16); --amber-ink: #fed7aa; --pink: #f472b6; --pink-soft: rgba(244, 114, 182, .16); --pink-ink: #fbcfe8; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, .18); --danger-ink: #fecaca; --warn-bg: rgba(251, 191, 36, .14); --warn-ink: #fcd34d; --warn-line: rgba(251, 191, 36, .3); --notice-bg: rgba(249, 115, 22, .14); --notice-ink: #fdba74; --notice-line: rgba(249, 115, 22, .3); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow-pop: 0 18px 50px rgba(0, 0, 0, .55); --brand-soft: color-mix(in srgb, var(--brand) 22%, var(--card)); } /* Warm parchment light */ html[data-theme="sand"] { --bg: #f7f4ee; --card: #fffdf9; --surface-2: #f2ece1; --surface-3: #eae2d4; --line: #e4dbc9; --line-soft: #f0e9dc; --grid: #e4dbc9; --track: #e4dbc9; --ink: #221d16; --body: #4a4238; --muted: #6f6455; --faint: #9a8f7d; --chrome-bg: #2a241c; --chrome-ink: #ded5c6; --chrome-hover: #3a3227; --chrome-line: #3a3227; --chrome-strong: #fffdf9; --brand-soft: color-mix(in srgb, var(--brand) 15%, var(--card)); }