:root {
	/* ========================================
		COLOR PALETTE
	======================================== */
	
	/* Neutral */
	--color-white: #ffffff;
	--color-cream-100: #f9f3e6;
	--color-cream-200: #f9f3e6b3;

	--color-black: #000000;

	--color-neutral-700: #2e2e2e;
	--color-neutral-600: #4e4e4e;
	--color-neutral-500: #4c5663;
	--color-neutral-300: #cbcbcb;
	--color-neutral-200: #dcdcdc;
	--color-neutral-100: #f4f4f4;
	--color-neutral-50: #eff4f5;

	/* Brand */
	--color-teal-500: #62929d;
	--color-teal-700: #365056;

	--color-gold-500: #d3a54d;
	--color-gold-600: #c29e61;

	--color-sand-100: #f1e3c8;

	/* ========================================
		SEMANTIC COLORS
	======================================== */

	/* Brand */
	--color-primary: var(--color-gold-500);
	--color-secondary: var(--color-teal-500);
	--color-secondary-dark: var(--color-teal-700);

	/* Text */
	--color-text-primary: var(--color-neutral-700);
	--color-text-secondary: var(--color-neutral-600);
	--color-text-muted: var(--color-neutral-500);
	--color-text-inverse: var(--color-white);

	/* Backgrounds */
	--color-bg-primary: var(--color-sand-100);
	--color-bg-secondary: var(--color-teal-700);

	--color-bg-white: var(--color-white);
	--color-bg-black: var(--color-black);

	--color-bg-muted: var(--color-neutral-100);
	--color-bg-subtle: var(--color-neutral-200);
	--color-bg-header: var(--color-neutral-50);

	--color-border-card: var(--color-neutral-300);

	--font-body: "Inter", Arial, sans-serif;
	--font-display: "Cormorant Garamond", Georgia, serif;
	--container: 1440px;
	--space-xs: 0.5rem;
	--space-sm: 0.875rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-section: clamp(1.5rem, 7vw, 3rem);
	--radius: 16px;
	--shadow-card: 0 10px 30px rgba(38, 50, 56, 0.08);
}