:root { /* Primary Brand Colors */ --color-primary: #1c64f2; --color-primary-hover: #1d4ed8; --color-accent: #1c64f2; /* Layout Dimensions */ --sidebar-width: 16rem; --topbar-height: 4rem; /* Semantic Colors */ --color-success: #16a34a; --color-success-light: #dcfce7; --color-success-dark: #166534; --color-warning: #d97706; --color-warning-light: #fef3c7; --color-warning-dark: #92400e; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-danger-dark: #991b1b; --color-info: #2563eb; --color-info-light: #dbeafe; --color-info-dark: #1e40af; /* Neutral / Surface Colors */ --color-surface-50: #f9fafb; --color-surface-100: #f3f4f6; --color-surface-200: #e5e7eb; --color-surface-300: #d1d5db; --color-surface-400: #9ca3af; --color-surface-500: #6b7280; --color-surface-600: #4b5563; --color-surface-700: #374151; --color-surface-800: #1f2937; --color-surface-900: #111827; /* Text Colors */ --color-text-primary: #111827; --color-text-secondary: #4b5563; --color-text-muted: #9ca3af; /* Border Colors */ --color-border-default: #e5e7eb; --color-border-strong: #d1d5db; --color-border-muted: #f3f4f6; /* Semantic Surface Colors */ --bg-surface: #f9fafb; --bg-card: #ffffff; /* Spacing Scale (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 3.5rem; --space-11: 4rem; --space-12: 5rem; /* Border Radius */ --radius-sm: 0.125rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Z-Index */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1050; --z-toast: 1080; --z-popover: 1090; } /* Dark mode overrides (class-based via .dark on ) */ .dark { --color-text-primary: #f9fafb; --color-text-secondary: #d1d5db; --color-text-muted: #6b7280; --bg-surface: #111827; --bg-card: #1f2937; --color-border-default: #374151; --color-border-strong: #4b5563; --color-border-muted: #1f2937; } /* UX uplift: shared shell + table + card rhythm */ .ux-page-shell { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } .ux-page-shell .mb-6 { margin-bottom: 1rem; } .ux-page-shell .bg-white.rounded-lg, .ux-page-shell .bg-white.dark\:bg-gray-800.rounded-lg, .ux-page-shell .dark\:bg-gray-800.rounded-lg { box-shadow: var(--shadow-sm); } .ux-page-shell h1.text-2xl { letter-spacing: -0.01em; } .ux-table-wrap { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; } .dark .ux-table-wrap { border-color: var(--color-border-default); } .ux-data-table { width: 100%; } .ux-data-table thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; backdrop-filter: saturate(180%) blur(2px); } .ux-data-table tbody tr:hover { background-color: rgb(243 244 246 / 0.75); } .dark .ux-data-table tbody tr:hover { background-color: rgb(55 65 81 / 0.45); } @media (max-width: 1023px) { .ux-page-shell { gap: 1rem; } } /* Fallback utility backfill for classes not present in bundled Flowbite CSS. */ .bg-amber-600 { background-color: #d97706; } .bg-orange-600 { background-color: #ea580c; } .hover\:bg-amber-700:hover { background-color: #b45309; } .hover\:bg-green-100:hover { background-color: #dcfce7; } .hover\:bg-indigo-100:hover { background-color: #e0e7ff; } .hover\:bg-indigo-700:hover { background-color: #4338ca; } .hover\:bg-orange-600:hover { background-color: #ea580c; } .hover\:bg-orange-700:hover { background-color: #c2410c; } .hover\:bg-red-50:hover { background-color: #fef2f2; } .hover\:bg-yellow-600:hover { background-color: #ca8a04; } .from-blue-100 { --tw-gradient-from: #dbeafe var(--tw-gradient-from-position); --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-blue-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-indigo-600 { --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #4f46e5 var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-indigo-600 { --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position); } .to-purple-600 { --tw-gradient-to: #9333ea var(--tw-gradient-to-position); } .hover\:from-blue-700:hover { --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:to-indigo-700:hover { --tw-gradient-to: #4338ca var(--tw-gradient-to-position); } .dark .dark\:bg-amber-500 { background-color: #f59e0b; } .dark .dark\:bg-orange-500 { background-color: #f97316; } .dark .dark\:bg-red-700 { background-color: #b91c1c; } .dark .dark\:bg-yellow-600 { background-color: #ca8a04; } .dark .dark\:hover\:bg-amber-600:hover { background-color: #d97706; } .dark .dark\:hover\:bg-indigo-600:hover { background-color: #4f46e5; } .dark .dark\:hover\:bg-orange-600:hover { background-color: #ea580c; } .dark .dark\:hover\:bg-purple-600:hover { background-color: #9333ea; } .dark .dark\:hover\:bg-yellow-700:hover { background-color: #a16207; }