@import "tailwindcss";

/* Add any custom CSS below */

:root {
	--color-forest: #0e3b2d;
	--color-emerald: #1eb980;
	--color-clay: #c96f2b;
	--color-ivory: #f7f3ed;
	--color-charcoal: #262626;
	--color-sun: #ffb400;
	--shadow-soft: 0 18px 45px rgba(14, 59, 45, 0.18);
}

@layer base {
	:root {
		color-scheme: light;
	}

	body {
		background-color: var(--color-ivory);
		color: var(--color-charcoal);
	}

	:focus-visible {
		outline: 2px solid #facc15;
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

@layer utilities {
	.bg-emerald-wash {
		background-image: radial-gradient(circle at 0% 0%, rgba(30, 185, 128, 0.32) 0, transparent 52%),
			radial-gradient(circle at 100% 15%, rgba(255, 180, 0, 0.18) 0, transparent 55%),
			linear-gradient(125deg, rgba(247, 243, 237, 0.92), rgba(224, 248, 239, 0.88));
	}

	.bg-forest-wash {
		background-image: radial-gradient(circle at 14% 20%, rgba(14, 59, 45, 0.78) 0, rgba(14, 59, 45, 0.58) 46%, rgba(14, 59, 45, 0.32) 70%),
			linear-gradient(160deg, rgba(9, 37, 28, 0.94), rgba(14, 59, 45, 0.78));
	}

	.bg-clay-wash {
		background-image: radial-gradient(circle at 0% 0%, rgba(201, 111, 43, 0.28) 0, transparent 45%),
			linear-gradient(140deg, rgba(255, 245, 232, 0.96), rgba(255, 232, 214, 0.85));
	}

	.bg-store-wash {
		background-image: radial-gradient(circle at 0% 0%, rgba(30, 185, 128, 0.28) 0, transparent 55%),
			linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(231, 246, 239, 0.9));
	}

	.bg-ivory-panel {
		background-image: linear-gradient(155deg, rgba(247, 243, 237, 0.97), rgba(231, 244, 236, 0.9));
	}

	.bg-partner-wash {
		background-image: radial-gradient(circle at 0% 0%, rgba(30, 185, 128, 0.2) 0, transparent 45%),
			linear-gradient(140deg, rgba(247, 243, 237, 0.96), rgba(226, 239, 233, 0.88));
	}

	.bg-hero-gradient {
		background-image: radial-gradient(circle at 10% 20%, rgba(30, 185, 128, 0.35) 0, transparent 55%),
			radial-gradient(circle at 80% 10%, rgba(255, 180, 0, 0.38) 0, transparent 45%),
			linear-gradient(135deg, rgba(14, 59, 45, 0.95), rgba(14, 59, 45, 0.8));
	}

	.bg-grid-pattern {
		background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
		background-size: 48px 48px;
		background-position: center;
	}

	.grain-overlay {
		position: relative;
		overflow: hidden;
	}

	.grain-overlay::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
		pointer-events: none;
		mix-blend-mode: overlay;
	}

	.angled-card {
		clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
	}

	.angled-card-bottom {
		clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 100%, 0 100%);
	}

	.shadow-lift {
		box-shadow: var(--shadow-soft);
	}

	@media (max-width: 768px) {
		.responsive-table-scope table:not(.no-mobile-stack) {
			display: block;
			width: 100%;
			min-width: 0;
		}

		.responsive-table-scope table:not(.no-mobile-stack) thead {
			display: none;
		}

		.responsive-table-scope table:not(.no-mobile-stack) tbody {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
		}

		.responsive-table-scope table:not(.no-mobile-stack) tr {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
			padding: 0.75rem;
			background-color: #ffffff;
			border: 1px solid #e5e7eb;
			border-radius: 0.75rem;
		}

		.responsive-table-scope table:not(.no-mobile-stack) td {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 0.75rem;
			padding: 0.35rem 0;
			border-bottom: 1px solid #f3f4f6;
			white-space: normal;
		}

		.responsive-table-scope table:not(.no-mobile-stack) td:last-child {
			border-bottom: 0;
		}

		.responsive-table-scope table:not(.no-mobile-stack) td::before {
			content: attr(data-label);
			font-size: 0.75rem;
			font-weight: 700;
			line-height: 1.25;
			text-transform: uppercase;
			letter-spacing: 0.03em;
			color: #6b7280;
			flex: 0 0 7rem;
		}

		.responsive-table-scope table:not(.no-mobile-stack) td > * {
			max-width: 100%;
		}
	}
}