/* Cool Black Theme CSS */

/* Base black theme variables */
:root {
    --theme-bg-primary: #000000;
    --theme-bg-secondary: #0a0a0a;
    --theme-bg-tertiary: #1a1a1a;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #b5bac1;
    --theme-accent-1: rgba(100, 200, 255, 0.8);
    --theme-accent-2: rgba(255, 100, 200, 0.8);
    --theme-accent-3: rgba(200, 100, 255, 0.8);
    --theme-glow-1: rgba(100, 200, 255, 0.3);
    --theme-glow-2: rgba(255, 100, 200, 0.3);
    --theme-glow-3: rgba(200, 100, 255, 0.3);
}

/* Global dark theme styles */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent-1) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--theme-accent-1), var(--theme-accent-2));
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--theme-accent-2), var(--theme-accent-3));
}

/* Cool button styles */
.button, .btn {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--theme-text-primary) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.button::before, .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.button:hover, .btn:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: var(--theme-accent-1) !important;
    box-shadow: 0 0 30px var(--theme-glow-1) !important;
    transform: translateY(-2px) !important;
}

.button:hover::before, .btn:hover::before {
    left: 100%;
}

/* Cool card styles */
.card, .feature-card, .stat-card {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.card:hover, .feature-card:hover, .stat-card:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: var(--theme-accent-1) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px var(--theme-glow-1) !important;
    transform: translateY(-5px) !important;
}

/* Animated text gradients */
.gradient-text {
    background: linear-gradient(135deg, var(--theme-accent-1), var(--theme-accent-2), var(--theme-accent-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background: linear-gradient(135deg, var(--theme-accent-1), var(--theme-accent-2), var(--theme-accent-3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    50% {
        background: linear-gradient(135deg, var(--theme-accent-3), var(--theme-accent-1), var(--theme-accent-2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Cool input styles */
input, textarea, select {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--theme-text-primary) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: var(--theme-accent-1) !important;
    box-shadow: 0 0 20px var(--theme-glow-1) !important;
    outline: none !important;
}

/* Navigation enhancements */
.nav-link, .navbar-nav .nav-link {
    color: var(--theme-text-primary) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

.nav-link:hover, .navbar-nav .nav-link:hover {
    color: var(--theme-accent-1) !important;
    text-shadow: 0 0 10px var(--theme-glow-1) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-accent-1), var(--theme-accent-2));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}