/**
 * TropicZen Island Vitality — Design Tokens (tropiczen-workspace-i5e)
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap");

:root {
	/* Calm organic coastal palette */
	--tz-bg: #F7F7F7;
	--tz-sand: #EFE6D2;
	--tz-warm-sand: #E4D3B2;
	--tz-palm: #2F4A2C;
	--tz-hemp: #6F8F5B;
	--tz-sage: #9CAF88;
	--tz-seafoam: #DDECE4;
	--tz-coconut: #FFFDF7;
	--tz-driftwood: #8A7A63;
	--tz-charcoal-green: #182418;
	--tz-muted-green: #5F6F5A;
	--tz-sun-soft: #F4C95D;
	--tz-sunset-soft: #E8924A;

	--tz-gradient-organic: linear-gradient(135deg, #F7F7F7 0%, #EFE6D2 48%, #DDECE4 100%);
	--tz-gradient-footer: linear-gradient(135deg, #2F4A2C 0%, #3F5E3A 55%, #6F8F5B 100%);
	--tz-gradient-soft-sand: linear-gradient(135deg, #FFFDF7 0%, #EFE6D2 100%);
	--tz-gradient-soft-green: linear-gradient(135deg, #DDECE4 0%, #9CAF88 100%);
	--tz-gradient-gold: linear-gradient(135deg, #F4C95D 0%, #F8DB8A 100%);

	/* Mapped tokens — keep existing class names working */
	--tz-palm-black-green: var(--tz-charcoal-green);
	--tz-deep-forest: var(--tz-palm);
	--tz-tropic-green: var(--tz-palm);
	--tz-leaf-green: var(--tz-hemp);
	--tz-fresh-lime: var(--tz-sage);
	--tz-sunset-red: var(--tz-sunset-soft);
	--tz-sunset-orange: var(--tz-sunset-soft);
	--tz-sun-gold: var(--tz-sun-soft);
	--tz-warm-yellow: #F8DB8A;
	--tz-white: var(--tz-coconut);
	--tz-soft-white: var(--tz-coconut);
	--tz-stone: var(--tz-warm-sand);
	--tz-muted: var(--tz-muted-green);
	--tz-text: var(--tz-charcoal-green);
	--tz-heading: var(--tz-palm);
	--tz-gold-line: var(--tz-sun-soft);
	--tz-shadow-green: rgba(24, 36, 24, 0.12);
	--tz-card-shadow: 0 14px 36px rgba(24, 36, 24, 0.08);

	--tz-gradient-sunset: linear-gradient(135deg, #E8924A 0%, #F4C95D 78%, #F8DB8A 100%);
	--tz-gradient-green: var(--tz-gradient-soft-green);
	--tz-gradient-island: var(--tz-gradient-soft-green);

	/* Legacy aliases — map old token names to Island Vitality */
	--tz-deep-teal: var(--tz-deep-forest);
	--tz-ocean-teal: var(--tz-tropic-green);
	--tz-aqua: var(--tz-fresh-lime);
	--tz-sun-gold-hover: #E7BD35;
	--tz-palm-green: var(--tz-leaf-green);
	--tz-warm-white: var(--tz-soft-white);
	--tz-dark-slate: var(--tz-palm-black-green);
	--tz-deep-ocean: var(--tz-deep-forest);
	--tz-ocean: var(--tz-tropic-green);
	--tz-soft-bg: var(--tz-bg);
	--tz-light-gray: var(--tz-bg);
	--tz-gradient-ocean: var(--tz-gradient-green);
	--tz-gradient-teal-green: var(--tz-gradient-island);
	--tz-gradient-newsletter: var(--tz-gradient-soft-sand);

	/* Typography */
	--tz-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--tz-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--tz-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tz-font-button: "Inter", system-ui, sans-serif;

	--tz-text-display: clamp(3rem, 6vw, 4.5rem);
	--tz-text-hero: clamp(2.25rem, 5vw, 3.75rem);
	--tz-text-h1: clamp(2rem, 4vw, 2.75rem);
	--tz-text-h2: clamp(1.5rem, 3vw, 2rem);
	--tz-text-h3: clamp(1.25rem, 2.5vw, 1.5rem);
	--tz-text-body-lg: 1.125rem;
	--tz-text-body: 1rem;
	--tz-text-small: 0.875rem;
	--tz-text-caption: 0.75rem;

	/* Spacing */
	--tz-space-xs: 0.5rem;
	--tz-space-sm: 1rem;
	--tz-space-md: 1.5rem;
	--tz-space-lg: 2.5rem;
	--tz-space-xl: 4rem;
	--tz-space-2xl: 6rem;
	--tz-section-y: clamp(3.5rem, 8vw, 6rem);
	--tz-container: min(1500px, 94vw);
	--tz-blog-width: min(760px, 92vw);

	/* Components */
	--tz-radius: 22px;
	--tz-radius-sm: 12px;
	--tz-radius-pill: 999px;
	--tz-shadow-soft: 0 4px 24px rgba(7, 22, 11, 0.08);
	--tz-shadow-card: var(--tz-card-shadow);
	--tz-shadow-hover: 0 24px 55px rgba(7, 22, 11, 0.16);
	--tz-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* Bootstrap overrides — calm organic greens */
	--bs-primary: #2F4A2C;
	--bs-primary-rgb: 47, 74, 44;
	--bs-link-color: #2F4A2C;
	--bs-link-hover-color: #6F8F5B;
}

html {
	background: var(--tz-bg);
}

body {
	font-family: var(--tz-font-body);
	color: var(--tz-text);
	background: var(--tz-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .tz-display, .tz-hero__title {
	font-family: var(--tz-font-heading);
	font-weight: 600;
	line-height: 1.15;
	color: var(--tz-heading);
	letter-spacing: -0.02em;
}

.tz-display { font-size: var(--tz-text-display); }
.tz-hero__title { font-size: var(--tz-text-hero); color: var(--tz-white); }
h1, .tz-h1 { font-size: var(--tz-text-h1); }
h2, .tz-h2 { font-size: var(--tz-text-h2); }
h3, .tz-h3 { font-size: var(--tz-text-h3); }
.tz-body-lg { font-size: var(--tz-text-body-lg); line-height: 1.7; }
.tz-small { font-size: var(--tz-text-small); }
.tz-caption { font-size: var(--tz-text-caption); color: var(--tz-muted); }

a:not([class*="tz-button"]):not([class*="btn"]):not(.navbar-brand):not(.custom-logo-link) {
	color: var(--tz-tropic-green);
	transition: color var(--tz-transition);
}

a:not([class*="tz-button"]):not([class*="btn"]):not(.navbar-brand):not(.custom-logo-link):hover {
	color: var(--tz-leaf-green);
}

html,
body {
	overflow-x: clip;
}

.tz-container {
	width: 100%;
	max-width: var(--tz-container);
	margin-inline: auto;
	padding-inline: var(--tz-space-sm);
	box-sizing: border-box;
}

.tz-container--blog {
	width: var(--tz-blog-width);
	margin-inline: auto;
}

.tz-section {
	padding-block: var(--tz-section-y);
}

.tz-section--soft {
	background: var(--tz-soft-white);
}

.tz-section--sand {
	background: var(--tz-sand);
}

.tz-section__header {
	margin-bottom: var(--tz-space-lg);
	max-width: 42rem;
}

.tz-section__header h2 {
	margin: 0 0 var(--tz-space-xs);
}

.tz-section__header p {
	margin: 0;
	color: var(--tz-muted);
	font-size: var(--tz-text-body-lg);
}

.tz-prose {
	color: var(--tz-text);
	line-height: 1.75;
	max-width: var(--tz-blog-width);
}

.tz-prose h2 {
	margin-top: var(--tz-space-lg);
}

.tz-grid {
	display: grid;
	gap: var(--tz-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.tz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tz-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tz-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.tz-section a:not([class*="tz-button"]):not([class*="tz-card"]):not(.tz-text-link) {
	color: var(--tz-tropic-green);
	text-decoration: none;
	transition: color var(--tz-transition);
}

.tz-section a:not([class*="tz-button"]):not(.tz-text-link):hover {
	color: var(--tz-leaf-green);
}

.tz-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.tz-animate.is-visible {
	opacity: 1;
	transform: none;
}

.tz-animate--left { transform: translateX(-24px); }
.tz-animate--right { transform: translateX(24px); }
.tz-animate--scale { transform: scale(0.96); }

.tz-animate--left.is-visible,
.tz-animate--right.is-visible,
.tz-animate--scale.is-visible {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tz-animate,
	.tz-animate--left,
	.tz-animate--right,
	.tz-animate--scale {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}