/* Import Nunito font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');

/* Brand Colors */
:root {
    --primary-purple: #3C107B;
    --primary-blue: #5510F4;
    --dark-purple: #1E083E;
    --cyan: #38F5FF;
    --magenta: #F706F8;
    --lime: #A1FD00;
    --orange: #FF6900;
    --teal: #36E7B0;
}

/* Apply Nunito font to all elements */
* {
    font-family: 'Nunito', sans-serif;
}

/* Brand-specific utility classes */
.bg-primary-purple { background-color: var(--primary-purple); }
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-dark-purple { background-color: var(--dark-purple); }
.bg-cyan { background-color: var(--cyan); }
.bg-magenta { background-color: var(--magenta); }
.bg-lime { background-color: var(--lime); }
.bg-orange { background-color: var(--orange); }
.bg-teal { background-color: var(--teal); }

.text-primary-purple { color: var(--primary-purple); }
.text-primary-blue { color: var(--primary-blue); }
.text-dark-purple { color: var(--dark-purple); }
.text-cyan { color: var(--cyan); }
.text-magenta { color: var(--magenta); }
.text-lime { color: var(--lime); }
.text-orange { color: var(--orange); }
.text-teal { color: var(--teal); }

.border-primary-purple { border-color: var(--primary-purple); }
.border-primary-blue { border-color: var(--primary-blue); }
.border-dark-purple { border-color: var(--dark-purple); }
.border-cyan { border-color: var(--cyan); }
.border-magenta { border-color: var(--magenta); }
.border-lime { border-color: var(--lime); }
.border-orange { border-color: var(--orange); }
.border-teal { border-color: var(--teal); }

/* Hover states */
.hover\:bg-primary-purple:hover { background-color: var(--primary-purple); }
.hover\:bg-primary-blue:hover { background-color: var(--primary-blue); }
.hover\:bg-dark-purple:hover { background-color: var(--dark-purple); }
.hover\:bg-cyan:hover { background-color: var(--cyan); }
.hover\:bg-magenta:hover { background-color: var(--magenta); }
.hover\:bg-lime:hover { background-color: var(--lime); }
.hover\:bg-orange:hover { background-color: var(--orange); }
.hover\:bg-teal:hover { background-color: var(--teal); }

.hover\:text-primary-purple:hover { color: var(--primary-purple); }
.hover\:text-primary-blue:hover { color: var(--primary-blue); }
.hover\:text-dark-purple:hover { color: var(--dark-purple); }
.hover\:text-cyan:hover { color: var(--cyan); }
.hover\:text-magenta:hover { color: var(--magenta); }
.hover\:text-lime:hover { color: var(--lime); }
.hover\:text-orange:hover { color: var(--orange); }
.hover\:text-teal:hover { color: var(--teal); }

/* Focus states */
.focus\:ring-primary-purple:focus { --tw-ring-color: var(--primary-purple); }
.focus\:ring-primary-blue:focus { --tw-ring-color: var(--primary-blue); }
.focus\:ring-dark-purple:focus { --tw-ring-color: var(--dark-purple); }
.focus\:ring-cyan:focus { --tw-ring-color: var(--cyan); }
.focus\:ring-magenta:focus { --tw-ring-color: var(--magenta); }
.focus\:ring-lime:focus { --tw-ring-color: var(--lime); }
.focus\:ring-orange:focus { --tw-ring-color: var(--orange); }
.focus\:ring-teal:focus { --tw-ring-color: var(--teal); }

/* Custom button styles */
.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(85, 16, 244, 0.3);
}

.btn-secondary {
    background-color: var(--cyan);
    color: var(--dark-purple);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(56, 245, 255, 0.3);
}

/* Gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--magenta) 0%, var(--orange) 100%);
}

/* Custom animations */
@keyframes brandPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.brand-pulse {
    animation: brandPulse 2s infinite;
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
    /* Ensure touch targets are large enough */
    .btn-primary, .btn-secondary {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    /* Improve chart readability on mobile */
    #leadershipChart {
        max-height: 300px;
    }
    
    /* Better spacing for mobile */
    .space-y-4 > * + * {
        margin-top: 1rem;
    }
    
    .space-y-6 > * + * {
        margin-top: 1.5rem;
    }
    
    /* Optimize grid layouts for mobile */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Improve text readability on small screens */
    .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    /* Better mobile navigation */
    .tab-button {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Optimize card layouts for mobile */
    .bg-white.rounded-lg {
        margin-bottom: 1rem;
    }
    
    /* Improve mobile form elements */
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Better spacing for tablets */
    .p-4.sm\:p-6 {
        padding: 1.25rem;
    }
    
    /* Optimize grid for tablets */
    .grid-cols-2.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Improve chart sizing for tablets */
    #leadershipChart {
        max-height: 400px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on high DPI displays */
    .btn-primary, .btn-secondary {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-secondary {
        transition: none;
        transform: none;
    }
    
    .brand-pulse {
        animation: none;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Future dark mode styles can go here */
}

/* Print styles */
@media print {
    .btn-primary, .btn-secondary {
        background-color: #000 !important;
        color: #fff !important;
        border: 1px solid #000 !important;
    }
    
    .bg-white {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
    }
}