/*
 * Scott Pool 2026 -- supplemental design tokens.
 *
 * Color, typography, spacing and layout live in theme.json and need no CSS
 * here -- WordPress generates --wp--preset--* / --wp--style--* custom
 * properties from that file automatically. This stylesheet carries only the
 * token categories theme.json has no field for: motion, elevation/shadow,
 * the radius scale, semantic color aliases, and breakpoint values, ported
 * from the Scott Pool Campaign Design System's tokens/*.css near-verbatim.
 *
 * Phase 1 scope: tokens only. No component, header, or hero CSS belongs here
 * yet -- that starts once the header/hero phase is approved.
 */

:root {
	/* ---- Motion (tokens/motion.css) ---- */
	--duration-fast: 140ms;
	--duration-base: 220ms;
	--duration-slow: 400ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--hover-lift: -2px;
	--hover-image-scale: 1.03;
	--reveal-distance: 12px;
	--reveal-stagger: 80ms;

	/* ---- Elevation (tokens/elevation.css) ---- */
	--shadow-none: none;
	--shadow-hover: 0 6px 20px rgba(14, 33, 72, 0.10);
	--shadow-raised: 0 10px 32px rgba(14, 33, 72, 0.14);
	--shadow-header: 0 2px 12px rgba(14, 33, 72, 0.08);
	--shadow-sticky-cta: 0 -2px 14px rgba(14, 33, 72, 0.10);
	--focus-ring: 0 0 0 3px rgba(15, 91, 150, 0.45);
	--focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, 0.65);
	--border-width-hairline: 1px;
	--border-width-rule: 2px;
	--border-width-accent: 4px;
	--accent-rule-width: 56px;

	/* ---- Radius (tokens/radius.css) -- brand is square-cornered ---- */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;
	--radius-circle: 50%;

	/* ---- Semantic color aliases (tokens/colors.css) --
	   mirrors the design system's semantic layer 1:1; raw values match the
	   theme.json palette exactly so both stay in sync. ---- */
	--surface-page: #FFFFFF;
	--surface-muted: #F4F6F8;
	--surface-card: #FFFFFF;
	--surface-card-muted: #F4F6F8;
	--surface-inverse: #0E2148;
	--surface-inverse-deep: #081630;
	--surface-input: #FFFFFF;
	--surface-selected: #E9EBEE;

	--text-heading: #0E2148;
	--text-body: #33415C;
	--text-muted: #818999;
	--text-accent: #C8102E;
	--text-link: #0F5B96;
	--text-on-inverse: #FFFFFF;
	--text-on-inverse-muted: #B9C4D6;
	--text-on-accent: #FFFFFF;

	--border-subtle: #E5E9F0;
	--border-default: #C7D0DC;
	--border-strong: #0E2148;
	--border-on-inverse: rgba(255, 255, 255, 0.24);
	--border-focus: #0F5B96;

	--feedback-success: #157347;
	--feedback-success-bg: #E8F3ED;
	--feedback-error: #C8102E;
	--feedback-error-bg: #FBE7EA;

	--overlay-navy-strong: rgba(8, 22, 48, 0.72);
	--overlay-navy-soft: rgba(8, 22, 48, 0.45);
	--overlay-scrim-bottom: linear-gradient(to top, rgba(8, 22, 48, 0.85) 0%, rgba(8, 22, 48, 0) 62%);

	/* Print collateral only -- never used on screen. */
	--print-navy: #06224C;
	--print-red: #980211;

	/* ---- Layout / breakpoints (tokens/layout.css) ---- */
	--container-max: 1200px;
	--container-wide: 1440px;
	--gutter: 24px;
	--gutter-m: 20px;
	--header-height: 88px;
	--header-height-scrolled: 68px;
	--header-height-m: 64px;
	--sticky-cta-height: 68px;
	--touch-min: 44px;
	/* Breakpoints are documentation tokens here -- custom properties aren't
	   usable inside @media conditions, so every stylesheet uses the raw px
	   values directly: bp-sm:430px bp-md:768px bp-lg:1024px bp-xl:1280px bp-2xl:1600px */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
		--hover-lift: 0px;
		--hover-image-scale: 1;
		--reveal-distance: 0px;
		--reveal-stagger: 0ms;
	}
}