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

@layer base {
    body {
        background-color: #0f172a;
        color: #f8fafc;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
}

@layer components {
    .glass-panel {
        background: rgba(30, 41, 59, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .btn-premium {
        background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
        transition: all 0.3s ease;
    }

    .btn-premium:hover {
        box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5);
        transform: translateY(-2px);
    }

    .grid-bg {
        background-size: 40px 40px;
        background-image: linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px);
        mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    }

    .text-glow {
        text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    }
}