/* 
 * Theme CSS
 * This file provides theme functionality with color variables and theme-specific styles
 */

/* Theme Variables */
:root {
  /* Light Theme (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --bg-tertiary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border-color: #d1d5db;
  --input-bg: #ffffff;
  --input-border: #9ca3af;
  --button-bg: #ffffff;
  --button-border: #9ca3af;
  --button-text: #374151;
  --button-hover: #f3f4f6;
  --accent-color: #3b82f6;
  --accent-hover: #2563eb;
  --success-color: #10b981;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Dark Theme */
  --dark-bg: #111827;
  --dark-main: #1f2937;
  --dark-sidebar: #1f2937;
  --dark-header: #1f2937;
  --dark-footer: #1f2937;
  --dark-card: #1f2937;
  --dark-text: #f9fafb;
  --dark-muted: #9ca3af;
  --dark-hover: #374151;
  --dark-border: #4b5563;
  --dark-input-bg: #374151;
  --dark-input-border: #6b7280;
  --dark-input-text: #f9fafb;
  --dark-button-border: #6b7280;
  --dark-button-text: #f9fafb;
  --dark-button-hover: #374151;
  --dark-dropdown: #1f2937;
  --dark-modal: #1f2937;
  
  /* Blue Theme */
  --blue-bg: #eff6ff;
  --blue-main: #dbeafe;
  --blue-sidebar: #bfdbfe;
  --blue-header: #bfdbfe;
  --blue-footer: #bfdbfe;
  --blue-card: #bfdbfe;
  --blue-text: #1e40af;
  --blue-muted: #60a5fa;
  --blue-hover: #bfdbfe;
  --blue-border: #93c5fd;
  --blue-input-bg: #ffffff;
  --blue-input-border: #60a5fa;
  --blue-input-text: #1e40af;
  --blue-button-border: #60a5fa;
  --blue-button-text: #1d4ed8;
  --blue-button-hover: #eff6ff;
  --blue-dropdown: #ffffff;
  --blue-modal: #bfdbfe;
  
  /* Green Theme */
  --green-bg: #f0fdf4;
  --green-main: #dcfce7;
  --green-sidebar: #bbf7d0;
  --green-header: #bbf7d0;
  --green-footer: #bbf7d0;
  --green-card: #bbf7d0;
  --green-text: #166534;
  --green-muted: #4ade80;
  --green-hover: #bbf7d0;
  --green-border: #86efac;
  --green-input-bg: #ffffff;
  --green-input-border: #4ade80;
  --green-input-text: #166534;
  --green-button-border: #4ade80;
  --green-button-text: #15803d;
  --green-button-hover: #f0fdf4;
  --green-dropdown: #ffffff;
  --green-modal: #bbf7d0;
  
  /* Violet Theme */
  --violet-bg: #f5f3ff;
  --violet-main: #ede9fe;
  --violet-sidebar: #ddd6fe;
  --violet-header: #ddd6fe;
  --violet-footer: #ddd6fe;
  --violet-card: #ddd6fe;
  --violet-text: #5b21b6;
  --violet-muted: #a78bfa;
  --violet-hover: #ddd6fe;
  --violet-border: #c4b5fd;
  --violet-input-bg: #ffffff;
  --violet-input-border: #a78bfa;
  --violet-input-text: #5b21b6;
  --violet-button-border: #a78bfa;
  --violet-button-text: #6d28d9;
  --violet-button-hover: #f5f3ff;
  --violet-dropdown: #ffffff;
  --violet-modal: #ddd6fe;
}

/* Theme Classes */
/* Light Theme (Default) */
.theme-light {
  --bg: var(--bg-primary);
  --main: var(--bg-tertiary);
  --sidebar: var(--bg-secondary);
  --header: var(--bg-secondary);
  --footer: var(--bg-secondary);
  --card: var(--bg-secondary);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --hover: var(--button-hover);
  --border: var(--border-color);
  --input-bg: var(--input-bg);
  --input-border: var(--input-border);
  --input-text: var(--text-primary);
  --button-border: var(--button-border);
  --button-text: var(--button-text);
  --button-hover: var(--button-hover);
  --dropdown: var(--bg-secondary);
  --modal: var(--bg-secondary);
}

