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

/* Custom CSS Variables */
:root {
    --matte-black: #0A0A0A;
    --charcoal: #1A1A1A;
    --gunmetal: #52575D;
    --neutral-950: #0f0f0f;
}

/* Base Styles */
@layer base {
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background-color: #000000;
        color: #ffffff;
    }
    
    ::selection {
        background-color: #ffffff;
        color: #000000;
    }
}

/* Custom Components */
@layer components {
    .glass-panel {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Custom Animations */
@layer utilities {
    .fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .delay-100 {
        transition-delay: 0.1s;
    }
    
    .delay-200 {
        transition-delay: 0.2s;
    }
    
    .delay-300 {
        transition-delay: 0.3s;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
    .glass-panel {
        padding: 2rem;
    }
}