/* Custom Color Theme based on #1E1647 */
:root {
    /* Primary color variations based on #1E1647 */
    --primary-900: #1E1647;    /* Original dark purple */
    --primary-800: #2A1F5A;    /* Slightly lighter */
    --primary-700: #362866;    /* Lighter */
    --primary-600: #423173;    /* Medium */
    --primary-500: #4E3A80;    /* Main primary */
    --primary-400: #6B5494;    /* Light */
    --primary-300: #8874A8;    /* Lighter */
    --primary-200: #A594BC;    /* Very light */
    --primary-100: #C2B4D0;    /* Extremely light */
    --primary-50: #E8E1F0;     /* Background tint */
    
    /* Secondary complementary colors */
    --secondary-600: #6B46C1;  /* Purple complement */
    --secondary-500: #8B5CF6;  /* Light purple */
    --secondary-400: #A78BFA;  /* Lighter purple */
    --secondary-100: #EDE9FE;  /* Very light purple */
    --secondary-50: #F5F3FF;   /* Background tint */
    
    /* Status colors that complement the theme */
    --success-600: #059669;    /* Green for success */
    --success-500: #10B981;    /* Light green */
    --success-100: #D1FAE5;    /* Light green background */
    --success-50: #ECFDF5;     /* Very light green */
    
    --warning-600: #D97706;    /* Orange for warning */
    --warning-500: #F59E0B;    /* Light orange */
    --warning-100: #FEF3C7;    /* Light orange background */
    --warning-50: #FFFBEB;     /* Very light orange */
    
    --danger-600: #DC2626;     /* Red for danger */
    --danger-500: #EF4444;     /* Light red */
    --danger-100: #FEE2E2;     /* Light red background */
    --danger-50: #FEF2F2;      /* Very light red */
    
    /* Neutral colors */
    --gray-900: #111827;
    --gray-800: #1F2937;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
}

/* Custom utility classes for the new theme */
.bg-primary-900 { background-color: var(--primary-900); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-50 { background-color: var(--primary-50); }

.text-primary-900 { color: var(--primary-900); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-100 { color: var(--primary-100); }

.border-primary-900 { border-color: var(--primary-900); }
.border-primary-800 { border-color: var(--primary-800); }
.border-primary-700 { border-color: var(--primary-700); }
.border-primary-600 { border-color: var(--primary-600); }
.border-primary-500 { border-color: var(--primary-500); }
.border-primary-400 { border-color: var(--primary-400); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-100 { border-color: var(--primary-100); }

/* Secondary color utilities */
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-50 { background-color: var(--secondary-50); }

.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-500 { color: var(--secondary-500); }
.text-secondary-400 { color: var(--secondary-400); }
.text-secondary-100 { color: var(--secondary-100); }

.border-secondary-600 { border-color: var(--secondary-600); }
.border-secondary-500 { border-color: var(--secondary-500); }
.border-secondary-400 { border-color: var(--secondary-400); }
.border-secondary-100 { border-color: var(--secondary-100); }

/* Status color utilities */
.bg-success-600 { background-color: var(--success-600); }
.bg-success-500 { background-color: var(--success-500); }
.bg-success-100 { background-color: var(--success-100); }
.bg-success-50 { background-color: var(--success-50); }

.text-success-600 { color: var(--success-600); }
.text-success-500 { color: var(--success-500); }
.text-success-800 { color: #065F46; }

.border-success-600 { border-color: var(--success-600); }
.border-success-500 { border-color: var(--success-500); }
.border-success-200 { border-color: #A7F3D0; }

.bg-warning-600 { background-color: var(--warning-600); }
.bg-warning-500 { background-color: var(--warning-500); }
.bg-warning-100 { background-color: var(--warning-100); }
.bg-warning-50 { background-color: var(--warning-50); }

.text-warning-600 { color: var(--warning-600); }
.text-warning-500 { color: var(--warning-500); }
.text-warning-800 { color: #92400E; }

.border-warning-600 { border-color: var(--warning-600); }
.border-warning-500 { border-color: var(--warning-500); }
.border-warning-200 { border-color: #FDE68A; }

.bg-danger-600 { background-color: var(--danger-600); }
.bg-danger-500 { background-color: var(--danger-500); }
.bg-danger-100 { background-color: var(--danger-100); }
.bg-danger-50 { background-color: var(--danger-50); }

.text-danger-600 { color: var(--danger-600); }
.text-danger-500 { color: var(--danger-500); }
.text-danger-800 { color: #991B1B; }

.border-danger-600 { border-color: var(--danger-600); }
.border-danger-500 { border-color: var(--danger-500); }
.border-danger-200 { border-color: #FECACA; }

/* Hover states */
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-primary-600:hover { background-color: var(--primary-600); }
.hover\:bg-primary-100:hover { background-color: var(--primary-100); }

.hover\:bg-secondary-600:hover { background-color: var(--secondary-600); }
.hover\:bg-secondary-100:hover { background-color: var(--secondary-100); }

.hover\:bg-success-600:hover { background-color: var(--success-600); }
.hover\:bg-success-100:hover { background-color: var(--success-100); }

.hover\:bg-warning-600:hover { background-color: var(--warning-600); }
.hover\:bg-warning-100:hover { background-color: var(--warning-100); }

.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-primary-600:hover { color: var(--primary-600); }

/* Focus states */
.focus\:ring-primary-500:focus { 
    --tw-ring-color: var(--primary-500); 
    --tw-ring-opacity: 0.5;
}

.focus\:ring-primary-600:focus { 
    --tw-ring-color: var(--primary-600); 
    --tw-ring-opacity: 0.5;
}

/* Background with opacity for better visual hierarchy */
.bg-primary-900-opacity-90 { 
    background-color: rgba(30, 22, 71, 0.9); 
}

.bg-primary-800-opacity-95 { 
    background-color: rgba(42, 31, 90, 0.95); 
}

/* Navigation specific styles with fallbacks for production */
nav.bg-primary-900 {
    background-color: var(--primary-900, #1E1647) !important;
    /* Fallback color in case CSS variables don't load */
    background-color: #1E1647 !important;
}

nav.bg-primary-900 .text-white,
nav.bg-primary-900 a.text-white,
nav.bg-primary-900 span.text-white {
    color: #ffffff !important;
    text-decoration: none;
}

nav.bg-primary-900 a.text-white:hover {
    color: #e5e7eb !important; /* gray-200 */
    text-decoration: none;
}

/* Ensure navigation links are visible */
.navbar-link {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.navbar-link:hover {
    color: #e5e7eb !important;
}

/* Additional contrast fixes for production */
.nav-brand {
    color: #ffffff !important;
    font-weight: bold;
}

/* Force white text on dark navigation - production fix */
nav[class*="bg-primary"] * {
    color: #ffffff !important;
}

nav[class*="bg-primary"] a {
    color: #ffffff !important;
    text-decoration: none;
}

nav[class*="bg-primary"] a:hover {
    color: #e5e7eb !important;
}