/* Theme Colors - Centralized Color System */
:root {
    /* Primary Red Colors */
    --color-red-primary: #dc2626;
    --color-red-hover: #b91c1c;
    --color-red-light: #ef4444;
    --color-red-lighter: #f87171;
    
    /* Dark Background Colors */
    --color-dark-bg: #0a0a0a;
    --color-dark-card: #1a1a1a;
    --color-dark-sidebar: #111111;
    --color-dark-hover: #2a2a2a;
    
    /* Gray Colors */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-warning: #fbbf24;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af;
    --color-text-muted: #6b7280;
}

/* Apply consistent red theme */
.bg-red-primary {
    background-color: var(--color-red-primary) !important;
}

.bg-red-hover {
    background-color: var(--color-red-hover) !important;
}

.text-red-primary {
    color: var(--color-red-primary) !important;
}

.border-red-primary {
    border-color: var(--color-red-primary) !important;
}

.hover\:bg-red-hover:hover {
    background-color: var(--color-red-hover) !important;
}

.hover\:bg-red-700:hover {
    background-color: var(--color-red-hover) !important;
}

/* Override Tailwind red-600 to use primary red */
.bg-red-600 {
    background-color: var(--color-red-primary) !important;
}

.text-red-600 {
    color: var(--color-red-primary) !important;
}

.border-red-600 {
    border-color: var(--color-red-primary) !important;
}

.hover\:bg-red-700:hover {
    background-color: var(--color-red-hover) !important;
}

/* Dark theme colors */
.bg-dark-bg {
    background-color: var(--color-dark-bg) !important;
}

.bg-dark-card {
    background-color: var(--color-dark-card) !important;
}

.bg-dark-sidebar {
    background-color: var(--color-dark-sidebar) !important;
}

