/* Design Tokens for Xpress Lube NY */
:root {
    --navy-primary: #0f172a; /* Slate 900 */
    --navy-secondary: #1e293b; /* Slate 800 */
    --gold-accent: #eab308; /* Yellow 500 */
    --gold-hover: #ca8a04; /* Yellow 600 */
    --red-alert: #dc2626; /* Red 600 */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

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

@layer base {
    body {
        @apply bg-[#0f172a] text-slate-200 font-sans antialiased;
    }
    h1, h2, h3, h4 {
        @apply font-bold tracking-tight text-[#eab308];
    }
}

@layer components {
    .glass-card {
        @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl p-6;
    }
    .btn-primary {
        @apply bg-[#eab308] text-[#0f172a] px-6 py-3 rounded-xl font-bold transition-all hover:bg-[#ca8a04] hover:scale-105 active:scale-95 shadow-lg shadow-yellow-500/20;
    }
    .btn-secondary {
        @apply border-2 border-slate-700 hover:border-slate-500 text-slate-200 px-6 py-3 rounded-xl font-bold transition-all;
    }
    .nav-link {
        @apply text-slate-400 hover:text-[#eab308] transition-colors relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-[#eab308] hover:after:w-full after:transition-all;
    }
}

/* Custom Micro-animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}