/* Dark Theme */
.theme-dark {
  --bg: var(--dark-bg);
  --main: var(--dark-main);
  --sidebar: var(--dark-sidebar);
  --header: var(--dark-header);
  --footer: var(--dark-footer);
  --card: var(--dark-card);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --hover: var(--dark-hover);
  --border: var(--dark-border);
  --input-bg: var(--dark-input-bg);
  --input-border: var(--dark-input-border);
  --input-text: var(--dark-input-text);
  --button-border: var(--dark-button-border);
  --button-text: var(--dark-button-text);
  --button-hover: var(--dark-button-hover);
  --dropdown: var(--dark-dropdown);
  --modal: var(--dark-modal);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Blue Theme */
.theme-blue {
  --bg: var(--blue-bg);
  --main: var(--blue-main);
  --sidebar: var(--blue-sidebar);
  --header: var(--blue-header);
  --footer: var(--blue-footer);
  --card: var(--blue-card);
  --text: var(--blue-text);
  --muted: var(--blue-muted);
  --hover: var(--blue-hover);
  --border: var(--blue-border);
  --input-bg: var(--blue-input-bg);
  --input-border: var(--blue-input-border);
  --input-text: var(--blue-input-text);
  --button-border: var(--blue-button-border);
  --button-text: var(--blue-button-text);
  --button-hover: var(--blue-button-hover);
  --dropdown: var(--blue-dropdown);
  --modal: var(--blue-modal);
  --shadow-sm: 0 1px 2px 0 rgba(37, 99, 235, 0.05);
  --shadow: 0 1px 3px 0 rgba(37, 99, 235, 0.1), 0 1px 2px 0 rgba(37, 99, 235, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -2px rgba(37, 99, 235, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(37, 99, 235, 0.1), 0 10px 10px -5px rgba(37, 99, 235, 0.04);
}

/* Green Theme */
.theme-green {
  --bg: var(--green-bg);
  --main: var(--green-main);
  --sidebar: var(--green-sidebar);
  --header: var(--green-header);
  --footer: var(--green-footer);
  --card: var(--green-card);
  --text: var(--green-text);
  --muted: var(--green-muted);
  --hover: var(--green-hover);
  --border: var(--green-border);
  --input-bg: var(--green-input-bg);
  --input-border: var(--green-input-border);
  --input-text: var(--green-input-text);
  --button-border: var(--green-button-border);
  --button-text: var(--green-button-text);
  --button-hover: var(--green-button-hover);
  --dropdown: var(--green-dropdown);
  --modal: var(--green-modal);
  --shadow-sm: 0 1px 2px 0 rgba(22, 163, 74, 0.05);
  --shadow: 0 1px 3px 0 rgba(22, 163, 74, 0.1), 0 1px 2px 0 rgba(22, 163, 74, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(22, 163, 74, 0.1), 0 2px 4px -1px rgba(22, 163, 74, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(22, 163, 74, 0.1), 0 4px 6px -2px rgba(22, 163, 74, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(22, 163, 74, 0.1), 0 10px 10px -5px rgba(22, 163, 74, 0.04);
}

/* Violet Theme */
.theme-violet {
  --bg: var(--violet-bg);
  --main: var(--violet-main);
  --sidebar: var(--violet-sidebar);
  --header: var(--violet-header);
  --footer: var(--violet-footer);
  --card: var(--violet-card);
  --text: var(--violet-text);
  --muted: var(--violet-muted);
  --hover: var(--violet-hover);
  --border: var(--violet-border);
  --input-bg: var(--violet-input-bg);
  --input-border: var(--violet-input-border);
  --input-text: var(--violet-input-text);
  --button-border: var(--violet-button-border);
  --button-text: var(--violet-button-text);
  --button-hover: var(--violet-button-hover);
  --dropdown: var(--violet-dropdown);
  --modal: var(--violet-modal);
  --shadow-sm: 0 1px 2px 0 rgba(124, 58, 237, 0.05);
  --shadow: 0 1px 3px 0 rgba(124, 58, 237, 0.1), 0 1px 2px 0 rgba(124, 58, 237, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(124, 58, 237, 0.1), 0 2px 4px -1px rgba(124, 58, 237, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(124, 58, 237, 0.1), 0 4px 6px -2px rgba(124, 58, 237, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(124, 58, 237, 0.1), 0 10px 10px -5px rgba(124, 58, 237, 0.04);
}

/* Theme-specific styles */
body {
  background-color: var(--bg);
  color: var(--text);
}

/* Text Colors */
.text-primary {
  color: var(--text);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--muted);
}

/* Background Colors */
.bg-primary {
  background-color: var(--bg);
}

.bg-secondary {
  background-color: var(--card);
}

.bg-tertiary {
  background-color: var(--main);
}

/* Component Colors */
main {
  background-color: var(--bg);
}

.sidebar {
  background-color: var(--sidebar);
}

header {
  background-color: var(--header);
}

header button {
  background-color: transparent;
  color: var(--text);
}

header button:hover {
  background-color: var(--hover);
}

footer {
  background-color: var(--footer);
}

.card {
  background-color: var(--card);
}

/* Table Colors */
tbody {
  background-color: var(--main);
  color: var(--text);
}

thead {
  color: var(--text);
}

tbody tr.hover:hover {
  background-color: var(--hover);
}

/* Form Colors */
label {
  color: var(--text-secondary);
}

input, select, textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

/* Button Colors */
.btn {
  background-color: var(--card);
  color: var(--button-text);
  border-color: var(--button-border);
}

.btn:hover {
  background-color: var(--main);
  color: var(--text);
}

.btn-primary {
  background-color: var(--header);
  color: var(--button-text);
  border-color: var(--button-border);
}

.btn-primary:hover {
  background-color: var(--bg);
  color: var(--text);
}

.btn-secondary {
  background-color: var(--main);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background-color: var(--bg);
  color: var(--text);
}

/* Modal Colors */
.modal {
  background-color: var(--main);
  color: var(--text);
  border-color: var(--border);
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  padding: 1rem;
  margin: 1rem;
  box-shadow: var(--shadow);
}

.modal-overlay {
  background-color: var(--modal-overlay-bg);
  opacity: 0.75;
} 

.modal-content {
  background-color: var(--modal);
}

/* Alert Colors */
.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--success-color);
  border-color: var(--success-color);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
  border-color: var(--error-color);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--warning-color);
  border-color: var(--warning-color);
}

/* Badge Colors */
.badge-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--success-color);
}

.badge-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
}

.badge-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--warning-color);
}

