/**
 * Lodge Lakes — canonical design tokens (v5.4)
 * Loaded before main.css; downstream files should reference these variables.
 */

:root {
	/* Colour */
	--color-forest: #0d2a22;
	--color-forest-mid: #1a4338;
	--color-forest-light: #5c6f5a;
	--color-olive: #5c6f5a;
	--color-cream: #e9eee9;
	--color-cream-warm: #dde4dd;
	--color-stone: #cfd7cf;
	--color-stone-dark: #8a9588;
	--color-charcoal: #141a17;
	--color-charcoal-soft: #3d4741;
	--color-charcoal-muted: #5b655f; /* AA on white (5.7:1) and cream (5.0:1) — muted label hierarchy retained */
	--color-bronze: #9a8554;
	--color-bronze-light: #b8a574;
	--color-bronze-dark: #8a7340;
	--color-white: #f7faf7;
	--color-wood: #2c241c;
	--color-green-deep: #081c17;
	--color-line-gold: rgba(180, 154, 92, 0.45);

	--color-status-available: #3d6b4f;
	--color-status-limited: #9a8554;
	--color-status-held: #7a6a4a;
	--color-status-booked: #7a4545;
	--color-status-unconfirmed: #8a7340;

	/* Typography */
	--font-display: "Fraunces", "Georgia", "Times New Roman", serif;
	--font-body: "Figtree", system-ui, -apple-system, sans-serif;
	--line-body: 1.75;
	--line-heading: 1.15;

	/* Spacing */
	--space-2xs: 0.375rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4.5rem;
	--space-4xl: 7rem;
	--space-5xl: 9rem;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 20px;

	/* Shadows */
	--shadow-soft: 0 2px 24px rgba(15, 51, 40, 0.06);
	--shadow-lift: 0 12px 48px rgba(15, 51, 40, 0.1);

	/* Layout */
	--header-height: 88px;
	--header-height-scrolled: 72px;
	--sticky-cta-height: 60px;
	--container-max: 1280px;
	--container-narrow: 680px;
	--container-read: 720px;
	--container-wide: 1440px;

	/* Motion */
	--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-micro: 180ms;
	--duration-ui: 280ms;
	--duration-reveal: 520ms;
	--transition: var(--duration-ui) cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-index */
	--z-header: 100;
	--z-sticky-cta: 90;
	--z-lightbox: 200;
	--z-nav-mobile: 110;

	/* Breakpoints (reference — use in media queries) */
	/* 768px tablet, 960px small desktop, 1180px nav breakpoint */
}

@media (max-width: 1179px) {
	:root {
		--header-height: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-micro: 0ms;
		--duration-ui: 0ms;
		--duration-reveal: 0ms;
		--transition: none;
	}
}