/*
 * 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 {
	/*
	 * Font stacks. System fonts only — nothing is downloaded. The default
	 * stack names no CJK font on purpose: the browser picks the right
	 * Japanese / Chinese / Korean fallback from the page language, so
	 * ideographs are never drawn with another language's glyph forms.
	 * functions.php overrides the stacks for Japanese sites (see
	 * shitate_font_inline_css) so Japanese pages get a Japanese-first stack.
	 */
	--st-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--st-font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
	--st-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/*
	 * Modular scale — one ratio drives both type and spacing.
	 * Every step is a power of the ratio away from the base size (--st-text-m),
	 * computed as chained multiplications, so no pow() is needed.
	 *
	 * The ratio is fluid: on narrow viewports it eases to the small-screen
	 * ratio (--st-ratio-min: the Customizer's "Scale ratio on small screens",
	 * or (1 + r) / 2 when that is "auto") and opens up to the chosen r on wide
	 * screens (375px → 1260px, the wide size).
	 * Because every step is derived from that single fluid ratio, the scale is
	 * an exact geometric progression at every viewport width — not only at the
	 * two ends. The interpolation needs the viewport width as a plain number,
	 * which tan(atan2(100vw, 1px)) provides; browsers without trigonometric
	 * functions keep the fixed ratio (see the @supports block below).
	 * --st-r is the ratio to use for every derived value.
	 *
	 * The Customizer can pin the three text steps below the base to fixed rem
	 * values instead ("Fixed sizes for small text").
	 */
	--st-ratio: 1.25;
	--st-text-m: 1rem; /* base / body = 16px */
	--st-ratio-min: calc((1 + var(--st-ratio, 1.25)) / 2);
	--st-ratio-fluid: var(--st-ratio, 1.25);
	--st-r: var(--st-ratio-fluid);
	--st-text-s: calc(var(--st-text-m) / var(--st-r));
	--st-text-xs: calc(var(--st-text-m) / var(--st-r) / var(--st-r));
	--st-text-xxs: calc(var(--st-text-m) / var(--st-r) / var(--st-r) / var(--st-r));
	--st-text-l: calc(var(--st-text-m) * var(--st-r));
	--st-text-xl: calc(var(--st-text-m) * var(--st-r) * var(--st-r));
	--st-text-xxl: calc(var(--st-text-m) * var(--st-r) * var(--st-r) * var(--st-r));
	--st-text-xxxl: calc(var(--st-text-m) * var(--st-r) * var(--st-r) * var(--st-r) * var(--st-r));

	/*
	 * 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 ratio as the type scale, in the same eight
	 * names. m is the body size (--st-text-m); 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 on wide screens.
	 * All steps use the fluid ratio --st-r, so the whole ladder tightens on
	 * narrow viewports while staying a true geometric progression.
	 */
	--st-space-m: var(--st-text-m);
	--st-space-s: calc(var(--st-space-m) / var(--st-r));
	--st-space-xs: calc(var(--st-space-m) / var(--st-r) / var(--st-r) / var(--st-r));
	--st-space-xxs: calc(var(--st-space-xs) / var(--st-r) / var(--st-r) / var(--st-r));
	--st-space-l: calc(var(--st-space-m) * var(--st-r) * var(--st-r));
	--st-space-xl: calc(var(--st-space-l) * var(--st-r) * var(--st-r));
	--st-space-xxl: calc(var(--st-space-xl) * var(--st-r) * var(--st-r));
	--st-space-xxxl: calc(var(--st-space-xxl) * var(--st-r) * var(--st-r));

	/* 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);

	/* Hover / focus transition for interactive elements (see style.css).
	   One duration for the whole site; override it to retune every hover. */
	--st-transition: 0.2s;
}

/*
 * Fluid ratio. The viewport width becomes a unitless number via
 * tan(atan2(100vw, 1px)); 0 at 375px, 1 at 1260px (wide size), clamped.
 * This is a feature query, not a media query: nothing branches on width,
 * the ratio simply eases between its two ends.
 */
@supports (width: calc(tan(atan2(1vw, 1px)) * 1px)) {
	:root {
		--st-fluid-t: clamp(0, calc((tan(atan2(100vw, 1px)) - 375) / 885), 1);
		--st-ratio-fluid: calc(var(--st-ratio-min) + (var(--st-ratio, 1.25) - var(--st-ratio-min)) * var(--st-fluid-t));
	}
}

/*
 * 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 );
}