/* ==========================================================================
   WPVelocity — design tokens
   The single source of truth for colour, type, space, radius and motion.
   Never hard-code a hex or a font size in a template; change it here instead.
   ========================================================================== */

:root {
	/* Brand ---------------------------------------------------------------- */
	--wpv-accent: #F47B28;               /* primary orange — dark surfaces only */
	--wpv-accent-2: #FF9A4D;             /* gradient partner */
	--wpv-accent-deep: #A34A12;          /* the same accent for light surfaces — 5.92:1 on #fff */
	--wpv-accent-glow: rgba(244, 123, 40, .45);
	--wpv-accent-soft: rgba(244, 123, 40, .12);
	--wpv-accent-line: rgba(244, 123, 40, .32);
	--wpv-navy: #2A2D45;                 /* secondary, ambient blobs */

	/* Surfaces -------------------------------------------------------------- */
	--wpv-bg: #0A0E14;
	--wpv-bg-2: #0D1117;
	--wpv-bg-3: #11161F;                 /* raised panel on --wpv-bg-2 */
	--wpv-light: #F6F7F9;                /* the one light surface: the form panel */
	--wpv-white: #FFFFFF;
	--wpv-card: rgba(255, 255, 255, .04);
	--wpv-card-2: rgba(255, 255, 255, .06);
	--wpv-card-bd: rgba(255, 255, 255, .09);
	--wpv-line: rgba(255, 255, 255, .12);
	--wpv-line-light: rgba(10, 14, 20, .12);

	/* Ink ------------------------------------------------------------------- */
	--wpv-text: #E7ECF3;                 /* 16.3:1 on --wpv-bg */
	--wpv-muted: #9AA4B2;                /* 7.67:1 on --wpv-bg */
	--wpv-ink: #12161D;                  /* text on light surfaces */
	--wpv-ink-muted: #4A5361;            /* 7.4:1 on --wpv-light */

	/* Type ------------------------------------------------------------------ */
	--wpv-h: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wpv-b: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wpv-m: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* One fluid scale for the whole site. */
	--step--2: clamp(.72rem, .70rem + .10vw, .78rem);   /* eyebrow, pill */
	--step--1: clamp(.84rem, .81rem + .16vw, .94rem);   /* meta, captions */
	--step-0: clamp(1.0625rem, 1.03rem + .16vw, 1.125rem); /* body 17→18px */
	--step-1: clamp(1.18rem, 1.12rem + .28vw, 1.35rem);
	--step-2: clamp(1.25rem, 1.16rem + .44vw, 1.625rem);   /* h3 20→26px */
	--step-3: clamp(1.5rem, 1.30rem + 1.0vw, 2.1rem);
	--step-4: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);   /* h2 30→52px */
	--step-5: clamp(2.375rem, 1.35rem + 4.6vw, 4.75rem);   /* h1 38→76px */

	--lh-tight: 1.05;
	--lh-head: 1.14;
	--lh-body: 1.65;
	--measure: 68ch;
	--measure-card: 44ch;

	/* Space ----------------------------------------------------------------- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-s: 16px;
	--space-m: 24px;
	--space-l: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	/* Vertical rhythm.
	   --section-gap is the whitespace between any two blocks. --section-pad is
	   half of it, and every section carries exactly that on both sides, so the
	   gap is identical everywhere AND a background change always falls in the
	   middle of it. An asymmetric split (tight above the band edge, roomy below)
	   reads as a spacing bug even when the total is right.
	   --section-y stays as the heroes' own larger top padding. */
	--section-y: clamp(56px, 6.4vw, 96px);
	--section-gap: calc(var(--section-y) * 1.4);
	--section-pad: calc(var(--section-gap) / 2);

	/* Layout ---------------------------------------------------------------- */
	--container: 1200px;
	--container-wide: 1440px;
	--gutter: clamp(20px, 5vw, 48px);
	--header-h: 72px;

	/* Radius & elevation ---------------------------------------------------- */
	--radius-s: 6px;
	--radius-m: 12px;
	--radius-l: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;
	--shadow-m: 0 14px 34px rgba(0, 0, 0, .35);
	--shadow-l: 0 32px 80px rgba(0, 0, 0, .5);
	--shadow-glow: 0 0 0 1px var(--wpv-accent-line), 0 18px 44px rgba(244, 123, 40, .18);

	/* Motion ---------------------------------------------------------------- */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-snap: cubic-bezier(.4, 0, .2, 1);
	--dur-micro: 180ms;
	--dur-hover: 220ms;
	--dur-reveal: 620ms;
}

/* Reduced motion collapses every duration at the token level, so no component
   has to opt in. Reveal end-states are handled in main.css and main.js: the
   final state renders immediately, not faster. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-micro: 1ms;
		--dur-hover: 1ms;
		--dur-reveal: 1ms;
	}
}