@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views/**/*.blade.php';

@theme {
    --font-sans: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    --color-brand: #0b1f3a;
    --color-brand-light: #15365f;
    --color-pitch: #16a34a;
    --color-gold: #f5c542;
    --color-canvas: #f4f6f8;
    --color-ink: #111827;
}

@layer base {
    html { scroll-behavior: smooth; }
    body { @apply bg-canvas text-ink antialiased; }
    [x-cloak] { display: none !important; }
}

@layer components {
    .container-page { @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8; }
    .btn-primary { @apply inline-flex items-center justify-center rounded-xl bg-pitch px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-200 disabled:cursor-not-allowed disabled:opacity-50; }
    .btn-secondary { @apply inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-bold text-brand transition hover:border-brand hover:bg-slate-50; }
    .btn-gold { @apply inline-flex items-center justify-center rounded-xl bg-gold px-5 py-3 text-sm font-black text-brand transition hover:bg-yellow-300; }
    .card { @apply rounded-2xl border border-slate-200 bg-white shadow-sm; }
    .input { @apply w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm outline-none transition placeholder:text-slate-400 focus:border-pitch focus:ring-4 focus:ring-green-100; }
    .label { @apply mb-1.5 block text-sm font-bold text-slate-700; }
    .badge { @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-bold; }
    .section-title { @apply text-2xl font-black tracking-tight text-brand sm:text-3xl; }
    .stadium-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 36px 36px; }
}