/* Island Life Jeeps — design tokens (navy / sky blue, Roboto body) */
:root {
	/* Surfaces */
	--surface: #ffffff;
	--surface-dim: #e4e7eb;
	--surface-bright: #ffffff;
	--surface-container-lowest: #ffffff;
	--surface-container-low: #f5f7fa;
	--surface-container: #efefef;
	--surface-container-high: #e6e9ed;
	--surface-container-highest: #dfe3e8;
	--surface-variant: #e6e9ed;

	/* Ink */
	--on-surface: #333333;
	--on-surface-variant: #54595f;
	--inverse-surface: #012c6d;
	--inverse-on-surface: #ffffff;
	--outline: #8a939c;
	--outline-variant: #e3e8ef;

	/* Primary (navy) */
	--primary: #012c6d;
	--primary-2: #1a4a8a;
	--on-primary: #ffffff;
	--primary-container: #012c6d;
	--on-primary-container: #ffffff;
	--inverse-primary: #6ec1e4;

	/* Secondary (sky blue — buttons like "Dates & Pricing") */
	--secondary: #6ec1e4;
	--secondary-2: #6ec1e4;
	--on-secondary: #ffffff;
	--secondary-container: #6ec1e4;
	--on-secondary-container: #012c6d;

	/* Tertiary */
	--tertiary: #54595f;
	--on-tertiary: #ffffff;

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

	/* Brand accents (configurable via Customizer → Color Scheme) */
	--accent: #6ec1e4;
	--highlight: #f97316;
	--success: #00af87;
	--header-bg: #ffffff;
	--footer-bg: #012c6d;
	--nav-bg: #012c6d;
	--nav-text: #ffffff;
	--nav-active: #6ec1e4;
	--tripadvisor: #00af87;

	/* Background */
	--background: #ffffff;
	--on-background: #333333;

	/* Typography */
	--font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-display: 'Architects Daughter', 'Comic Sans MS', cursive, sans-serif;
	--font-callout: 'Khand', 'Oswald', 'Arial Narrow', sans-serif;
	--font-footer: 'Dosis', 'Roboto', sans-serif;

	--fs-display: 48px; --lh-display: 56px; --ls-display: -0.01em;
	--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 — the Island Life look is squarer than Bayside's */
	--radius-sm: 2px;
	--radius: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--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: 40px;

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

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(1, 44, 109, 0.06);
	--shadow: 0 6px 20px rgba(1, 44, 109, 0.10);
	--shadow-lg: 0 16px 40px rgba(1, 44, 109, 0.14);
}