/* === BASE === */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: #121212;
    color: #f4f4f5;
}

/* === BUTTONS === */
.btn {
    @apply inline-flex items-center justify-center gap-2 font-semibold text-base transition duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 shadow-md rounded-full px-6 py-3 sm:px-8 sm:py-4;
    min-width: 14rem;
}

.btn-primary {
    @apply bg-orange-500 text-white hover:bg-orange-600;
}

.btn-secondary {
    @apply bg-indigo-500 text-white hover:bg-indigo-600;
}

.btn-primary:hover {
    background: linear-gradient(to right, #ea580c, #c2410c);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.4);
}

.btn-secondary:hover {
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* === BADGES === */
.badge {
    @apply text-xs font-semibold px-3 py-1.5 rounded-full uppercase tracking-widest;
}

.badge-live {
    @apply bg-green-500 text-white;
}

.badge-draft {
    @apply bg-yellow-400 text-black;
}

.badge-inactive {
    @apply bg-red-600 text-white;
}

/* === CARD === */
.card {
    @apply p-6 rounded-xl border transition;
    background-color: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
    }

.card-title {
    @apply text-white text-xl font-bold mb-2 flex items-center gap-2;
}

.card-subtitle {
    @apply text-gray-300 text-sm;
}

/* === EVENT CARD === */
.card-event {
    @apply bg-zinc-800 border border-zinc-700 rounded-2xl px-6 py-6 shadow-lg hover:shadow-xl transition;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .card-event:hover {
        border-color: #ea580c;
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3);
    }

    .card-event .text-base {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .card-event .text-sm {
        font-size: 0.95rem;
        color: #d4d4d8;
    }

/* === TABLE === */
.table {
    @apply w-full text-sm bg-zinc-800 border border-zinc-700 rounded-xl overflow-hidden;
}

    .table thead {
        @apply bg-zinc-900 text-white text-left uppercase text-xs tracking-wider;
    }

    .table th,
    .table td {
        @apply px-5 py-3;
    }

    .table tbody tr {
        @apply hover:bg-zinc-700 border-b border-zinc-700;
    }

/* === HERO === */
.hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-size: 3.25rem;
}

.hero-subtitle {
    font-size: 1.25rem;
}

.hero a {
    @apply btn btn-ghost text-lg;
}

/* === UTILITIES === */
.shadow-hover {
    @apply hover:shadow-xl transition-shadow duration-300;
}

/* === SPACING & SECTIONS === */
.section {
    @apply max-w-5xl mx-auto py-16 px-6 space-y-16;
}

.section-title {
    @apply text-5xl font-extrabold tracking-tight text-orange-500 leading-tight;
}

.section-subtitle {
    @apply text-lg sm:text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto;
}

/* === INFO CARDS === */
.info-card {
    @apply bg-zinc-800 text-white px-6 py-6 rounded-2xl shadow-md transition hover:shadow-lg border border-zinc-700;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    gap: 1rem;
    line-height: 1.65;
    min-height: 190px;
}

    .info-card h3 {
        @apply text-lg font-bold flex items-center gap-2 text-white;
    }

    .info-card p {
        @apply text-gray-400 text-sm leading-relaxed;
        font-size: 1.125rem;
    }

/* === CTA === */
.cta-buttons {
    @apply flex flex-col sm:flex-row justify-center items-center gap-6 mt-14;
}