/**
 * Whitepeak Elementor Addon — Design Tokens
 * Single source of truth for color, type, and spacing.
 * No hardcoded hex values or font names outside this file.
 *
 * Values below are taken from the approved final build (homepage.html),
 * not the earlier Figma-export estimate.
 */

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Color */
	--wpk-accent: #5B8135;
	--wpk-accent-deep: #456627;
	--wpk-ink: #252525;
	--wpk-ink-soft: #1A1A1A;
	--wpk-body: #5B5B5B;
	--wpk-muted: #5B5B5B;
	--wpk-surface: #FFFFFF;
	--wpk-surface-alt: #F3F6F0;
	--wpk-pale-green: #CED9C2;
	--wpk-pale-green-glow: #A4B990;
	--wpk-pale-green-tint: #F5F7F2;
	--wpk-hairline: #D9D9D9;
	--wpk-card-flat-start: #50534E;
	--wpk-card-flat-end: #42443F;

	/* Typography — single family (self-hosted DM Sans), used for both
	   display and body copy. Headings use Bold (700), not a separate
	   display face. */
	--wpk-font-display: 'DM Sans', Arial, Helvetica, sans-serif;
	--wpk-font-body: 'DM Sans', Arial, Helvetica, sans-serif;

	--wpk-weight-display: 700;
	--wpk-weight-body-regular: 400;
	--wpk-weight-body-medium: 500;
	--wpk-weight-body-semibold: 600;
	--wpk-weight-body-bold: 700;

	/* Layout. --wpk-content-max-width's 1280px is only the fallback —
	   Whitepeak_Assets::get_kit_content_width() overrides it with
	   Elementor's own Site Settings > Layout > Content Width via an
	   inline style, so the page width tracks that single setting. */
	--wpk-content-max-width: 1280px;
	--wpk-content-max-width-narrow: 1104px;
	--wpk-gutter: 40px;

	--wpk-section-spacing-desktop: 128px;
	--wpk-section-spacing-tablet: 105px;
	--wpk-section-spacing-mobile: 74px;
	--wpk-section-spacing: var(--wpk-section-spacing-desktop);

	--wpk-radius-pill: 999px;
	--wpk-radius-card: 13px;
	--wpk-radius-media: 20px;
}

@media (max-width: 1200px) {
	:root {
		--wpk-gutter: 32px;
		--wpk-section-spacing: var(--wpk-section-spacing-tablet);
	}
}

@media (max-width: 700px) {
	:root {
		--wpk-gutter: 20px;
		--wpk-section-spacing: var(--wpk-section-spacing-mobile);
	}
}

@media (max-width: 370px) {
	:root {
		--wpk-gutter: 16px;
	}
}