/* ─────────────────────────────────────────────── ESolution CRM — Design Theme All color tokens defined as CSS custom properties. Swap between light & dark via .dark class on . ─────────────────────────────────────────────── */ :root { /* Surface tokens */ --surface: #f9f9ff; --surface-container-lowest: #ffffff; --surface-container-low: #f0f3ff; --surface-container: #e7eefe; --surface-container-high: #e2e8f8; --surface-container-highest: #dce2f3; --surface-dim: #d3daea; --surface-bright: #f9f9ff; --surface-variant: #dce2f3; --background: #f9f9ff; --inverse-surface: #2a313d; /* Text tokens */ --on-surface: #151c27; --on-surface-variant: #434654; --on-background: #151c27; --outline: #737686; --outline-variant: #c3c5d7; /* Semantic tokens */ --primary: #003fb1; --on-primary: #ffffff; --primary-container: #1a56db; --on-primary-container: #d4dcff; --primary-fixed: #dbe1ff; --primary-fixed-dim: #b5c4ff; --secondary: #712ae2; --on-secondary: #ffffff; --secondary-container: #8a4cfc; --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #93000a; } .dark { --surface: #192235; --surface-container-lowest: #0f172a; --surface-container-low: #172033; --surface-container: #1e2a3f; --surface-container-high: #253349; --surface-container-highest: #2d3d55; --surface-dim: #0a1220; --surface-bright: #3d4f64; --surface-variant: #172033; --background: #080e1a; --inverse-surface: #e2e8f0; --on-surface: #f1f5f9; --on-surface-variant: #cbd5e1; --on-background: #f1f5f9; --outline: #94a3b8; --outline-variant: #334155; --primary: #a5b4fc; --on-primary: #1e1b4b; --primary-container: #312e81; --on-primary-container: #c7d2fe; --primary-fixed: #dbe1ff; --primary-fixed-dim: #a5b4fc; --secondary: #a78bfa; --on-secondary: #1e1b4b; --secondary-container: #4c1d95; --error: #fca5a5; --on-error: #7f1d1d; --error-container: #7f1d1d; --on-error-container: #fecaca; } /* ── Surface & background fills ── */ .bg-surface { background: var(--surface) !important; } .bg-surface\/10 { background: color-mix(in srgb, var(--surface) 10%, transparent) !important; } .bg-surface-container-lowest { background: var(--surface-container-lowest) !important; } .bg-surface-container-low { background: var(--surface-container-low) !important; } .bg-surface-container-low\/50 { background: color-mix(in srgb, var(--surface-container-low) 50%, transparent) !important; } .bg-surface-container { background: var(--surface-container) !important; } .bg-surface-container\/50 { background: color-mix(in srgb, var(--surface-container) 50%, transparent) !important; } .bg-surface-container-high { background: var(--surface-container-high) !important; } .bg-surface-container-highest { background: var(--surface-container-highest) !important; } .bg-surface-dim { background: var(--surface-dim) !important; } .bg-surface-bright { background: var(--surface-bright) !important; } .bg-surface-variant { background: var(--surface-variant) !important; } .bg-background { background: var(--background) !important; } .bg-white { background: var(--surface-container-lowest) !important; } .bg-inverse-surface { background: var(--inverse-surface) !important; } /* ── Semantic fills ── */ .bg-primary { background: var(--primary) !important; } .bg-primary\/5 { background: color-mix(in srgb, var(--primary) 5%, transparent) !important; } .bg-primary\/10 { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; } .bg-primary\/20 { background: color-mix(in srgb, var(--primary) 20%, transparent) !important; } .bg-primary\/90 { background: color-mix(in srgb, var(--primary) 90%, transparent) !important; } .bg-primary-container { background: var(--primary-container) !important; } .bg-primary-container\/5 { background: color-mix(in srgb, var(--primary-container) 5%, transparent) !important; } .bg-primary-container\/10 { background: color-mix(in srgb, var(--primary-container) 10%, transparent) !important; } .bg-primary-container\/20 { background: color-mix(in srgb, var(--primary-container) 20%, transparent) !important; } .bg-primary-container\/30 { background: color-mix(in srgb, var(--primary-container) 30%, transparent) !important; } .bg-secondary { background: var(--secondary) !important; } .bg-secondary\/90 { background: color-mix(in srgb, var(--secondary) 90%, transparent) !important; } .bg-secondary-container { background: var(--secondary-container) !important; } .bg-error { background: var(--error) !important; } .bg-error\/10 { background: color-mix(in srgb, var(--error) 10%, transparent) !important; } .bg-error\/20 { background: color-mix(in srgb, var(--error) 20%, transparent) !important; } .bg-error-container { background: var(--error-container) !important; } .bg-error-container\/5 { background: color-mix(in srgb, var(--error-container) 5%, transparent) !important; } .bg-error-container\/20 { background: color-mix(in srgb, var(--error-container) 20%, transparent) !important; } .bg-error-container\/40 { background: color-mix(in srgb, var(--error-container) 40%, transparent) !important; } /* ── Text colors ── */ .text-on-surface { color: var(--on-surface) !important; } .text-on-surface-variant { color: var(--on-surface-variant) !important; } .text-on-background { color: var(--on-background) !important; } .text-outline { color: var(--outline) !important; } .text-outline-variant { color: var(--outline-variant) !important; } .text-primary { color: var(--primary) !important; } .text-primary\/80 { color: color-mix(in srgb, var(--primary) 80%, transparent) !important; } .text-on-primary { color: var(--on-primary) !important; } .text-on-secondary { color: var(--on-secondary) !important; } .text-error { color: var(--error) !important; } .text-error\/80 { color: color-mix(in srgb, var(--error) 80%, transparent) !important; } .text-on-error { color: var(--on-error) !important; } .text-on-error-container { color: var(--on-error-container) !important; } /* ── Border colors ── */ .border-outline-variant { border-color: var(--outline-variant) !important; } .border-outline-variant\/30 { border-color: color-mix(in srgb, var(--outline-variant) 30%, transparent) !important; } .border-outline-variant\/50 { border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent) !important; } .border-outline { border-color: var(--outline) !important; } .border-primary { border-color: var(--primary) !important; } .border-primary\/10 { border-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; } .border-primary\/20 { border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; } .border-primary\/30 { border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important; } .border-error { border-color: var(--error) !important; } .border-error\/20 { border-color: color-mix(in srgb, var(--error) 20%, transparent) !important; } .border-surface\/20 { border-color: color-mix(in srgb, var(--surface) 20%, transparent) !important; } /* ── Divides ── */ .divide-y > * + * { border-color: var(--outline-variant) !important; } .divide-outline-variant > * + * { border-color: var(--outline-variant) !important; } .divide-outline-variant\/20 > * + * { border-color: color-mix(in srgb, var(--outline-variant) 20%, transparent) !important; } .border-t, .border-b { border-color: var(--outline-variant) !important; } .dark .border { border-color: #2a3344 !important; } .dark .divide-\[\#e2e5f1\] > * + * { border-color: #2a3344 !important; } /* ── Shadows ── */ .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; } .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; } .shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important; } .shadow-2xl { box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important; } .dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } .dark .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.45) !important; } .dark .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } .dark .shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; } .dark .shadow-2xl { box-shadow: 0 12px 32px rgba(0,0,0,0.7) !important; } .dark .shadow-blue-200 { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } .dark .shadow-green-200 { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } /* ── Status color fills (dark mode only, light mode uses Tailwind defaults) ── */ .dark .bg-green-50 { background: #022c22 !important; } .dark .bg-green-100 { background: #064e3b !important; } .dark .bg-green-200 { background: #065f46 !important; } .dark .bg-green-400 { background: #34d399 !important; } .dark .bg-green-500 { background: #10b981 !important; } .dark .bg-green-600 { background: #059669 !important; } .dark .bg-green-700 { background: #047857 !important; } .dark .bg-green-800 { background: #065f46 !important; } .dark .bg-red-50 { background: #2d0a0a !important; } .dark .bg-red-100 { background: #3b0f0f !important; } .dark .bg-red-500 { background: #f43f5e !important; } .dark .bg-red-600 { background: #e11d48 !important; } .dark .bg-red-700 { background: #be123c !important; } .dark .bg-red-800 { background: #9f1239 !important; } .dark .bg-blue-50 { background: #0c1929 !important; } .dark .bg-blue-100 { background: #1e3a5f !important; } .dark .bg-blue-200 { background: #1e40af !important; } .dark .bg-blue-400 { background: #60a5fa !important; } .dark .bg-blue-500 { background: #3b82f6 !important; } .dark .bg-blue-600 { background: #2563eb !important; } .dark .bg-blue-700 { background: #1d4ed8 !important; } .dark .bg-blue-800 { background: #1e40af !important; } .dark .bg-amber-50 { background: #2d1a04 !important; } .dark .bg-amber-100 { background: #3b2205 !important; } .dark .bg-amber-200 { background: #713f12 !important; } .dark .bg-amber-600 { background: #d97706 !important; } .dark .bg-amber-700 { background: #b45309 !important; } .dark .bg-amber-800 { background: #92400e !important; } .dark .bg-purple-50 { background: #1a0533 !important; } .dark .bg-purple-100 { background: #2d0752 !important; } .dark .bg-purple-200 { background: #4c1d95 !important; } .dark .bg-purple-500 { background: #a855f7 !important; } .dark .bg-purple-600 { background: #9333ea !important; } .dark .bg-purple-700 { background: #7e22ce !important; } .dark .bg-purple-800 { background: #6b21a8 !important; } .dark .bg-orange-50 { background: #271000 !important; } .dark .bg-orange-100 { background: #3b1a06 !important; } .dark .bg-orange-200 { background: #7c2d12 !important; } .dark .bg-orange-500 { background: #f97316 !important; } .dark .bg-orange-800 { background: #9a3412 !important; } .dark .bg-yellow-50 { background: #271408 !important; } .dark .bg-yellow-100 { background: #3b220a !important; } .dark .bg-yellow-200 { background: #713f12 !important; } .dark .bg-yellow-700 { background: #a16207 !important; } .dark .bg-yellow-800 { background: #854d0e !important; } .dark .bg-teal-50 { background: #022c22 !important; } .dark .bg-teal-200 { background: #115e59 !important; } .dark .bg-teal-500 { background: #14b8a6 !important; } .dark .bg-teal-700 { background: #0f766e !important; } .dark .bg-indigo-500 { background: #6366f1 !important; } .dark .bg-gray-50 { background: #0f172a !important; } .dark .bg-gray-100 { background: #1e2937 !important; } .dark .bg-gray-200 { background: #334155 !important; } .dark .bg-gray-300 { background: #475569 !important; } .dark .bg-gray-400 { background: #64748b !important; } .dark .bg-gray-500 { background: #64748b !important; } .dark .bg-slate-200 { background: #334155 !important; } .dark .bg-slate-400 { background: #64748b !important; } .dark .bg-slate-500 { background: #64748b !important; } .dark .bg-slate-600 { background: #475569 !important; } .dark .bg-black\/20 { background: rgba(0,0,0,0.5) !important; } .dark .bg-black\/30 { background: rgba(0,0,0,0.6) !important; } .dark .bg-black\/40 { background: rgba(0,0,0,0.7) !important; } .dark .bg-black\/50 { background: rgba(0,0,0,0.8) !important; } /* ── Status text colors (dark mode only) ── */ .dark .text-amber-600 { color: #fbbf24 !important; } .dark .text-amber-700 { color: #fbbf24 !important; } .dark .text-amber-800 { color: #fde68a !important; } .dark .text-green-600, .dark .text-green-700, .dark .text-green-800, .dark .text-green-900 { color: #6ee7b7 !important; } .dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd !important; } .dark .text-blue-900 { color: #bfdbfe !important; } .dark .text-red-700, .dark .text-red-800 { color: #fca5a5 !important; } .dark .text-purple-800 { color: #d8b4fe !important; } .dark .text-orange-600, .dark .text-orange-700, .dark .text-orange-800 { color: #fdba74 !important; } .dark .text-yellow-700, .dark .text-yellow-800 { color: #fde68a !important; } .dark .text-teal-800 { color: #5eead4 !important; } .dark .text-gray-400, .dark .text-gray-500 { color: #9ca3af !important; } .dark .text-gray-600 { color: #d1d5db !important; } .dark .text-gray-700 { color: #e5e7eb !important; } .dark .text-gray-800 { color: #f3f4f6 !important; } .dark .text-gray-900 { color: #f9fafb !important; } .dark .text-slate-600 { color: #94a3b8 !important; } .dark .text-white\/70 { color: rgba(235,241,255,0.7) !important; } .dark .text-white\/80 { color: rgba(235,241,255,0.8) !important; } /* ── Status border colors (dark mode only) ── */ .dark .border-green-50 { border-color: #022c22 !important; } .dark .border-green-100 { border-color: #064e3b !important; } .dark .border-green-200 { border-color: #065f46 !important; } .dark .border-green-500 { border-color: #10b981 !important; } .dark .border-red-50 { border-color: #2d0a0a !important; } .dark .border-red-200 { border-color: #9f1239 !important; } .dark .border-red-300 { border-color: #be123c !important; } .dark .border-blue-50 { border-color: #0c1929 !important; } .dark .border-blue-200 { border-color: #1e40af !important; } .dark .border-blue-500 { border-color: #3b82f6 !important; } .dark .border-amber-50 { border-color: #2d1a04 !important; } .dark .border-amber-200 { border-color: #713f12 !important; } .dark .border-amber-500 { border-color: #f59e0b !important; } .dark .border-purple-50 { border-color: #1a0533 !important; } .dark .border-purple-200 { border-color: #4c1d95 !important; } .dark .border-purple-500 { border-color: #a855f7 !important; } .dark .border-orange-50 { border-color: #271000 !important; } .dark .border-orange-200 { border-color: #7c2d12 !important; } .dark .border-orange-500 { border-color: #f97316 !important; } .dark .border-yellow-50 { border-color: #271408 !important; } .dark .border-yellow-200 { border-color: #713f12 !important; } .dark .border-yellow-500 { border-color: #eab308 !important; } .dark .border-teal-50 { border-color: #022c22 !important; } .dark .border-teal-200 { border-color: #115e59 !important; } .dark .border-gray-50 { border-color: #111827 !important; } .dark .border-gray-100 { border-color: #1f2937 !important; } .dark .border-gray-500 { border-color: #6b7280 !important; } .dark .border-dashed.border-gray-300 { border-color: #3a4355 !important; } /* ── Inputs & forms ── */ .dark input:not([type="checkbox"]):not([type="radio"]), .dark select, .dark textarea { background: var(--surface-container-low) !important; border-color: var(--outline-variant) !important; color: var(--on-surface) !important; } .dark input:focus:not([type="checkbox"]):not([type="radio"]), .dark select:focus, .dark textarea:focus { border-color: var(--primary) !important; outline-color: var(--primary) !important; } .dark input::placeholder, .dark textarea::placeholder { color: var(--outline) !important; } .dark input[type="checkbox"] { accent-color: var(--primary) !important; } .dark input[type="radio"] { accent-color: var(--primary) !important; } /* ── Tables ── */ .dark table { color: var(--on-surface) !important; } .dark th { color: var(--on-surface-variant) !important; } .dark .bg-amber-50\/50 { background: rgba(45,26,4,0.5) !important; } /* ── Hover states ── */ .dark .hover\:bg-surface-container:hover { background: #253349 !important; } .dark .hover\:bg-surface-container\/50:hover { background: rgba(37,51,73,0.5) !important; } .dark .hover\:bg-surface-container-high:hover { background: #2d3d55 !important; } .dark .hover\:bg-surface-container-low:hover { background: #1e2a3f !important; } .dark .hover\:bg-surface-container-low\/50:hover { background: rgba(30,42,63,0.5) !important; } .dark .hover\:bg-surface-container:hover .text-on-surface-variant, .dark .hover\:bg-surface-container-low:hover .text-on-surface-variant, .dark .hover\:bg-surface-container-high:hover .text-on-surface-variant { color: #ffffff !important; } .dark .hover\:bg-primary\/20:hover { background: color-mix(in srgb, var(--primary) 20%, transparent) !important; } .dark .hover\:bg-primary\/90:hover { background: color-mix(in srgb, var(--primary) 90%, transparent) !important; } .dark .hover\:bg-primary\/80:hover { background: color-mix(in srgb, var(--primary) 80%, transparent) !important; } .dark .hover\:bg-primary-container:hover { background: var(--primary-container) !important; } .dark .hover\:bg-primary-container\/20:hover { background: color-mix(in srgb, var(--primary-container) 20%, transparent) !important; } .dark .hover\:bg-primary-container\/40:hover { background: color-mix(in srgb, var(--primary-container) 40%, transparent) !important; } .dark .hover\:bg-primary-container\/5:hover { background: color-mix(in srgb, var(--primary-container) 5%, transparent) !important; } .dark .hover\:bg-secondary\/90:hover { background: color-mix(in srgb, var(--secondary) 90%, transparent) !important; } .dark .hover\:bg-error-container\/20:hover { background: color-mix(in srgb, var(--error-container) 20%, transparent) !important; } .dark .hover\:bg-green-700:hover { background: #047857 !important; } .dark .hover\:bg-green-100:hover { background: #064e3b !important; } .dark .hover\:bg-blue-700:hover { background: #1d4ed8 !important; } .dark .hover\:bg-blue-100:hover { background: #1e3a5f !important; } .dark .hover\:bg-red-700:hover { background: #be123c !important; } .dark .hover\:bg-red-100:hover { background: #3b0f0f !important; } .dark .hover\:bg-purple-700:hover { background: #7e22ce !important; } .dark .hover\:bg-amber-700:hover { background: #b45309 !important; } .dark .hover\:bg-amber-200:hover { background: #713f12 !important; } .dark .hover\:bg-orange-100:hover { background: #3b1a06 !important; } .dark .hover\:bg-gray-100:hover { background: #1e2937 !important; } .dark .hover\:text-on-surface:hover { color: #ffffff !important; } .dark .hover\:text-primary:hover { color: var(--primary) !important; } .dark .hover\:text-primary\/80:hover { color: color-mix(in srgb, var(--primary) 80%, transparent) !important; } .dark .hover\:text-error:hover { color: var(--error) !important; } .dark .hover\:text-error\/80:hover { color: color-mix(in srgb, var(--error) 80%, transparent) !important; } .dark .hover\:text-orange-800:hover { color: #fdba74 !important; } .dark .hover\:text-blue-500:hover { color: #60a5fa !important; } .dark .hover\:text-blue-600:hover, .dark .hover\:text-blue-400:hover { color: #93c5fd !important; } .dark .group:hover .group-hover\:text-blue-500 { color: #b5c4ff !important; } .dark .group:hover .group-hover\:text-blue-400 { color: #b5c4ff !important; } .dark .group:hover .group-hover\:text-blue-600 { color: #b5c4ff !important; } .dark .hover\:border-primary\/30:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important; } /* ── Focus / ring ── */ .dark .focus\:ring-primary:focus { --tw-ring-color: var(--primary) !important; } .dark .focus\:ring-primary\/10:focus { --tw-ring-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; } .dark .focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; } .dark .focus\:ring-primary-container:focus { --tw-ring-color: var(--primary-container) !important; } .dark .focus\:ring-offset-2:focus { --tw-ring-offset-color: #0a1220 !important; } /* ── Disabled ── */ .dark .disabled\:opacity-30:disabled { opacity: 0.3 !important; } .dark .disabled\:opacity-40:disabled { opacity: 0.4 !important; } .dark .disabled\:opacity-50:disabled { opacity: 0.5 !important; } .dark .disabled\:cursor-not-allowed:disabled { cursor: not-allowed !important; } .dark .disabled\:shadow-none:disabled { box-shadow: none !important; } /* ── Transitions ── */ .dark .active\:scale-95:active { transform: scale(0.95) !important; } /* ── Base overrides ── */ html.dark, html.dark body { background: var(--background); color: var(--on-surface); } html.dark main { overscroll-behavior: none; }