/* ============================================================ IM-OMS Dynamic Theme System All colors are CSS variables — editable from Admin Settings ============================================================ */ :root { /* --- Primary Brand Colors --- */ --color-primary: #4F46E5; --color-primary-hover: #4338CA; --color-primary-light: #EEF2FF; --color-primary-text: #FFFFFF; /* --- Sidebar --- */ --sidebar-bg: #1E1E2D; --sidebar-text: #A8A8C0; --sidebar-text-active: #FFFFFF; --sidebar-item-active: #4F46E5; --sidebar-item-hover: #2A2A3D; --sidebar-border: #2D2D42; --sidebar-logo-bg: #17172A; --sidebar-width: 260px; /* --- Top Navbar --- */ --navbar-bg: #FFFFFF; --navbar-border: #E5E7EB; --navbar-text: #374151; --navbar-icon: #6B7280; --navbar-height: 64px; /* --- Page & Content --- */ --page-bg: #F3F4F6; --card-bg: #FFFFFF; --card-border: #E5E7EB; --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05); --card-radius: 12px; /* --- Typography --- */ --text-primary: #111827; --text-secondary: #6B7280; --text-muted: #9CA3AF; --font-family: 'Inter', system-ui, -apple-system, sans-serif; font-optical-sizing: auto; /* --- Status Colors --- */ --color-success: #10B981; --color-success-light: #ECFDF5; --color-warning: #F59E0B; --color-warning-light: #FFFBEB; --color-danger: #EF4444; --color-danger-light: #FEF2F2; --color-info: #3B82F6; --color-info-light: #EFF6FF; /* --- Table --- */ --table-header-bg: #F9FAFB; --table-border: #E5E7EB; --table-row-hover: #F9FAFB; /* --- Input / Form --- */ --input-bg: #FFFFFF; --input-border: #D1D5DB; --input-focus: #4F46E5; --input-radius: 8px; /* --- Badge --- */ --badge-radius: 20px; /* --- Transitions --- */ --transition: all 0.2s ease; } /* ============================================================ DARK MODE SUPPORT (optional, toggled via .dark on ) ============================================================ */ html.dark { --sidebar-bg: #111827; --sidebar-item-hover: #1F2937; --sidebar-border: #1F2937; --sidebar-logo-bg: #0D1117; --navbar-bg: #1F2937; --navbar-border: #374151; --navbar-text: #F9FAFB; --navbar-icon: #9CA3AF; --page-bg: #111827; --card-bg: #1F2937; --card-border: #374151; --card-shadow: 0 1px 3px rgba(0,0,0,0.3); --text-primary: #F9FAFB; --text-secondary: #9CA3AF; --text-muted: #6B7280; --table-header-bg: #374151; --table-border: #4B5563; --table-row-hover: #374151; --input-bg: #374151; --input-border: #4B5563; }