@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: #0A2463;
    --primary-light: #1E3A8A;
    --primary-card: #2A4386;
    --primary-dark: #0A2463;
    --primary-darkest: #051640;
    --light-blue: #E0E7FF;
}

@layer components {
    .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors;
    }
    .glass-nav {
        backdrop-filter: blur(10px);
        background-color: rgba(10, 36, 99, 0.8);
    }
}

body {
    min-height: 1024px;
    background-color: var(--primary-dark);
    color: white;
}

.bg-primary-light {
    background-color: var(--primary-light);
}

.bg-primary-card {
    background-color: var(--primary-card);
}

.bg-primary-dark {
    background-color: var(--primary-dark);
}

.bg-primary-darkest {
    background-color: var(--primary-darkest);
}

.text-light-blue {
    color: var(--light-blue);
}

.hero-section {
    background-size: cover;
    background-position: center;
}

.feature-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

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

.scroll-smooth {
    scroll-behavior: smooth;
}

.transition-colors {
    transition: color 0.3s ease;
}