/* ==========================================================================
   Design Tokens — single source of truth for all colors, type, spacing.
   Never hardcode hex/font/space values outside this file.
   ========================================================================== */

:root {
	/* === Color: Primary (deep slate-blue family) === */
	--color-primary:        #1c2d37;
	--color-primary-mid:    #2a4459;
	--color-primary-light:  #3a6080;
	--color-primary-muted:  #e8eef2;
	--color-primary-tint:   #f2f6f8;

	/* === Color: Accent (sage teal — coastal Carmel/Pebble Beach) === */
	--color-accent:        #619b8a;
	--color-accent-light:  #82b3a4;
	--color-accent-muted:  #dde8e4;
	--color-accent-dark:   #4a7e70;

	/* Gold — preserved for star ratings only (universally read as ★ color) */
	--color-gold-star:     #c9a84c;

	/* === Color: Neutrals === */
	--color-white:       #ffffff;
	--color-off-white:   #f8f9fa;
	--color-grey-light:  #e2e8ed;
	--color-grey-mid:    #5f7080;
	--color-grey-dark:   #2d3748;
	--color-black:       #0d1117;

	/* === Color: Semantic === */
	--color-success: #2d6a4f;
	--color-alert:   #c9622a;

	/* === Typography: Families ===
	   Display headlines: heavy geometric sans (Raleway 800/900) — modern coastal feel.
	   Headings: Raleway 600/700.
	   Body: Inter.
	   Accent: Cormorant Garamond italic for occasional flourish text. */
	--font-display: "Raleway", -apple-system, "Segoe UI", sans-serif;
	--font-heading: "Raleway", -apple-system, "Segoe UI", sans-serif;
	--font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-accent:  "Cormorant Garamond", Georgia, serif;

	/* === Typography: Scale === */
	--text-xs:   0.75rem;    /* 12 */
	--text-sm:   0.875rem;   /* 14 */
	--text-base: 1rem;       /* 16 */
	--text-lg:   1.125rem;   /* 18 */
	--text-xl:   1.25rem;    /* 20 */
	--text-2xl:  1.5rem;     /* 24 */
	--text-3xl:  1.875rem;   /* 30 */
	--text-4xl:  2.25rem;    /* 36 */
	--text-5xl:  3rem;       /* 48 */
	--text-6xl:  3.75rem;    /* 60 */
	--text-7xl:  4.5rem;     /* 72 */

	/* === Typography: Line Heights === */
	--lh-tight:   1.15;
	--lh-snug:    1.3;
	--lh-normal:  1.6;
	--lh-relaxed: 1.75;

	/* === Spacing Scale (rem) === */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* === Layout: Containers === */
	--container-max:   1280px;
	--container-wide:  1400px;
	--container-pad-x: clamp(1rem, 4vw, 3rem);

	/* === Breakpoints (read in JS via CSS env) === */
	--bp-sm:  480px;
	--bp-md:  768px;
	--bp-lg:  1024px;
	--bp-xl:  1280px;
	--bp-2xl: 1536px;

	/* === Effects === */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--shadow-sm:  0 2px 8px rgba(28, 45, 55, 0.06);
	--shadow-md:  0 8px 24px rgba(28, 45, 55, 0.10);
	--shadow-lg:  0 20px 60px rgba(28, 45, 55, 0.15);
	--shadow-xl:  0 30px 80px rgba(28, 45, 55, 0.22);

	/* Drop-shadow filters — for clip-path elements where box-shadow would
	   be cut off by the polygon. Apply as `filter: var(--drop-shadow-*)`. */
	--drop-shadow-sm: drop-shadow(0 2px 6px rgba(28, 45, 55, 0.08));
	--drop-shadow-md: drop-shadow(0 6px 16px rgba(28, 45, 55, 0.12));
	--drop-shadow-lg: drop-shadow(0 14px 32px rgba(28, 45, 55, 0.18));
	--drop-shadow-xl: drop-shadow(0 20px 48px rgba(28, 45, 55, 0.24));

	/* === Motion === */
	--ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
	--ease-elegant:    cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast:   180ms;
	--duration-base:   300ms;
	--duration-slow:   600ms;
	--duration-page:   900ms;

	/* === Z-Index Scale === */
	--z-base:    1;
	--z-elevated: 10;
	--z-sticky:   100;
	--z-overlay:  500;
	--z-modal:    1000;
	--z-tooltip:  2000;

	/* === Geometric Clip-Paths (reusable) === */
	--clip-card:        polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%);
	--clip-card-soft:   polygon(0 0, 97% 0, 100% 4%, 100% 100%, 0 100%);
	--clip-section-top: polygon(0 0, 100% 0, 100% 100%, 0 92%);
	--clip-section-btm: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
	--clip-hero-overlay: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}