/*
 * Design tokens. Values sampled from the design reference (see docs/phase-1-report.md, section B).
 * Components use these variables only; no raw colours in component CSS.
 */
:root {
	/* Colour */
	--pm-bg: #070807;
	--pm-bg-alt: #0c0d0a;
	--pm-surface: #121311;
	--pm-surface-2: #191a16;
	--pm-border: rgb(255 255 255 / 8%);
	--pm-border-strong: rgb(255 255 255 / 28%);
	--pm-accent: #effc19;
	--pm-accent-press: #d7e312;
	--pm-on-accent: #0a0a0a;
	--pm-glow: rgb(239 252 25 / 35%);
	--pm-text: #fff;
	--pm-text-2: #b5b5b5;
	--pm-text-3: #7a7a7a;

	/* Type */
	--pm-font-display: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--pm-font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--pm-font-script: "Herr Von Muellerhoff", "Segoe Script", cursive;
	--pm-tracking-eyebrow: 0.22em;

	/* Layout */
	--pm-container-max: 1280px;
	--pm-gutter: clamp(16px, 5.56vw, 80px);
	--pm-container: min(var(--pm-container-max), 100% - 2 * var(--pm-gutter));

	/*
	 * Spacing scale. Components use these steps rather than one-off values.
	 * --pm-section-y is the gap between major homepage sections: 100px on
	 * desktop, 68px on tablets and 52px on phones (set in the media queries below).
	 */
	--pm-space-1: 4px;
	--pm-space-2: 8px;
	--pm-space-3: 12px;
	--pm-space-4: 16px;
	--pm-space-5: 24px;
	--pm-space-6: 32px;
	--pm-space-7: 48px;
	--pm-space-8: 64px;
	--pm-section-y: 100px;
	--pm-section-head-gap: var(--pm-space-6);

	/* Cards and panels */
	--pm-card-bg: #0e0f0d;
	--pm-card-bg-top: #151613;
	--pm-card-border: rgb(255 255 255 / 8%);
	--pm-card-border-hover: rgb(239 252 25 / 42%);
	--pm-text-muted: #8f8f8f;

	/* Shape and motion */
	--pm-radius-sm: 4px;
	--pm-radius: 8px;
	--pm-radius-lg: 14px;
	--pm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pm-header-h: clamp(64px, 5.6vw, 80px);
	--pm-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 999.98px) {
	:root {
		--pm-section-y: 68px;
		--pm-section-head-gap: var(--pm-space-5);
	}
}

@media (max-width: 599.98px) {
	:root {
		--pm-section-y: 52px;
	}
}