/*
 * Millennia Village — Design Tokens
 *
 * Single source of truth for colours, typography, spacing, layout.
 * Every other stylesheet references these variables.
 *
 * Edit values here, not in component CSS.
 */

:root {
	/* ─────────────────────────────────────────────────────────────
	   HUB COLOURS — three product hubs, each with a path colour
	   plus a bar companion (warmer/lighter variant used on bars
	   and dark-bg accents)
	   ───────────────────────────────────────────────────────────── */
	--hub-shortstays: #A48930;          /* Wood Grains gold */
	--hub-shortstays-bar: #B87A3D;      /* warm gold companion */
	--hub-events: #5D002C;              /* Red Merlot */
	--hub-events-bar: #8B1940;          /* pink merlot companion */
	--hub-events-pink: #E8B8C8;         /* Events cross-promo (passes contrast) */
	--hub-residency: #3B6D11;           /* Forest */
	--hub-residency-bar: #639922;       /* bright forest companion */

	/* ─────────────────────────────────────────────────────────────
	   INTENT-CARD COLOURS — Variant B palette
	   ───────────────────────────────────────────────────────────── */
	--intent-move: #C0DD97;             /* Bamboo — Move well */
	--intent-slow: #A8D5E3;              /* Blue Breeze — Slow down */
	--intent-repair: #9FE1CB;            /* Serene Green — Repair */
	--intent-family: #F5C9A1;            /* Sweet Peach — Family */
	--intent-explore: #9787C7;           /* Morning Glory — Explore */

	/* ─────────────────────────────────────────────────────────────
	   BRAND SURFACES — dark green family for footer, Mylo, overlays
	   ───────────────────────────────────────────────────────────── */
	--surface-forest: #1B3A2D;      /* primary dark surface (footer, Mylo) */
	--surface-mid: #2D5C45;         /* mid green */
	--surface-sage: #3A6B52;        /* sage green */
	--surface-deep: #12271D;        /* deepest brand green */
	--surface-cream: #F5F0E8;       /* warm cream */

	/* Text on dark surfaces */
	--on-dark-h: #FFFFFF;
	--on-dark-body: #C8D8C0;        /* soft sage-tinted body text */
	--on-dark-stay: #9FE1CB;        /* Short Stays accent on dark */
	--on-dark-host: #E8B8C8;        /* Events accent on dark */
	--on-dark-live: #C0DD97;        /* Residency accent on dark */

	/* Text on light surfaces */
	--on-light-h: #1B3A2D;
	--on-light-body: #3A5947;

	/* Text on cream surfaces */
	--on-cream-label: #5C3E15;      /* dark gold — small labels on cream */

	/* ─────────────────────────────────────────────────────────────
	   NEUTRALS
	   ───────────────────────────────────────────────────────────── */
	--white: #FFFFFF;
	--off-white: #FAF8F4;
	--ink: #1A1A1A;
	--body: #333333;
	--mute: #666666;
	--line: #E5E5E5;

	/* ─────────────────────────────────────────────────────────────
	   TYPOGRAPHY
	   ───────────────────────────────────────────────────────────── */
	--font-heading: "CooperBT", "Corben", Georgia, serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--size-h1: clamp(2.5rem, 5vw, 4rem);
	--size-h2: clamp(2rem, 4vw, 3rem);
	--size-h3: clamp(1.5rem, 3vw, 2.25rem);
	--size-h4: 1.5rem;
	--size-body: 1rem;
	--size-small: 0.875rem;

	--line-heading: 1.2;
	--line-body: 1.6;

	--nav-height-desktop: 80px;
	--nav-height-mobile: 64px;

	/* ─────────────────────────────────────────────────────────────
	   SPACING — section padding, grid gaps, card padding
	   ───────────────────────────────────────────────────────────── */
	--section-pad-y: 96px;
	--section-pad-y-tight: 80px;
	--section-pad-y-hero: 100px;
	--section-pad-y-hero-bottom: 80px;
	--section-pad-x: 64px;

	--section-pad-y-tablet: 64px;
	--section-pad-x-tablet: 24px;

	--section-pad-y-mobile: 48px;
	--section-pad-x-mobile: 20px;

	--newsletter-pad-y: 48px;
	--newsletter-pad-x: 64px;

	--card-gap: 24px;
	--card-gap-tight: 2px;
	--card-pad-testi: 24px;
	--card-pad-unit: 28px;
	--card-pad-feature: 32px;

	/* ─────────────────────────────────────────────────────────────
	   LAYOUT
	   ───────────────────────────────────────────────────────────── */
	--max-width: 1152px;
	--touch-min: 44px;
}