/*
 * shitate theme tokens.
 *
 * Theme-origin custom properties use the short `--st-` prefix so they are
 * easy to author and clearly distinct from WordPress-generated variables:
 *   --st-*   = defined by this theme (use these in custom CSS)
 *   --wp--*  = generated by WordPress (theme.json presets + core globals)
 *
 * Colors alias the theme.json palette so there is a single source of truth.
 */
:root {
	/*
	 * Modular type scale (typescale.com style).
	 * Every step derives from a single base size and ratio via calc(prev * ratio)
	 * — no pow() needed. Fixed at every screen width (no shrinking on mobile);
	 * change --st-ratio or --st-text-m to rescale the whole set.
	 */
	--st-ratio: 1.25;
	--st-text-m: 1rem; /* base / body = 16px */
	--st-text-s: calc(var(--st-text-m) / var(--st-ratio));
	--st-text-xs: calc(var(--st-text-s) / var(--st-ratio));
	--st-text-xxs: calc(var(--st-text-xs) / var(--st-ratio));
	--st-text-l: calc(var(--st-text-m) * var(--st-ratio));
	--st-text-xl: calc(var(--st-text-l) * var(--st-ratio));
	--st-text-xxl: calc(var(--st-text-xl) * var(--st-ratio));
	--st-text-xxxl: calc(var(--st-text-xxl) * var(--st-ratio));

	/*
	 * Colors — short aliases of the theme.json palette presets.
	 * The palette (Site Editor → Styles → Colors) is the single source of
	 * truth: it shows real default values in the editor UI and can be edited
	 * there; style variations swap the palette natively. These aliases keep
	 * the short --st-* names working in plugin blocks and custom CSS, and
	 * follow every palette change automatically.
	 */
	--st-color-brand: var(--wp--preset--color--primary, #2952cc);
	--st-color-brand-hover: var(--wp--preset--color--primary-hover, #20409f);
	--st-color-accent: var(--wp--preset--color--accent, #0fae8e);
	--st-color-base: var(--wp--preset--color--base, #ffffff);
	--st-color-base-2: var(--wp--preset--color--base-2, #f4f6fc);
	--st-color-contrast: var(--wp--preset--color--contrast, #171f33);
	--st-color-contrast-2: var(--wp--preset--color--contrast-2, #515766);
	--st-color-neutral: var(--wp--preset--color--neutral, #5c6b90);
	--st-color-border: var(--wp--preset--color--line, #e4e9f7);

	/*
	 * Spacing scale — the same modular rule as the type scale, in the same
	 * eight names. m is the body size (--st-text-m); every other step is a
	 * power of --st-ratio away from it, so changing the ratio or the base size
	 * in the Customizer moves type and space together. Above m the steps are
	 * two ratio powers apart (l = m·r², xl = m·r⁴, xxl = m·r⁶, xxxl = m·r⁸);
	 * below m they tighten faster (s = m/r, xs = m/r³, xxs = m/r⁶). At the
	 * default ratio 1.25 that is ≈ 4 / 8 / 13 / 16 / 25 / 39 / 61 / 95px.
	 *
	 * Steps above m are fluid without media queries: on narrow viewports they
	 * follow a gentler ratio derived from the chosen one ((1 + r) / 2, never
	 * inverting) and open up to the full ratio on wide screens. Steps below m
	 * stay static — their fluid delta would be 1–3px, below perception.
	 */
	--st-space-m: var(--st-text-m);
	--st-space-s: calc(var(--st-space-m) / var(--st-ratio, 1.25));
	--st-space-xs: calc(var(--st-space-s) / var(--st-ratio, 1.25) / var(--st-ratio, 1.25));
	--st-space-xxs: calc(var(--st-space-xs) / var(--st-ratio, 1.25) / var(--st-ratio, 1.25) / var(--st-ratio, 1.25));
	--st-ratio-min: calc((1 + var(--st-ratio, 1.25)) / 2);
	--st-space-l-max: calc(var(--st-space-m) * var(--st-ratio, 1.25) * var(--st-ratio, 1.25));
	--st-space-xl-max: calc(var(--st-space-l-max) * var(--st-ratio, 1.25) * var(--st-ratio, 1.25));
	--st-space-xxl-max: calc(var(--st-space-xl-max) * var(--st-ratio, 1.25) * var(--st-ratio, 1.25));
	--st-space-xxxl-max: calc(var(--st-space-xxl-max) * var(--st-ratio, 1.25) * var(--st-ratio, 1.25));
	--st-space-l-min: calc(var(--st-space-m) * var(--st-ratio-min) * var(--st-ratio-min));
	--st-space-xl-min: calc(var(--st-space-l-min) * var(--st-ratio-min) * var(--st-ratio-min));
	--st-space-xxl-min: calc(var(--st-space-xl-min) * var(--st-ratio-min) * var(--st-ratio-min));
	--st-space-xxxl-min: calc(var(--st-space-xxl-min) * var(--st-ratio-min) * var(--st-ratio-min));
	--st-space-l: clamp(var(--st-space-l-min), calc(var(--st-space-l-min) + 1vw), var(--st-space-l-max));
	--st-space-xl: clamp(var(--st-space-xl-min), calc(var(--st-space-xl-min) + 2vw), var(--st-space-xl-max));
	--st-space-xxl: clamp(var(--st-space-xxl-min), calc(var(--st-space-xxl-min) + 3vw), var(--st-space-xxl-max));
	--st-space-xxxl: clamp(var(--st-space-xxxl-min), calc(var(--st-space-xxxl-min) + 4vw), var(--st-space-xxxl-max));

	/* Layout — rem so line length tracks the user's browser font size. */
	--st-width-max: 78.75rem; /* = wideSize, 1260px at 16px root */
	--st-width-text: 64rem; /* = contentSize, 1024px at 16px root */

	/* Section rhythm (absolute, DADS) */
	--st-space-section: var(--st-space-xxl);

	/* Surfaces — one small radius vocabulary instead of scattered px values. */
	--st-radius-s: 0.375rem; /* buttons, small chips (6px) */
	--st-radius-m: 0.625rem; /* cards, images (10px) */
	--st-radius-l: 0.75rem; /* feature cards (12px) */
	--st-radius-card: var(--st-radius-m);
	--st-border-card: 1px solid var(--st-color-border);
}

/*
 * Vertical rhythm (margin-top).
 *
 * The base gap between sibling blocks comes from blockGap, which WordPress
 * applies as margin-block-start in flow/constrained layouts and exposes as
 * --wp--style--block-gap on each layout container. Headings get MORE space
 * before them so hierarchy reads clearly — expressed as a multiple of the
 * LOCAL gap, so the extra space stays proportional to the surrounding rhythm
 * and tightens automatically inside dense contexts (cards, boxes).
 * First children keep no top margin. The `:root` prefix lifts specificity
 * just above the core block-gap rule without needing !important.
 */
:root :where( .is-layout-flow, .is-layout-constrained ) > h1:not( :first-child ),
:root :where( .is-layout-flow, .is-layout-constrained ) > h2:not( :first-child ) {
	margin-block-start: calc( var( --wp--style--block-gap, 1.5rem ) * 1.75 );
}

:root :where( .is-layout-flow, .is-layout-constrained ) > h3:not( :first-child ),
:root :where( .is-layout-flow, .is-layout-constrained ) > h4:not( :first-child ) {
	margin-block-start: calc( var( --wp--style--block-gap, 1.5rem ) * 1.25 );
}