/* * Admin Design Language — Refined Professional token overrides * ============================================================ * This file is the visual heart of the new admin design language. * * It is loaded ONLY by migrated admin pages (via admin/admin.css and the * auth base), AFTER static/core/variables.css. Because it is loaded later, * its :root declarations win for migrated pages, while unmigrated legacy * pages (which never load this file) keep their original look. This keeps * the two design systems fully isolated during the page-by-page rollout. * * It only RETUNES existing design tokens — it does not introduce new token * names. Components keep referencing var(--primary-color), var(--bg-light), * etc., so the whole portal restyles by changing values here. * * Runtime accent: the admin's settings.primary_color is applied by * utilities.js as an inline style on , which beats these :root rules, * so customer-configured branding still wins. */ :root { /* ===== ONE CONFIDENT ACCENT (professional blue) ===== */ --primary-color: #2563eb; --primary-color-rgb: 37, 99, 235; --primary-dark: #1d4ed8; --primary-light: #3b82f6; /* Secondary / accent demoted to neutral-slate so legacy components that still reference them stop shouting magenta/purple. */ --secondary-color: #475569; --secondary-color-rgb: 71, 85, 105; --secondary-dark: #334155; --secondary-light: #64748b; --accent-color: #2563eb; --accent-color-rgb: 37, 99, 235; --accent-color-dark: #1d4ed8; --accent-color-light: #3b82f6; /* ===== SEMANTIC COLORS (calmer, modern) ===== */ --success-color: #16a34a; --success-color-rgb: 22, 163, 74; --success-dark: #15803d; --success-color-dark: #15803d; --success-light: #22c55e; --warning-color: #d97706; --warning-color-rgb: 217, 119, 6; --warning-dark: #b45309; --warning-light: #f59e0b; --error-color: #dc2626; --error-color-rgb: 220, 38, 38; --error-dark: #b91c1c; --error-color-dark: #b91c1c; --error-light: #ef4444; --info-color: #0ea5e9; --info-color-rgb: 14, 165, 233; --info-dark: #0284c7; --info-light: #38bdf8; /* ===== NEUTRAL SLATE BASE ===== */ --text-color: #1e293b; /* slate-800 */ --text-color-muted: #64748b; /* slate-500 */ --text-light: #94a3b8; /* slate-400 */ --text-light-rgb: 148, 163, 184; --text-dark: #0f172a; /* slate-900 */ --bg-color: #f8fafc; /* page background — slate-50 */ --bg-light: #ffffff; /* surfaces / cards */ --bg-dark: #f1f5f9; /* subtle fills — slate-100 */ --bg-darker: #e2e8f0; /* slate-200 */ --border-color: #e2e8f0; /* slate-200 */ --border-color-light: #f1f5f9; /* slate-100 */ --border-color-dark: #cbd5e1; /* slate-300 */ /* ===== NAV CHROME (frosted-glass header) ===== */ --header-bg: #ffffff; /* opaque fallback (no backdrop-filter) */ --header-bg-translucent: rgba(255, 255, 255, 0.72); --header-border: rgba(15, 23, 42, 0.07); /* hairline slate */ --header-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -16px rgba(15, 23, 42, 0.30); --brand-chip-bg: linear-gradient(135deg, #3b82f6, #1d4ed8); /* blue-500 -> blue-700 */ /* ===== TIGHTER RADIUS (less toy-like) ===== */ --border-radius: 0.5rem; /* 8px */ --card-border-radius: 0.75rem; /* 12px */ --button-border-radius: 0.5rem; /* 8px */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* ===== SUBTLE SHADOWS (hairline, low-alpha; prefer borders) ===== */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-xl: 0 12px 28px rgba(15, 23, 42, 0.10); --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.14); --box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --box-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08); --box-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.10); /* ===== TRANSITIONS (snappier) ===== */ --transition-fast: 0.12s ease; --transition-base: 0.18s ease; --transition: all 0.18s ease; } /* ===== DARK THEME (retuned in lockstep — slate surfaces, off-blue accent) ===== */ [data-theme="dark"] { --primary-color: #60a5fa; --primary-color-rgb: 96, 165, 250; --primary-dark: #3b82f6; --primary-light: #93c5fd; --secondary-color: #94a3b8; --secondary-color-rgb: 148, 163, 184; --secondary-dark: #64748b; --secondary-light: #cbd5e1; --accent-color: #60a5fa; --accent-color-rgb: 96, 165, 250; --accent-color-dark: #3b82f6; --accent-color-light: #93c5fd; --success-color: #4ade80; --success-color-rgb: 74, 222, 128; --warning-color: #fbbf24; --warning-color-rgb: 251, 191, 36; --error-color: #f87171; --error-color-rgb: 248, 113, 113; --info-color: #38bdf8; --info-color-rgb: 56, 189, 248; --text-color: #e2e8f0; /* slate-200 */ --text-color-muted: #94a3b8; /* slate-400 */ --text-light: #64748b; /* slate-500 */ --text-light-rgb: 100, 116, 139; --text-dark: #f8fafc; --bg-color: #0f172a; /* slate-900 — page */ --bg-light: #1e293b; /* slate-800 — surfaces */ --bg-dark: #273449; --bg-darker: #334155; /* slate-700 */ --border-color: #334155; /* slate-700 */ --border-color-light: #1e293b; --border-color-dark: #475569; /* slate-600 */ /* Nav chrome — slate glass for dark surfaces */ --header-bg: #1e293b; /* opaque fallback */ --header-bg-translucent: rgba(23, 33, 53, 0.72); --header-border: rgba(255, 255, 255, 0.07); --header-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.7); /* Same saturated chip on dark surfaces — white mark stays high-contrast */ --brand-chip-bg: linear-gradient(135deg, #3b82f6, #1d4ed8); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.55); --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.6); --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45); --box-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Cover the brief flash window before the theme-flash script sets data-theme on the OS-dark-preference / no-saved-theme path. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --primary-color: #60a5fa; --primary-color-rgb: 96, 165, 250; --primary-dark: #3b82f6; --primary-light: #93c5fd; --text-color: #e2e8f0; --text-color-muted: #94a3b8; --text-light: #64748b; --bg-color: #0f172a; --bg-light: #1e293b; --bg-dark: #273449; --bg-darker: #334155; --border-color: #334155; --border-color-dark: #475569; --header-bg: #1e293b; --header-bg-translucent: rgba(23, 33, 53, 0.72); --header-border: rgba(255, 255, 255, 0.07); --header-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.7); --brand-chip-bg: linear-gradient(135deg, #3b82f6, #1d4ed8); } }