@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --selection: #007bff;
    --secondary: #FFFFFF;
    --muted: #E9ECEF;
    --black: #000000;
    --soft: #F8F9FA;
    --neon-blue: #00f0ff;
}

html {
    scroll-behavior: smooth;
}

body::selection{
    background-color: var(--black);
    color: var(--selection);
}

body {
    font-family: 'Poppins', sans-serif;
}

/* White as secondary color styles */
.text-white-secondary {
    color: var(--secondary);
}

.bg-white-secondary {
    background-color: var(--secondary);
}

.border-white-secondary {
    border-color: var(--secondary);
}

.text-white-soft {
    color: var(--soft);
}

.bg-white-soft {
    background-color: var(--soft);
}

.text-white-muted {
    color: var(--muted);
}

.bg-white-muted {
    background-color: var(--muted);
}

/* Enhanced blue-white combinations */
.bg-blue-white-gradient {
    background: linear-gradient(135deg, #0A192F 0%, #172A46 50%, var(--secondary) 100%);
}

.text-blue-white-combo {
    background: linear-gradient(to right, #00BFFF, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-comment {
    @apply bg-lightblue text-accent p-2 rounded-md text-xs font-mono mb-4;
}

.text-neon-blue {
    color: var(--neon-blue); /* neon blue */
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 10px var(--neon-blue);
}

.neon-text {
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.7);
}

.neon-border {
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
}

.grid-pattern {
    background-image: linear-gradient(rgba(100, 255, 218, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 255, 218, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.team-member:hover .member-overlay {
    opacity: 1;
}

.project-card:hover .project-overlay {
    opacity: 0;
}

.navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.animated-bg {
    background: linear-gradient(-45deg, #0A192F, #172A46, #0A192F, #172A46);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}