/*
 * FDMRV tokens — values not expressed in theme.json (motion, z-index, radii,
 * layout gutters, header heights). theme.json supplies colors/type/spacing/shadow
 * as --wp--preset--* CSS vars; here we alias the ones we reach for constantly and
 * add the primitives WP has no slot for.
 */

:root {
	/* ── WordPress kebab-case shim (foundational — do not remove lightly) ───────
	   WP's _wp_to_kebab_case() renames digit-prefixed preset slugs with a hyphen:
	   slug "7xl" is emitted as --wp--preset--font-size--7-xl, but this theme
	   (theme.json's own h1–h5 styles AND the CSS partials) references the plain
	   --wp--preset--font-size--7xl. Every digit-prefixed size/space therefore
	   resolved to nothing, silently collapsing EVERY heading to 16px. These aliases
	   bridge the plain names the theme uses to the hyphenated names WP emits.
	   (Long-term cleanup: drop digit-prefixed slugs so kebab-casing is a no-op.) */
	--wp--preset--font-size--2xs: var(--wp--preset--font-size--2-xs);
	--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
	--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
	--wp--preset--font-size--4xl: var(--wp--preset--font-size--4-xl);
	--wp--preset--font-size--5xl: var(--wp--preset--font-size--5-xl);
	--wp--preset--font-size--6xl: var(--wp--preset--font-size--6-xl);
	--wp--preset--font-size--7xl: var(--wp--preset--font-size--7-xl);
	--wp--preset--font-size--8xl: var(--wp--preset--font-size--8-xl);
	--wp--preset--spacing--2xs: var(--wp--preset--spacing--2-xs);
	--wp--preset--spacing--3xs: var(--wp--preset--spacing--3-xs);
	--wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl);
	--wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl);
	--wp--preset--spacing--4xl: var(--wp--preset--spacing--4-xl);

	/* Color aliases (shorter to type than the --wp--preset--color--* forms). */
	--fd-navy-900:  var(--wp--preset--color--navy-900);
	--fd-navy-800:  var(--wp--preset--color--navy-800);
	--fd-navy-700:  var(--wp--preset--color--navy-700);
	--fd-navy-600:  var(--wp--preset--color--navy-600);
	--fd-navy-500:  var(--wp--preset--color--navy-500);
	--fd-steel-400: var(--wp--preset--color--steel-400);
	--fd-steel-300: var(--wp--preset--color--steel-300);
	--fd-steel-200: var(--wp--preset--color--steel-200);
	--fd-mist:      var(--wp--preset--color--mist);
	--fd-orange-700: var(--wp--preset--color--orange-700);
	--fd-orange-500: var(--wp--preset--color--orange-500);
	--fd-orange-400: var(--wp--preset--color--orange-400);
	--fd-white:     var(--wp--preset--color--white);
	--fd-paper:     var(--wp--preset--color--paper);
	--fd-paper-soft: var(--wp--preset--color--paper-soft);
	--fd-line:      var(--wp--preset--color--line);
	--fd-ink-700:   var(--wp--preset--color--ink-700);
	--fd-ink-500:   var(--wp--preset--color--ink-500);
	--fd-tint-water: var(--wp--preset--color--tint-water);
	--fd-tint-road:  var(--wp--preset--color--tint-road);

	/* Semantic surfaces — name the intent so "which white is this" is never ad hoc. */
	--fd-surface:      var(--fd-white);
	--fd-surface-1:    var(--fd-paper);
	--fd-surface-2:    var(--fd-paper-soft);
	--fd-surface-navy: var(--fd-navy-800);

	/* Layout primitives. */
	--fd-container:      1240px;
	--fd-container-wide: 1600px;
	/* Global page gutter — drives .fd-container, header/footer inners, sections. */
	--fd-gutter: clamp(1.25rem, 4vw, 4rem);

	/* Section rhythm — marketing breathes, inventory tightens (see globals.css). */
	--fd-section-y:       clamp(3.5rem, 8vw, 7rem);
	--fd-section-y-tight: clamp(2.5rem, 5vw, 4rem);

	/* Header tier heights (JS keeps --fd-header-h in sync with the rendered stack). */
	--fd-utility-h:  40px;
	--fd-main-h:     56px;
	--fd-announce-h: 40px;
	--fd-header-h: calc(var(--fd-utility-h) + var(--fd-main-h) + var(--fd-announce-h));
	--fd-main-h-mobile: 60px;

	/* Motion — a touch springier than LiV to read "high energy" without gimmicks. */
	--fd-easing:          cubic-bezier(0.2, 0.7, 0.2, 1);
	--fd-transition:      200ms var(--fd-easing);
	--fd-transition-slow: 400ms var(--fd-easing);

	/* Scroll-reveal (D6) — distance/duration consumed by the IntersectionObserver
	   layer; both collapse to 0 under prefers-reduced-motion below. */
	--fd-reveal-distance: 16px;
	--fd-reveal-duration: 600ms;

	/* Flat, named z-index scale. */
	--z-base:           1;
	--z-sticky-cta:     40;
	--z-header:         50;
	--z-overlay-scrim:  80;
	--z-mobile-nav:     90;
	--z-search:         95;
	--z-modal:          100;

	/* Border radius — moderate, modern (not fully pill except chips). */
	--fd-r-sm:   4px;
	--fd-r-md:   8px;
	--fd-r-lg:   14px;
	--fd-r-pill: 999px;

	/* Focus ring — orange on a white halo so it reads on navy and on white. */
	--fd-focus-ring: 0 0 0 2px var(--fd-white), 0 0 0 4px var(--fd-orange-500);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fd-transition: 0ms;
		--fd-transition-slow: 0ms;
		--fd-reveal-distance: 0;
		--fd-reveal-duration: 0ms;
	}
}