/*
 * base.css — design tokens and the minimal reset.
 *
 * Loaded globally on the front end and, through add_editor_style(), inside the
 * block editor, so blocks resolve the same tokens on both sides.
 *
 * Scope of this file:
 *   - custom properties that theme.json cannot express (rail, gutter,
 *     elevation, motion);
 *   - the keyframes shared by more than one component;
 *   - the few browser defaults that have to be normalised site-wide.
 *
 * Everything expressible as a preset — palette, font family, font sizes,
 * spacing scale — lives in theme.json instead and reaches CSS as
 * var(--wp--preset--*). Component styling lives in css/<component>.css for
 * theme chrome and in blocks/<slug>/style.css for blocks.
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/

:root {

	/*
	 * Content rail.
	 *
	 * --sws-content is the width of the content itself, gutters excluded;
	 * --sws-gutter is the space between the viewport edge and that content, and
	 * it grows with the viewport so wide-but-not-huge screens keep their margins
	 * instead of running the layout edge to edge.
	 *
	 * A row is written as
	 *   max-width: min(var(--sws-content), 100% - 2 * var(--sws-gutter));
	 *   margin-inline: auto;
	 * with no padding at all, so it does not care about the box model — which
	 * matters here, because the theme has no global box-sizing.
	 */
	--sws-content: 1116px;
	--sws-gutter: clamp(0.75rem, 5vw, 3.75rem);

	/* Elevation. */
	--sws-shadow-header: 0 2px 28px 0 rgb(0 0 0 / 6%);
	--sws-shadow-dropdown: 0 0 30px 0 rgb(0 0 0 / 5%);
	--sws-shadow-panel: 0 7px 13px 0 rgb(0 0 0 / 10%);
	--sws-shadow-button: 0 13px 27px 0 rgb(198 121 227 / 25%);
	--sws-shadow-button-hover: 0 13px 27px 0 rgb(68 206 111 / 25%);

	/* Shape and motion. */
	--sws-radius: 4px;
	--sws-radius-lg: 5px;
	--sws-duration: 0.3s;
	--sws-easing: ease;
	--sws-transition: var(--sws-duration) var(--sws-easing);
}

/*--------------------------------------------------------------
# Motion
--------------------------------------------------------------*/

/*
 * Decorative drift, shared.
 *
 * Schematic symbols floating behind a section are a site-wide device, not a
 * property of one block: the hero opened with it and the footer repeats it, and
 * a block stylesheet only loads where its block is — the footer also renders on
 * 404, search and the archives, where blocks/hero/style.css never arrives.
 * So the vocabulary lives here, next to the tokens, and each component keeps
 * its own placement, size and duration.
 *
 * These are geometry only. They carry no position, no size and no opacity, so
 * applying one cannot move a component anywhere its own rules did not put it.
 *
 * Silencing them is the component's job. The reduced-motion block below
 * collapses --sws-duration, which reaches transitions only; a keyframe
 * animation has no such handle, so every component that starts one also stops
 * it (see blocks/hero/style.css and css/footer.css).
 */

@keyframes sws-spin {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* The reference spins its soft blooms on the Y axis, which reads as a pulse. */
@keyframes sws-rotate-3d {

	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(360deg);
	}
}

@keyframes sws-bob {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(20px);
	}
}

/* The reference ships this one with -webkit-transform only; plain transform here. */
@keyframes sws-drift {

	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}

	20% {
		transform: translate(73px, -1px) rotate(36deg);
	}

	40% {
		transform: translate(141px, 72px) rotate(72deg);
	}

	60% {
		transform: translate(83px, 122px) rotate(108deg);
	}

	80% {
		transform: translate(-40px, 72px) rotate(144deg);
	}
}

/*
 * The dot that runs along a section title's rule.
 *
 * Distance is read from --sws-bar-travel rather than written in, because the
 * rule and the dot are sized by the component and only it knows the difference
 * between them. The reference hardcodes 88px against a 90px rule holding a 10px
 * dot, which is why its dot pokes out of the right end.
 */
@keyframes sws-bar-dot {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--sws-bar-travel, 0));
	}
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

/*
 * No global box-sizing here, on purpose.
 *
 * Theme block rails size themselves as content-box and hang padding outside,
 * so a global border-box would narrow every one of them by their own padding
 * (sws-kit/docs/core-blocks.md). Components that want border-box declare it
 * scoped to themselves — see css/header.css.
 */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/*
	 * The only handle on the UA shadow DOM: scroll bars, the select popup, the
	 * date picker and autofill. This theme is light-only by agreement, so it
	 * says so rather than letting the browser guess — and it opts the page out
	 * of Chrome's automatic dark treatment on Android.
	 */
	color-scheme: light;
}

body {
	margin: 0;
}

/* Media never overflows its column. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Keyboard focus stays visible everywhere; pointer focus does not draw a ring. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #44ce6f);
	outline-offset: 2px;
}

/*
 * Reduced motion is handled by collapsing the shared duration token rather than
 * by a blanket `* { transition: none !important }`. Every animated component in
 * this theme times itself off --sws-duration, so one override covers them all
 * without !important and without freezing anything it does not own.
 */
@media (prefers-reduced-motion: reduce) {

	:root {
		--sws-duration: 0.01ms;
	}

	html {
		scroll-behavior: auto;
	}
}