/* OPTIMIZED COLOR PALETTE - Cosmic Workshop */
:root {
    --cosmic-bg: #0a0a1a;
    --cosmic-bg-light: #1a1a2e;
    --cosmic-bg-lighter: #2a2a3e;
    --cosmic-text: #f0f0ff;
    --cosmic-text-muted: #b0b0ff;
    --cosmic-text-light: #e0e0ff;
    --cosmic-primary: #4fc3f7;
    --cosmic-secondary: #7b1fa2;
    --cosmic-success: #66bb6a;
    --cosmic-warning: #ffa726;
    --cosmic-danger: #f44336;
    --cosmic-info: #29b6f6;
    --cosmic-magic: #9c27b0;
    --cosmic-twilight: #8888cc;
}

/* Fix dark text classes */
.text-dark, .text-black { color: var(--cosmic-text-light) !important; }
.text-muted, .text-secondary { color: var(--cosmic-text-muted) !important; }

/* Ensure all text in cosmic cards is light */
.cosmic-card, .cosmic-card * { color: var(--cosmic-text) !important; }

/* Footer text */
footer, footer * { color: var(--cosmic-text-light) !important; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Focus accessibility */
*:focus { outline: 2px solid var(--cosmic-primary); outline-offset: 2px; }
.btn:focus, .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25); }

/* Mobile optimizations */
@media (max-width: 768px) {
    :root {
        --cosmic-text: #ffffff;
        --cosmic-text-muted: #ccccff;
    }
    
    /* Better touch targets */
    .btn, .dropdown-toggle, .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* Stack navigation on mobile */
    .d-flex.flex-wrap {
        flex-direction: column !important;
    }
    
    .dropdown {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .dropdown-toggle {
        width: 100%;
        text-align: left;
    }
    
    .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-top: 0;
        border: none;
        box-shadow: none;
    }
    
    /* Hide text, show only icons on very small screens */
    @media (max-width: 480px) {
        .btn span:not(.bi) {
            display: none;
        }
        .btn .bi {
            margin-right: 0 !important;
            font-size: 20px;
        }
    }
}