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

@layer base {
    html { scroll-behavior: smooth; }
    body {
        @apply bg-slate-50 text-slate-700 antialiased dark:bg-slate-950 dark:text-slate-300;
        font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }
    [x-cloak] { display: none !important; }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
}

/* Fixed layered background: blue + amber glows over a dotted grid */
.site-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(640px circle at 12% 8%, rgba(59, 130, 246, .20), transparent 60%),
        radial-gradient(520px circle at 88% 16%, rgba(245, 158, 11, .17), transparent 60%),
        radial-gradient(760px circle at 55% 105%, rgba(59, 130, 246, .14), transparent 60%),
        radial-gradient(rgba(100, 116, 139, .30) 1px, transparent 1.3px);
    background-size: auto, auto, auto, 24px 24px;
}
.dark .site-bg {
    background-image:
        radial-gradient(640px circle at 12% 8%, rgba(59, 130, 246, .26), transparent 60%),
        radial-gradient(520px circle at 88% 16%, rgba(245, 158, 11, .18), transparent 60%),
        radial-gradient(760px circle at 55% 105%, rgba(59, 130, 246, .20), transparent 60%),
        radial-gradient(rgba(148, 163, 184, .17) 1px, transparent 1.3px);
}

@layer components {
    .card { @apply rounded-2xl border border-slate-200/80 bg-white/70 shadow-sm shadow-slate-900/5 backdrop-blur dark:border-slate-800 dark:bg-slate-900/60; }
    .card-hover { @apply transition duration-200 hover:-translate-y-1 hover:border-blue-300 hover:shadow-lg dark:hover:border-blue-500/50; }

    .btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950; }
    .btn-primary { @apply bg-blue-600 text-white shadow shadow-blue-600/30 hover:bg-blue-500; }
    .btn-accent { @apply bg-amber-500 text-slate-900 shadow shadow-amber-500/30 hover:bg-amber-400; }
    .btn-ghost { @apply border border-slate-300 bg-white/50 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-transparent dark:text-slate-200 dark:hover:bg-slate-800; }
    .btn-danger { @apply bg-red-600 text-white hover:bg-red-500; }
    .btn-sm { @apply px-3 py-1.5 text-xs; }

    .input { @apply w-full rounded-xl border-slate-300 bg-white/80 text-sm text-slate-900 placeholder-slate-400 focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-100; }
    .label { @apply mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300; }

    .badge { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold; }
    .text-gradient { @apply bg-gradient-to-r from-blue-600 via-blue-500 to-amber-500 bg-clip-text text-transparent; }
    .section { @apply mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8; }
}


/* Rich text (event descriptions written in the dashboard editor) */
@layer components {
    .rich { @apply leading-relaxed text-slate-700 dark:text-slate-300; }
    .rich > * + * { @apply mt-4; }
    .rich h2 { @apply text-2xl font-bold text-slate-900 dark:text-white; }
    .rich h3 { @apply text-xl font-bold text-slate-900 dark:text-white; }
    .rich h4 { @apply text-lg font-semibold text-slate-900 dark:text-white; }
    .rich ul { @apply list-disc pl-6; }
    .rich ol { @apply list-decimal pl-6; }
    .rich li + li { @apply mt-1; }
    .rich blockquote { @apply border-l-4 border-amber-400 pl-4 italic text-slate-600 dark:text-slate-400; }
    .rich a { @apply text-blue-600 underline hover:text-blue-500 dark:text-blue-400; }
    .rich pre { @apply overflow-x-auto rounded-xl bg-slate-900 p-4 font-mono text-sm text-slate-100; }
    .rich .ql-align-center { text-align: center; }
    .rich .ql-align-right { text-align: right; }
    .rich .ql-align-justify { text-align: justify; }
}
.ql-toolbar.ql-snow { border-radius: .75rem .75rem 0 0; border-color: rgb(203 213 225); }
.ql-container.ql-snow { border-radius: 0 0 .75rem .75rem; border-color: rgb(203 213 225); font-size: .95rem; }

.rich { overflow-wrap: anywhere; word-break: break-word; }
.rich pre { white-space: pre-wrap; }