@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

@layer base {
    html {
        @apply scroll-smooth;
    }
    body {
        @apply bg-surface-900 text-gray-100 font-sans antialiased;
    }
    * {
        @apply border-white/10;
    }
}

@layer components {
    /* ─── Cards ─── */
    .card {
        @apply bg-surface-800 border border-white/5 rounded-2xl;
    }
    .card-glow {
        @apply card shadow-glow-sm transition-all duration-300 hover:shadow-glow;
    }

    /* ─── Buttons ─── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl font-semibold text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface-900 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply btn bg-brand-600 hover:bg-brand-500 text-white focus:ring-brand-500 shadow-glow-sm hover:shadow-glow;
    }
    .btn-secondary {
        @apply btn bg-surface-600 hover:bg-surface-500 text-gray-200 focus:ring-white/20;
    }
    .btn-accent {
        @apply btn bg-accent-500 hover:bg-accent-400 text-white focus:ring-accent-500;
    }
    .btn-ghost {
        @apply btn bg-transparent hover:bg-white/5 text-gray-400 hover:text-white focus:ring-white/20;
    }
    .btn-lg {
        @apply px-6 py-3 text-base rounded-2xl;
    }
    .btn-sm {
        @apply px-3 py-1.5 text-xs rounded-lg;
    }

    /* ─── Form Inputs ─── */
    .input {
        @apply w-full bg-surface-700 border border-white/10 rounded-xl px-4 py-2.5 text-gray-100 placeholder-gray-500 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent;
    }
    .label {
        @apply block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5;
    }

    /* ─── Badge / Rank ─── */
    .badge {
        @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold;
    }
    .badge-bronze  { @apply bg-amber-900/50 text-amber-400 border border-amber-700/50; }
    .badge-silver  { @apply bg-gray-700/50 text-gray-300 border border-gray-500/50; }
    .badge-gold    { @apply bg-yellow-900/50 text-yellow-400 border border-yellow-600/50; }
    .badge-plat    { @apply bg-cyan-900/50 text-cyan-400 border border-cyan-600/50; }
    .badge-diamond { @apply bg-blue-900/50 text-blue-400 border border-blue-500/50; }
    .badge-master  { @apply bg-purple-900/50 text-purple-400 border border-purple-500/50; }
    .badge-legend  { @apply bg-gradient-to-r from-yellow-900/60 to-orange-900/60 text-yellow-300 border border-yellow-500/50; }

    /* ─── Table ─── */
    .table-dark th {
        @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider bg-surface-700/50;
    }
    .table-dark td {
        @apply px-4 py-3 text-sm text-gray-300 border-t border-white/5;
    }
    .table-dark tr:hover td {
        @apply bg-white/[0.02];
    }

    /* ─── Stat Card ─── */
    .stat-card {
        @apply card p-5 flex flex-col gap-1;
    }
    .stat-value {
        @apply text-2xl font-bold font-display text-white;
    }
    .stat-label {
        @apply text-xs text-gray-500 uppercase tracking-wider;
    }

    /* ─── Divider with glow ─── */
    .divider-glow {
        @apply h-px bg-gradient-to-r from-transparent via-brand-500/50 to-transparent;
    }

    /* ─── Skeleton loader ─── */
    .skeleton {
        @apply bg-gradient-to-r from-surface-700 via-surface-600 to-surface-700 bg-[length:200%_100%] animate-shimmer rounded-lg;
    }

    /* ─── Scrollbar ─── */
    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: rgba(99,102,241,0.3) transparent;
    }
    .scrollbar-thin::-webkit-scrollbar { width: 4px; }
    .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
    .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 999px; }
}

@layer utilities {
    .text-gradient {
        @apply bg-gradient-to-r from-brand-400 to-accent-400 bg-clip-text text-transparent;
    }
    .text-gradient-gold {
        @apply bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent;
    }
    .bg-grid {
        background-image: linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
        background-size: 40px 40px;
    }
    .border-glow {
        @apply border border-brand-500/40 shadow-glow-sm;
    }
}