/* ─────────────────────────────────────────────────────────────────────────
 * EventSnap component layer — the shared, "define-once" building blocks.
 *
 * Colours/type/spacing tokens live in `tailwind-theme.css`; this file turns the
 * *recurring UI patterns* (buttons, inputs, cards, badges, chips, sheets) into
 * named classes so every page consumes the same look. Change a button here and
 * it changes everywhere.
 *
 * These live in the `components` layer, which Tailwind emits BEFORE `utilities`
 * — so a one-off inline utility (e.g. `rounded-lg`, `w-full`) on an element
 * still overrides the component class. Reach for a component class first; drop
 * to inline utilities only for genuinely one-off tweaks.
 * ───────────────────────────────────────────────────────────────────────── */

@layer components {
	/* ── Buttons ──────────────────────────────────────────────────────────
	 * Base + intent modifier (+ optional size). e.g. `class="btn btn-primary"`,
	 * `class="btn btn-secondary btn-sm"`, `class="btn btn-primary btn-block"`. */
	.btn {
		@apply inline-flex select-none items-center justify-center gap-2 rounded-xl border border-transparent px-4 py-3 text-sm font-semibold transition;
		@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40;
		@apply active:scale-[0.99] disabled:cursor-not-allowed;
	}
	.btn-lg {
		@apply px-5 py-3.5 text-base;
	}
	.btn-sm {
		@apply rounded-lg px-3 py-2;
	}
	.btn-block {
		@apply w-full;
	}

	/* Primary = muted champagne fill + gold border + gold text (an elegant,
	 * outlined "signal" rather than an aggressive solid gold block). */
	.btn-primary {
		@apply border-primary-400 bg-primary-100 text-primary-800 shadow-sm hover:border-primary-500 hover:bg-primary-200;
		@apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:shadow-none;
		@apply dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200 dark:hover:border-primary-500 dark:hover:bg-primary-900/40;
	}
	.btn-secondary {
		@apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50;
		@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
	}
	.btn-ghost {
		@apply text-gray-600 hover:bg-gray-100 hover:text-gray-900 disabled:opacity-50;
		@apply dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100;
	}
	.btn-danger {
		@apply bg-red-600 text-white shadow-sm hover:bg-red-700 disabled:opacity-50;
		@apply dark:bg-red-600 dark:hover:bg-red-500;
	}

	/* ── Form inputs ──────────────────────────────────────────────────────
	 * Covers text/number inputs and textareas. */
	.input {
		@apply w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-gray-900 placeholder-gray-400 transition;
		@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25;
		@apply dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500;
	}

	/* ── Surfaces ─────────────────────────────────────────────────────────
	 * `card`  — the standard raised surface (page → card → surface-muted is the
	 *           three-level elevation ramp).
	 * `surface-muted` — a nested/inset panel inside a card. */
	.card {
		@apply rounded-2xl border border-gray-200/70 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900;
	}
	.surface-muted {
		@apply rounded-xl bg-gray-50 dark:bg-gray-800/60;
	}

	/* ── Badges (status / role pills) ─────────────────────────────────────
	 * `class="badge badge-gold"` etc. A leading dot is optional in markup. */
	.badge {
		@apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold;
	}
	.badge-primary {
		@apply bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200;
	}
	.badge-gold {
		@apply bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200;
	}
	.badge-gray {
		@apply bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300;
	}
	.badge-success {
		@apply bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300;
	}
	.badge-danger {
		@apply bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300;
	}

	/* ── Chips (filter / toggle) ──────────────────────────────────────────
	 * `class="chip chip-active"` / `class="chip chip-inactive"`. */
	.chip {
		@apply rounded-full border border-transparent px-4 py-2 text-sm font-medium transition;
	}
	.chip-inactive {
		@apply bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700;
	}
	/* Active = gold outline + soft champagne fill (matches .btn-primary). */
	.chip-active {
		@apply border-primary-400 bg-primary-100 text-primary-800 dark:border-primary-500/50 dark:bg-primary-950/40 dark:text-primary-200;
	}

	/* ── Bottom-sheet surface ─────────────────────────────────────────────
	 * The rounded top panel shared by upload / context / confirm sheets. */
	.sheet {
		@apply rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl;
	}

	/* ── Page scaffold + section heading ──────────────────────────────────*/
	.page {
		@apply min-h-screen bg-gray-50 dark:bg-gray-950;
	}
	.section-title {
		@apply font-display text-lg font-semibold text-gray-900 dark:text-gray-100;
	}
}
