/** * Fleet Management System - Theme Variables * * This file defines CSS custom properties (variables) for theming. * The .dark class on activates dark mode overrides. * * Color naming convention: * --color-{category}-{variant} * Categories: bg, text, border, accent * Variants: primary, secondary, tertiary, muted, inverse */ /* ============================================ LIGHT THEME (Default) ============================================ */ :root { /* Background Colors */ --color-bg-primary: #ffffff; --color-bg-secondary: #f9fafb; /* gray-50 */ --color-bg-tertiary: #f3f4f6; /* gray-100 */ --color-bg-muted: #e5e7eb; /* gray-200 */ --color-bg-inverse: #1f2937; /* gray-800 */ --color-bg-hover: #f3f4f6; /* gray-100 */ --color-bg-active: #e5e7eb; /* gray-200 */ /* Surface Colors (cards, modals, dropdowns) */ --color-surface-primary: #ffffff; --color-surface-secondary: #f9fafb; --color-surface-elevated: #ffffff; --color-surface-overlay: rgba(0, 0, 0, 0.5); /* Text Colors */ --color-text-primary: #111827; /* gray-900 */ --color-text-secondary: #374151; /* gray-700 */ --color-text-tertiary: #6b7280; /* gray-500 */ --color-text-muted: #9ca3af; /* gray-400 */ --color-text-inverse: #f9fafb; /* gray-50 */ --color-text-link: #2563eb; /* blue-600 */ --color-text-link-hover: #1d4ed8; /* blue-700 */ /* Border Colors */ --color-border-primary: #e5e7eb; /* gray-200 */ --color-border-secondary: #d1d5db; /* gray-300 */ --color-border-focus: #3b82f6; /* blue-500 */ --color-border-error: #ef4444; /* red-500 */ /* Accent Colors - Blue (Primary) */ --color-accent-primary: #3b82f6; /* blue-500 */ --color-accent-primary-hover: #2563eb; /* blue-600 */ --color-accent-primary-light: #dbeafe; /* blue-100 */ --color-accent-primary-dark: #1d4ed8; /* blue-700 */ /* Accent Colors - Green (Success) */ --color-accent-success: #22c55e; /* green-500 */ --color-accent-success-hover: #16a34a; /* green-600 */ --color-accent-success-light: #dcfce7; /* green-100 */ --color-accent-success-dark: #15803d; /* green-700 */ /* Accent Colors - Red (Error/Danger) */ --color-accent-danger: #ef4444; /* red-500 */ --color-accent-danger-hover: #dc2626; /* red-600 */ --color-accent-danger-light: #fee2e2; /* red-100 */ --color-accent-danger-dark: #b91c1c; /* red-700 */ /* Accent Colors - Yellow (Warning) */ --color-accent-warning: #f59e0b; /* amber-500 */ --color-accent-warning-hover: #d97706; /* amber-600 */ --color-accent-warning-light: #fef3c7; /* amber-100 */ --color-accent-warning-dark: #b45309; /* amber-700 */ /* Accent Colors - Purple (Info) */ --color-accent-info: #8b5cf6; /* violet-500 */ --color-accent-info-hover: #7c3aed; /* violet-600 */ --color-accent-info-light: #ede9fe; /* violet-100 */ --color-accent-info-dark: #6d28d9; /* violet-700 */ /* Shadow Colors */ --color-shadow: rgba(0, 0, 0, 0.1); --color-shadow-lg: rgba(0, 0, 0, 0.15); /* Input/Form Colors */ --color-input-bg: #ffffff; --color-input-border: #d1d5db; --color-input-border-focus: #3b82f6; --color-input-text: #111827; --color-input-placeholder: #9ca3af; --color-input-disabled-bg: #f3f4f6; --color-input-disabled-text: #9ca3af; /* Table Colors */ --color-table-header-bg: #f9fafb; --color-table-row-bg: #ffffff; --color-table-row-alt-bg: #f9fafb; --color-table-row-hover: #f3f4f6; --color-table-border: #e5e7eb; /* Navigation Colors */ --color-nav-bg: #1e40af; /* blue-800 */ --color-nav-text: #ffffff; --color-nav-text-muted: #bfdbfe; /* blue-200 */ --color-nav-hover: #1d4ed8; /* blue-700 */ --color-nav-active: #1e3a8a; /* blue-900 */ /* Sidebar/Menu Colors */ --color-sidebar-bg: #ffffff; --color-sidebar-text: #374151; --color-sidebar-hover: #f3f4f6; --color-sidebar-active: #dbeafe; --color-sidebar-active-text: #1d4ed8; /* Badge/Tag Colors */ --color-badge-default-bg: #e5e7eb; --color-badge-default-text: #374151; --color-badge-primary-bg: #dbeafe; --color-badge-primary-text: #1d4ed8; --color-badge-success-bg: #dcfce7; --color-badge-success-text: #15803d; --color-badge-danger-bg: #fee2e2; --color-badge-danger-text: #b91c1c; --color-badge-warning-bg: #fef3c7; --color-badge-warning-text: #b45309; /* Scrollbar Colors */ --color-scrollbar-track: #f3f4f6; --color-scrollbar-thumb: #d1d5db; --color-scrollbar-thumb-hover: #9ca3af; } /* ============================================ DARK THEME ============================================ */ .dark { /* Background Colors */ --color-bg-primary: #111827; /* gray-900 */ --color-bg-secondary: #1f2937; /* gray-800 */ --color-bg-tertiary: #374151; /* gray-700 */ --color-bg-muted: #4b5563; /* gray-600 */ --color-bg-inverse: #f9fafb; /* gray-50 */ --color-bg-hover: #374151; /* gray-700 */ --color-bg-active: #4b5563; /* gray-600 */ /* Surface Colors */ --color-surface-primary: #1f2937; /* gray-800 */ --color-surface-secondary: #111827; /* gray-900 */ --color-surface-elevated: #374151; /* gray-700 */ --color-surface-overlay: rgba(0, 0, 0, 0.7); /* Text Colors */ --color-text-primary: #f9fafb; /* gray-50 */ --color-text-secondary: #e5e7eb; /* gray-200 */ --color-text-tertiary: #9ca3af; /* gray-400 */ --color-text-muted: #6b7280; /* gray-500 */ --color-text-inverse: #111827; /* gray-900 */ --color-text-link: #60a5fa; /* blue-400 */ --color-text-link-hover: #93c5fd; /* blue-300 */ /* Border Colors */ --color-border-primary: #374151; /* gray-700 */ --color-border-secondary: #4b5563; /* gray-600 */ --color-border-focus: #60a5fa; /* blue-400 */ --color-border-error: #f87171; /* red-400 */ /* Accent Colors - Blue (Primary) */ --color-accent-primary: #60a5fa; /* blue-400 */ --color-accent-primary-hover: #3b82f6; /* blue-500 */ --color-accent-primary-light: #1e3a8a; /* blue-900 */ --color-accent-primary-dark: #93c5fd; /* blue-300 */ /* Accent Colors - Green (Success) */ --color-accent-success: #4ade80; /* green-400 */ --color-accent-success-hover: #22c55e; /* green-500 */ --color-accent-success-light: #14532d; /* green-900 */ --color-accent-success-dark: #86efac; /* green-300 */ /* Accent Colors - Red (Error/Danger) */ --color-accent-danger: #f87171; /* red-400 */ --color-accent-danger-hover: #ef4444; /* red-500 */ --color-accent-danger-light: #7f1d1d; /* red-900 */ --color-accent-danger-dark: #fca5a5; /* red-300 */ /* Accent Colors - Yellow (Warning) */ --color-accent-warning: #fbbf24; /* amber-400 */ --color-accent-warning-hover: #f59e0b; /* amber-500 */ --color-accent-warning-light: #78350f; /* amber-900 */ --color-accent-warning-dark: #fcd34d; /* amber-300 */ /* Accent Colors - Purple (Info) */ --color-accent-info: #a78bfa; /* violet-400 */ --color-accent-info-hover: #8b5cf6; /* violet-500 */ --color-accent-info-light: #4c1d95; /* violet-900 */ --color-accent-info-dark: #c4b5fd; /* violet-300 */ /* Shadow Colors */ --color-shadow: rgba(0, 0, 0, 0.3); --color-shadow-lg: rgba(0, 0, 0, 0.4); /* Input/Form Colors */ --color-input-bg: #1f2937; --color-input-border: #4b5563; --color-input-border-focus: #60a5fa; --color-input-text: #f9fafb; --color-input-placeholder: #6b7280; --color-input-disabled-bg: #374151; --color-input-disabled-text: #6b7280; /* Table Colors */ --color-table-header-bg: #1f2937; --color-table-row-bg: #111827; --color-table-row-alt-bg: #1f2937; --color-table-row-hover: #374151; --color-table-border: #374151; /* Navigation Colors */ --color-nav-bg: #1e3a8a; /* blue-900 */ --color-nav-text: #ffffff; --color-nav-text-muted: #93c5fd; /* blue-300 */ --color-nav-hover: #1e40af; /* blue-800 */ --color-nav-active: #172554; /* blue-950 */ /* Sidebar/Menu Colors */ --color-sidebar-bg: #1f2937; --color-sidebar-text: #e5e7eb; --color-sidebar-hover: #374151; --color-sidebar-active: #1e3a8a; --color-sidebar-active-text: #93c5fd; /* Badge/Tag Colors */ --color-badge-default-bg: #374151; --color-badge-default-text: #e5e7eb; --color-badge-primary-bg: #1e3a8a; --color-badge-primary-text: #93c5fd; --color-badge-success-bg: #14532d; --color-badge-success-text: #86efac; --color-badge-danger-bg: #7f1d1d; --color-badge-danger-text: #fca5a5; --color-badge-warning-bg: #78350f; --color-badge-warning-text: #fcd34d; /* Scrollbar Colors */ --color-scrollbar-track: #1f2937; --color-scrollbar-thumb: #4b5563; --color-scrollbar-thumb-hover: #6b7280; } /* ============================================ TAILWIND CLASS OVERRIDES These override the compiled Tailwind classes to use our CSS variables in dark mode. ============================================ */ /* Background Overrides */ .dark .bg-white { background-color: var(--color-surface-primary) !important; } .dark .bg-gray-50 { background-color: var(--color-bg-secondary) !important; } .dark .bg-gray-100 { background-color: var(--color-bg-tertiary) !important; } .dark .bg-gray-200 { background-color: var(--color-bg-muted) !important; } .dark .bg-gray-800 { background-color: var(--color-bg-tertiary) !important; } .dark .bg-gray-900 { background-color: var(--color-bg-primary) !important; } /* Text Color Overrides */ .dark .text-gray-900 { color: var(--color-text-primary) !important; } .dark .text-gray-800 { color: var(--color-text-primary) !important; } .dark .text-gray-700 { color: var(--color-text-secondary) !important; } .dark .text-gray-600 { color: var(--color-text-secondary) !important; } .dark .text-gray-500 { color: var(--color-text-tertiary) !important; } .dark .text-gray-400 { color: var(--color-text-muted) !important; } .dark .text-black { color: var(--color-text-primary) !important; } /* Border Color Overrides */ .dark .border-gray-200 { border-color: var(--color-border-primary) !important; } .dark .border-gray-300 { border-color: var(--color-border-secondary) !important; } .dark .border-gray-100 { border-color: var(--color-border-primary) !important; } .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border-primary) !important; } /* Link Color Overrides */ .dark .text-blue-600 { color: var(--color-text-link) !important; } .dark .text-blue-700 { color: var(--color-text-link) !important; } .dark a:not([class*="text-"]):not([class*="btn"]) { color: var(--color-text-link); } .dark a:not([class*="text-"]):not([class*="btn"]):hover { color: var(--color-text-link-hover); } /* Hover State Overrides */ .dark .hover\:bg-gray-50:hover { background-color: var(--color-bg-hover) !important; } .dark .hover\:bg-gray-100:hover { background-color: var(--color-bg-hover) !important; } .dark .hover\:bg-gray-200:hover { background-color: var(--color-bg-active) !important; } /* Focus State Overrides */ .dark .focus\:ring-blue-500:focus { --tw-ring-color: var(--color-border-focus) !important; } .dark .focus\:border-blue-500:focus { border-color: var(--color-border-focus) !important; } /* Form Input Overrides */ .dark input:not([type="checkbox"]):not([type="radio"]), .dark select, .dark textarea { background-color: var(--color-input-bg) !important; border-color: var(--color-input-border) !important; color: var(--color-input-text) !important; } .dark input::placeholder, .dark textarea::placeholder { color: var(--color-input-placeholder) !important; } .dark input:focus, .dark select:focus, .dark textarea:focus { border-color: var(--color-input-border-focus) !important; } .dark input:disabled, .dark select:disabled, .dark textarea:disabled { background-color: var(--color-input-disabled-bg) !important; color: var(--color-input-disabled-text) !important; } /* Card/Panel Overrides */ .dark .rounded-lg.bg-white, .dark .rounded-xl.bg-white, .dark .rounded-2xl.bg-white { background-color: var(--color-surface-primary) !important; } .dark .shadow, .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl { --tw-shadow-color: var(--color-shadow) !important; } /* Table Overrides */ .dark table { background-color: var(--color-table-row-bg); } .dark thead { background-color: var(--color-table-header-bg); } .dark tbody tr { background-color: var(--color-table-row-bg); } .dark tbody tr:nth-child(even) { background-color: var(--color-table-row-alt-bg); } .dark tbody tr:hover { background-color: var(--color-table-row-hover) !important; } .dark th, .dark td { border-color: var(--color-table-border) !important; } /* Modal/Dialog Overrides */ .dark .fixed.inset-0.bg-gray-500, .dark .fixed.inset-0.bg-black { background-color: var(--color-surface-overlay) !important; } /* Badge Overrides */ .dark .bg-gray-100.text-gray-800 { background-color: var(--color-badge-default-bg) !important; color: var(--color-badge-default-text) !important; } .dark .bg-blue-100.text-blue-800, .dark .bg-blue-100.text-blue-700 { background-color: var(--color-badge-primary-bg) !important; color: var(--color-badge-primary-text) !important; } .dark .bg-green-100.text-green-800, .dark .bg-green-100.text-green-700 { background-color: var(--color-badge-success-bg) !important; color: var(--color-badge-success-text) !important; } .dark .bg-red-100.text-red-800, .dark .bg-red-100.text-red-700 { background-color: var(--color-badge-danger-bg) !important; color: var(--color-badge-danger-text) !important; } .dark .bg-yellow-100.text-yellow-800, .dark .bg-yellow-100.text-yellow-700, .dark .bg-amber-100.text-amber-800 { background-color: var(--color-badge-warning-bg) !important; color: var(--color-badge-warning-text) !important; } /* Button Overrides - Keep accent colors but adjust for dark mode */ .dark .bg-blue-600 { background-color: var(--color-accent-primary) !important; } .dark .bg-blue-600:hover, .dark .hover\:bg-blue-700:hover { background-color: var(--color-accent-primary-hover) !important; } .dark .bg-green-600 { background-color: var(--color-accent-success) !important; } .dark .bg-green-600:hover, .dark .hover\:bg-green-700:hover { background-color: var(--color-accent-success-hover) !important; } .dark .bg-red-600 { background-color: var(--color-accent-danger) !important; } .dark .bg-red-600:hover, .dark .hover\:bg-red-700:hover { background-color: var(--color-accent-danger-hover) !important; } /* Alert/Notification Overrides */ .dark .bg-blue-50 { background-color: var(--color-accent-primary-light) !important; } .dark .bg-green-50 { background-color: var(--color-accent-success-light) !important; } .dark .bg-red-50 { background-color: var(--color-accent-danger-light) !important; } .dark .bg-yellow-50, .dark .bg-amber-50 { background-color: var(--color-accent-warning-light) !important; } /* Icon Color Overrides */ .dark .text-gray-400 svg, .dark .text-gray-500 svg { color: var(--color-text-tertiary) !important; } /* Scrollbar Styling */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: var(--color-scrollbar-track); } .dark ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); } /* Ring Color Overrides */ .dark .ring-gray-200 { --tw-ring-color: var(--color-border-primary) !important; } .dark .ring-gray-300 { --tw-ring-color: var(--color-border-secondary) !important; } /* Placeholder Text Override */ .dark .placeholder-gray-400::placeholder, .dark .placeholder-gray-500::placeholder { color: var(--color-input-placeholder) !important; } /* ============================================ PAGE-SPECIFIC COMPONENT OVERRIDES Custom classes used in HTML