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

@layer base {
	:root {
		--primary: #8b4513;
		--secondary: #d2691e;
		--text-main: #333333;
		--cream: #f7efe1;
		--admin-bg: #e8dece;
	}

	body {
		@apply m-0;
		font-family: 'Open Sans', sans-serif;
		color: var(--text-main);
		background: radial-gradient(circle at top right, #f4e3ce 0%, #f7efe1 35%, #f7efe1 100%);
	}

	h1, h2, h3, h4 {
		font-family: 'Playfair Display', serif;
	}
}

@layer components {
	.container-wide {
		@apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
	}

	.site-body {
		@apply min-h-screen;
	}

	.admin-body {
		background: linear-gradient(180deg, var(--admin-bg) 0%, #dacdb7 100%);
		@apply min-h-screen;
	}

	.site-header {
		background: rgba(247, 239, 225, 0.95);
		@apply sticky top-0 z-30 backdrop-blur border-b border-black/5;
	}

	.site-logo {
		@apply h-auto;
		width: 120px;
	}

	.nav-item {
		@apply transition-colors duration-200 hover:text-[color:var(--secondary)];
	}

	.btn-primary {
		background: var(--primary);
		color: #fff;
		@apply inline-flex items-center rounded-full px-5 py-2.5 text-sm font-semibold transition hover:opacity-90;
	}

	.btn-secondary {
		@apply inline-flex items-center rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-[color:var(--primary)] border border-[color:var(--primary)] transition hover:bg-[color:var(--cream)];
	}

	.btn-danger {
		@apply inline-flex items-center rounded-full bg-red-700 px-4 py-2 text-xs font-semibold text-white transition hover:bg-red-800;
	}

	.hero-wrap {
		@apply container-wide pt-10;
	}

	.hero-image {
		@apply relative overflow-hidden rounded-[2rem] min-h-[340px] md:min-h-[420px] shadow-2xl;
		background-image: linear-gradient(120deg, rgba(26, 10, 5, 0.65), rgba(85, 33, 8, 0.35)), url('/images/hero-cave.svg');
		background-size: cover;
		background-position: center;
	}

	.hero-overlay-card {
		@apply absolute left-1/2 top-1/2 w-[92%] max-w-2xl -translate-x-1/2 -translate-y-1/2 bg-[#f9ead8de] p-7 md:p-10 text-center rounded-2xl border border-white/40 shadow-xl;
	}

	.hero-title {
		@apply text-4xl md:text-5xl text-[color:var(--primary)] leading-tight;
	}

	.hero-subtitle {
		@apply mt-3 mb-6 text-sm md:text-base text-[color:var(--text-main)];
	}

	.section-title {
		@apply text-4xl text-[color:var(--text-main)];
	}

	.activity-card {
		@apply rounded-3xl overflow-hidden bg-white shadow-lg border border-black/5 transition-transform duration-300 hover:-translate-y-1;
	}

	.site-footer {
		background: linear-gradient(90deg, #7a3c11 0%, #8b4513 50%, #5e2f12 100%);
	}

	.social-icon {
		@apply h-9 w-9 inline-flex items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition;
	}

	.social-icon svg {
		@apply h-5 w-5;
	}

	.admin-stat {
		@apply rounded-2xl bg-white p-6 shadow-lg border border-black/5;
	}

	.admin-stat p {
		@apply text-sm text-neutral-600;
	}

	.admin-stat strong {
		@apply text-3xl font-title text-[color:var(--primary)];
	}

	.form-label {
		@apply mb-1 block text-sm font-semibold text-neutral-700;
	}

	.form-input {
		@apply w-full rounded-xl border border-black/15 bg-white px-3 py-2 text-sm text-neutral-900 outline-none focus:border-[color:var(--secondary)] focus:ring-2 focus:ring-orange-300;
	}

	.font-title {
		font-family: 'Playfair Display', serif;
	}
}