/*
 * base/tokens.css — custom properties that theme.json cannot express.
 *
 * theme.json is the single source of truth for colours, font sizes, spacing and
 * radii; it emits --wp--preset--* variables. Only put a token here when it is
 * something the Site Editor has no field for: breakpoints, z-index layers,
 * shadows, timings, and aliases used by our own CSS.
 *
 * Never redefine a --wp--preset--* variable here — change theme.json instead.
 */

:root {
	/* Layout ------------------------------------------------------------- */
	--fcs-gutter: 1.5rem;
	--fcs-gutter-lg: 2.5rem;
	--fcs-content: var( --wp--style--global--content-size, 768px );
	--fcs-wide: var( --wp--style--global--wide-size, 1280px );
	--fcs-header-offset: 6rem;

	/* Elevation ---------------------------------------------------------- */
	--fcs-shadow-sm: 0 1px 2px rgb( 0 0 0 / 6% ), 0 1px 3px rgb( 0 0 0 / 8% );
	--fcs-shadow-md: 0 4px 12px rgb( 0 0 0 / 8% );
	--fcs-shadow-lg: 0 12px 32px rgb( 0 0 0 / 12% );

	/* Motion ------------------------------------------------------------- */
	--fcs-transition: 180ms ease;
	--fcs-transition-slow: 320ms ease;

	/*
	 * Hover animation — the shared "sweep" idiom.
	 *
	 * Buttons wipe a translucent veil across themselves; links draw an
	 * underline. Both animate transform: scaleX() and both flip
	 * transform-origin between rest and hover, so the effect enters from the
	 * left and leaves to the right rather than snapping back the way it came.
	 * That origin flip is the whole trick — keep it if you touch these.
	 *
	 * Timings differ on purpose: the button veil covers a larger area and
	 * reads as sluggish at link speed.
	 *
	 * base/reset.css already zeroes every transition under
	 * prefers-reduced-motion with !important, so these need no media query.
	 */
	--fcs-sweep-button: 200ms ease-in;
	--fcs-sweep-link: 300ms ease;

	/* Underline thickness and its gap below the text baseline. */
	--fcs-underline-size: 2px;
	--fcs-underline-gap: 2px;

	/* Stacking order — keep every z-index in this list, nowhere else. ----- */
	--fcs-z-header: 100;
	--fcs-z-dropdown: 200;
	--fcs-z-overlay: 300;
	--fcs-z-dialog: 400;
}

/*
 * Breakpoints — three sizes, mobile-first.
 *
 * Custom properties cannot be used inside @media queries, so these values are
 * documentation, not a mechanism. Write the literal px value in the query and
 * keep it matching this list. The canonical version of this table is the
 * "Responsive" section of /CLAUDE.md — keep the two in step.
 *
 *   Small  (Mobile)    0–767px    no query — this is the base
 *   Medium (Tablet)    768px+     @media ( min-width: 768px )
 *   Large  (Desktop)   1024px+    @media ( min-width: 1024px )
 *
 * Only these three. If a section seems to want a fourth, it usually wants a
 * fluid value — clamp(), %, fr, auto-fit — instead of another breakpoint. Add
 * one only after that fails, and document why in CLAUDE.md.
 *
 * The design canvas is 1920px wide but its content column is 1240px, which is
 * what --fcs-wide / theme.json wideSize should cap at. "Large" means the full
 * desktop layout applies, not that the viewport is 1920.
 */