/* Border Colors */
.border {
  border-color: var(--border);
}

/* Status Colors */
.text-success {
  color: var(--success-color);
}

.text-error {
  color: var(--error-color);
}

.text-warning {
  color: var(--warning-color);
}

/* Hover States */
.hover\:bg-gray-100:hover {
  background-color: var(--hover);
}

/* Navigation */
.nav-item {
  color: var(--text);
}

.nav-item:hover {
  background-color: var(--hover);
}

.nav-item.active {
  background-color: var(--accent-color);
  color: white;
}

/* Footer */
footer .text {
  color: var(--text);
}

footer .muted {
  color: var(--muted);
}

/* Header */
header .text {
  color: var(--text);
}

/* Sidebar */
.sidebar .text {
  color: var(--text);
}

.sidebar .border-b {
  border-color: var(--border);
}

/* Sidebar Navigation Styles */
.sidebar .button {
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s;
}

.sidebar .button:hover {
  background-color: var(--main);
}

/* Make submenu links look like the parent menu items */
.sidebar .submenu a.button {
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s;
}

.sidebar .submenu a.button:hover {
  background-color: var(--main);
}

/* Active state for navigation items */
.sidebar .button.active,
.sidebar .submenu a.button.active {
  background-color: var(--accent-color);
  color: white;
}

