/*
 * LiV tokens — values that aren't expressed in theme.json
 * (transitions, z-indexes, layout-grid breakpoints, glassy surfaces).
 * theme.json provides colors/typography/spacing as --wp--preset--* CSS vars.
 */

:root {
	/* Semantic aliases on top of WP presets — shorter to type. */
	--liv-black:      var(--wp--preset--color--black);
	--liv-ink-900:    var(--wp--preset--color--ink-900);
	--liv-ink-800:    var(--wp--preset--color--ink-800);
	--liv-ink-700:    var(--wp--preset--color--ink-700);
	--liv-ink-500:    var(--wp--preset--color--ink-500);
	--liv-ink-400:    var(--wp--preset--color--ink-400);
	--liv-ink-300:    var(--wp--preset--color--ink-300);
	--liv-ink-200:    var(--wp--preset--color--ink-200);
	--liv-paper:      var(--wp--preset--color--paper);
	--liv-paper-soft: var(--wp--preset--color--paper-soft);
	--liv-paper-300:  var(--wp--preset--color--paper-300);
	--liv-leaf-300:   var(--wp--preset--color--leaf-300);
	--liv-leaf-500:   var(--wp--preset--color--leaf-500);
	--liv-leaf-700:   var(--wp--preset--color--leaf-700);

	/* Layout primitives. */
	--liv-container:        1200px;
	--liv-container-wide:   1600px;
	--liv-gutter:           clamp(1rem, 3vw, 2.5rem);

	/* Header heights. */
	--liv-utility-h:        14px;
	--liv-main-h:           60px;
	--liv-announce-h:       44px;
	--liv-header-total:     calc(var(--liv-utility-h) + var(--liv-main-h) + var(--liv-announce-h));

	/* Mobile header heights (utility hides on mobile). */
	--liv-main-h-mobile:    64px;
	--liv-announce-h-mobile: 56px;
	--liv-header-total-mobile: calc(var(--liv-main-h-mobile) + var(--liv-announce-h-mobile));

	/* Live header height — set by JS to match the rendered three-tier stack
	 * (accounts for announcement-bar dismissal + mobile breakpoint).
	 * Used by .liv-hero negative-margin pull-up on the homepage. */
	--liv-header-h: var(--liv-header-total);

	/* Motion. */
	--liv-easing:           cubic-bezier(0.2, 0.7, 0.2, 1);
	--liv-transition:       180ms var(--liv-easing);
	--liv-transition-slow:  360ms var(--liv-easing);

	/* Z-index scale — kept flat and named. */
	--z-base:               1;
	--z-sticky-cta:         40;
	--z-header:             50;
	--z-overlay-scrim:      80;
	--z-mobile-nav:         90;
	--z-search-overlay:     95;
	--z-modal:              100;
	--z-toast:              110;

	/* Border-radius. */
	--r-sm:   2px;
	--r-md:   4px;
	--r-lg:   8px;
	--r-pill: 999px;

	/* Focus ring. */
	--liv-focus-ring: 0 0 0 2px var(--liv-ink-900), 0 0 0 4px var(--liv-leaf-500);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--liv-transition: 0ms;
		--liv-transition-slow: 0ms;
	}
}