/* Design tokens — loaded first. Keep brand values in sync with inc/config.php. */

/* Registered so the background shift can be a native CSS transition (no JS ticker needed). */
@property --rp-bg { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --rp-bg-2 { syntax: '<color>'; inherits: true; initial-value: #D6D6D6; }
@property --rp-brand { syntax: '<color>'; inherits: true; initial-value: #E3001B; }
@property --rp-on-brand { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

:root {
	/* Brand */
	--rp-red: #E3001B;
	--rp-red-dark: #B30015;
	--rp-ink: #1E2A33;
	--rp-muted: #6B7280;
	--rp-line: rgba(30, 42, 51, .12);
	--rp-white: #FFFFFF;

	/* Page background (animated by JS — hero ring / label pages) */
	--rp-bg: #FFFFFF;
	--rp-bg-2: #D6D6D6;
	--rp-brand: var(--rp-red);
	--rp-on-brand: #FFFFFF;

	/* Type */
	--rp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-display: clamp(4.5rem, 14vw, 13.5rem);   /* brand name on label hero */
	--fs-h1: clamp(2rem, 4.5vw, 3.5rem);
	--fs-h2: clamp(1.5rem, 2.6vw, 2rem);
	--fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
	--fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);
	--fs-body: 1rem;
	--fs-small: .875rem;
	--fs-micro: .75rem;
	--lh-tight: 1.05;
	--lh-body: 1.55;

	/* Spacing + layout */
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;
	--space-7: 9rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--container: 1280px;
	--container-narrow: 720px;
	--radius: 10px;
	--radius-pill: 999px;

	/* Motion */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-fast: .25s;
	--dur: .6s;
	--dur-slow: 1.1s;

	/* Header */
	--header-h: 88px;
}

@media (max-width: 768px) {
	:root {
		--header-h: 68px;
	}
}