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

@layer base {
    body {
        background-color: #050505; /* Deep Obsidian */
        color: #e5e5e5;
        font-family: 'Inter', sans-serif;
    }
}

@layer components {
    .glass {
        background: rgba(20, 20, 20, 0.4);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .glass-gold {
        background: rgba(255, 215, 0, 0.03);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 215, 0, 0.15);
    }
    
    .glass-silver {
        background: rgba(192, 192, 192, 0.03);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(192, 192, 192, 0.15);
    }

    .text-gradient-gold {
        background: linear-gradient(135deg, #FFD700 0%, #FFF3B0 50%, #B8860B 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .text-gradient-silver {
        background: linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 50%, #A0A0A0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Base Utility Classes */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}