/* Color Utility Classes */
/* Red Colors */
.text-red-50 { color: #fef2f2; }
.text-red-100 { color: #fee2e2; }
.text-red-200 { color: #fecaca; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }
.text-red-950 { color: #450a0a; }

.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-300 { background-color: #fca5a5; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.bg-red-800 { background-color: #991b1b; }
.bg-red-900 { background-color: #7f1d1d; }
.bg-red-950 { background-color: #450a0a; }

/* Blue Colors */
.text-blue-50 { color: #eff6ff; }
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }
.text-blue-950 { color: #172554; }

.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-blue-300 { background-color: #93c5fd; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.bg-blue-900 { background-color: #1e3a8a; }
.bg-blue-950 { background-color: #172554; }

/* Green Colors */
.text-green-50 { color: #f0fdf4; }
.text-green-100 { color: #dcfce7; }
.text-green-200 { color: #bbf7d0; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-green-900 { color: #14532d; }
.text-green-950 { color: #052e16; }

.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-300 { background-color: #86efac; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-800 { background-color: #166534; }
.bg-green-900 { background-color: #14532d; }
.bg-green-950 { background-color: #052e16; }

/* Yellow Colors */
.text-yellow-50 { color: #fefce8; }
.text-yellow-100 { color: #fef9c3; }
.text-yellow-200 { color: #fef08a; }
.text-yellow-300 { color: #fde047; }
.text-yellow-400 { color: #facc15; }
.text-yellow-500 { color: #eab308; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }
.text-yellow-900 { color: #713f12; }
.text-yellow-950 { color: #422006; }

.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-yellow-300 { background-color: #fde047; }
.bg-yellow-400 { background-color: #facc15; }
.bg-yellow-500 { background-color: #eab308; }
.bg-yellow-600 { background-color: #ca8a04; }
.bg-yellow-700 { background-color: #a16207; }
.bg-yellow-800 { background-color: #854d0e; }
.bg-yellow-900 { background-color: #713f12; }
.bg-yellow-950 { background-color: #422006; }

/* Purple Colors */
.text-purple-50 { color: #faf5ff; }
.text-purple-100 { color: #f3e8ff; }
.text-purple-200 { color: #e9d5ff; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7e22ce; }
.text-purple-800 { color: #6b21a8; }
.text-purple-900 { color: #581c87; }
.text-purple-950 { color: #2e1065; }

.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-purple-300 { background-color: #d8b4fe; }
.bg-purple-400 { background-color: #c084fc; }
.bg-purple-500 { background-color: #a855f7; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-purple-800 { background-color: #6b21a8; }
.bg-purple-900 { background-color: #581c87; }
.bg-purple-950 { background-color: #2e1065; }

/* Indigo Colors */
.text-indigo-50 { color: #eef2ff; }
.text-indigo-100 { color: #e0e7ff; }
.text-indigo-200 { color: #c7d2fe; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-400 { color: #818cf8; }
.text-indigo-500 { color: #6366f1; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-indigo-800 { color: #3730a3; }
.text-indigo-900 { color: #312e81; }
.text-indigo-950 { color: #1e1b4b; }

.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-200 { background-color: #c7d2fe; }
.bg-indigo-300 { background-color: #a5b4fc; }
.bg-indigo-400 { background-color: #818cf8; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-indigo-800 { background-color: #3730a3; }
.bg-indigo-900 { background-color: #312e81; }
.bg-indigo-950 { background-color: #1e1b4b; }

/* Gray Colors */
.text-gray-50 { color: #f9fafb; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-gray-950 { color: #030712; }

.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }
.bg-gray-950 { background-color: #030712; }

/* Slate Colors */
.text-slate-50 { color: #f8fafc; }
.text-slate-100 { color: #f1f5f9; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-slate-950 { color: #020617; }

.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-slate-400 { background-color: #94a3b8; }
.bg-slate-500 { background-color: #64748b; }
.bg-slate-600 { background-color: #475569; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-950 { background-color: #020617; }

/* Border Color Utilities */
.border-red-50 { border-color: #fef2f2; }
.border-red-100 { border-color: #fee2e2; }
.border-red-200 { border-color: #fecaca; }
.border-red-300 { border-color: #fca5a5; }
.border-red-400 { border-color: #f87171; }
.border-red-500 { border-color: #ef4444; }
.border-red-600 { border-color: #dc2626; }
.border-red-700 { border-color: #b91c1c; }
.border-red-800 { border-color: #991b1b; }
.border-red-900 { border-color: #7f1d1d; }
.border-red-950 { border-color: #450a0a; }

.border-blue-50 { border-color: #eff6ff; }
.border-blue-100 { border-color: #dbeafe; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-300 { border-color: #93c5fd; }
.border-blue-400 { border-color: #60a5fa; }
.border-blue-500 { border-color: #3b82f6; }
.border-blue-600 { border-color: #2563eb; }
.border-blue-700 { border-color: #1d4ed8; }
.border-blue-800 { border-color: #1e40af; }
.border-blue-900 { border-color: #1e3a8a; }
.border-blue-950 { border-color: #172554; }

.border-green-50 { border-color: #f0fdf4; }
.border-green-100 { border-color: #dcfce7; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-300 { border-color: #86efac; }
.border-green-400 { border-color: #4ade80; }
.border-green-500 { border-color: #22c55e; }
.border-green-600 { border-color: #16a34a; }
.border-green-700 { border-color: #15803d; }
.border-green-800 { border-color: #166534; }
.border-green-900 { border-color: #14532d; }
.border-green-950 { border-color: #052e16; }

/* Hover Color Utilities */
.hover\:text-red-500:hover { color: #ef4444; }
.hover\:text-blue-500:hover { color: #3b82f6; }
.hover\:text-green-500:hover { color: #22c55e; }
.hover\:text-yellow-500:hover { color: #eab308; }
.hover\:text-purple-500:hover { color: #a855f7; }
.hover\:text-indigo-500:hover { color: #6366f1; }
.hover\:text-gray-500:hover { color: #6b7280; }
.hover\:text-slate-500:hover { color: #64748b; }

.hover\:bg-red-500:hover { background-color: #ef4444; }
.hover\:bg-blue-500:hover { background-color: #3b82f6; }
.hover\:bg-green-500:hover { background-color: #22c55e; }
.hover\:bg-yellow-500:hover { background-color: #eab308; }
.hover\:bg-purple-500:hover { background-color: #a855f7; }
.hover\:bg-indigo-500:hover { background-color: #6366f1; }
.hover\:bg-gray-500:hover { background-color: #6b7280; }
.hover\:bg-slate-500:hover { background-color: #64748b; }