/* Coastal Modernism design tokens — derived from DESIGN.md */
:root {
	/* Surfaces */
	--surface: #f8fafb;
	--surface-dim: #d8dadb;
	--surface-bright: #f8fafb;
	--surface-container-lowest: #ffffff;
	--surface-container-low: #f2f4f5;
	--surface-container: #eceeef;
	--surface-container-high: #e6e8e9;
	--surface-container-highest: #e1e3e4;
	--surface-variant: #e1e3e4;

	/* Ink */
	--on-surface: #191c1d;
	--on-surface-variant: #3c4947;
	--inverse-surface: #2e3132;
	--inverse-on-surface: #eff1f2;
	--outline: #6c7a78;
	--outline-variant: #bbc9c7;

	/* Primary (turquoise) */
	--primary: #006a64;
	--primary-2: #00a89e;
	--on-primary: #ffffff;
	--primary-container: #00a89e;
	--on-primary-container: #003531;
	--inverse-primary: #59dacf;

	/* Secondary (coral) */
	--secondary: #a43c12;
	--secondary-2: #fe7e4f;
	--on-secondary: #ffffff;
	--secondary-container: #fe7e4f;
	--on-secondary-container: #6b1f00;

	/* Tertiary */
	--tertiary: #516169;
	--on-tertiary: #ffffff;

	/* Status */
	--error: #ba1a1a;
	--on-error: #ffffff;
	--error-container: #ffdad6;

	/* Brand accents (configurable via Customizer → Color Scheme) */
	--accent: #00C2D1;
	--highlight: #FFC400;
	--success: #2E8B57;
	--header-bg: #ffffff;
	--footer-bg: #f4e3c1;

	/* Background */
	--background: #f8fafb;
	--on-background: #191c1d;

	/* Typography */
	--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fs-display: 48px; --lh-display: 56px; --ls-display: -0.02em;
	--fs-headline-lg: 32px; --lh-headline-lg: 40px; --ls-headline-lg: -0.01em;
	--fs-headline-md: 24px; --lh-headline-md: 32px;
	--fs-body-lg: 18px; --lh-body-lg: 28px;
	--fs-body-md: 16px; --lh-body-md: 24px;
	--fs-label-md: 14px; --lh-label-md: 20px; --ls-label-md: 0.01em;
	--fs-label-sm: 12px; --lh-label-sm: 16px;

	/* Radii */
	--radius-sm: 0.25rem;
	--radius: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-full: 9999px;

	/* Spacing scale (4px base) */
	--sp-xs: 4px;
	--sp-sm: 8px;
	--sp-md: 16px;
	--sp-lg: 24px;
	--sp-xl: 40px;
	--sp-xxl: 64px;
	--gutter: 24px;
	--margin-mobile: 16px;
	--margin-desktop: 48px;

	/* Layout */
	--content-max: 1280px;

	/* Elevation — soft ambient shadows (primary-tinted) */
	--shadow-sm: 0 1px 2px rgba(0, 40, 40, 0.06);
	--shadow: 0 6px 20px rgba(0, 40, 40, 0.08);
	--shadow-lg: 0 16px 40px rgba(0, 40, 40, 0.10);
}