/* ============================================
   WOLF BLANK — Global Stylesheet
   Design tokens live in theme.json.
   This file: reset + utility only.
   No colors or font names hardcoded here.
   ============================================ */

/* 1. Modern CSS Reset (Andy Bell) ----------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

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

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* 2. Base ----------------------------------- */

/* Colors/fonts come from theme.json via --wp--preset--* custom props.
   WOLF CONTRACT SLOTS follow in the same rule: short --wolf-* names aliased
   from a child theme's theme.json settings.custom.wolf block (emitted by WP
   as --wp--custom--wolf--*). Scoped to `body` because WP emits --wp--custom--*
   on body, not :root. The fallback after each comma is the standalone default —
   wolf-blank stays usable with no child theme. */
body {
	min-height: 100vh;
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	-webkit-font-smoothing: antialiased;

	/* Radii */
	--wolf-radius-sm: var(--wp--custom--wolf--radius-sm, 0);
	--wolf-radius-md: var(--wp--custom--wolf--radius-md, 0);
	--wolf-radius-lg: var(--wp--custom--wolf--radius-lg, 0);
	--wolf-radius-pill: var(--wp--custom--wolf--radius-pill, 999px);

	/* Back-compat alias for the legacy single radius slot. */
	--wolf-border-radius: var(--wolf-radius-md);

	/* Borders */
	--wolf-border-color: var(
		--wp--custom--wolf--border-color,
		rgba(0, 0, 0, 0.15)
	);
	--wolf-border-width: var(--wp--custom--wolf--border-width, 1px);

	/* Buttons */
	--wolf-btn-radius: var(
		--wp--custom--wolf--btn-radius,
		var(--wolf-radius-md)
	);
	--wolf-btn-padding-x: var(--wp--custom--wolf--btn-padding-x, 1.5rem);
	--wolf-btn-padding-y: var(--wp--custom--wolf--btn-padding-y, 0.75rem);
	--wolf-btn-font-weight: var(--wp--custom--wolf--btn-font-weight, 600);
	--wolf-btn-letter-spacing: 0;

	/* Effects + motion */
	--wolf-shadow: var(--wp--custom--wolf--shadow-card, none);
	--wolf-transition-speed: var(--wp--custom--wolf--transition-speed, 0.3s);
	--wolf-transition-ease: var(
		--wp--custom--wolf--transition-ease,
		cubic-bezier(0.4, 0, 0.2, 1)
	);

	/* Layout */
	--wolf-header-height: 80px;
}

/* 3. Layout utilities ----------------------- */

/* Mirror WP's own layout classes for intentional overrides. */
.is-full-width,
.alignfull {
	width: 100%;
}

.is-constrained {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* 4. Typography baseline -------------------- */
h1,
h2,
h3 {
	letter-spacing: var(--wolf-letter-spacing-tight);
}

/* 5. Animation baseline --------------------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* 6. DESIGN TOKENS + SLOTS ------------------ */

/* Static typography tokens. */
:root {
	--wolf-letter-spacing-tight: -0.02em;
	--wolf-letter-spacing-wide: 0.04em;
}

/* Button baseline — uses btn contract tokens defined above. */
.wp-element-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: var(--wolf-btn-padding-y) var(--wolf-btn-padding-x);
	border-radius: var(--wolf-btn-radius);
	font-weight: var(--wolf-btn-font-weight);
}

.wp-element-button.is-style-outline {
	background: transparent;
	border: var(--wolf-border-width) solid currentcolor;
	color: currentcolor;
}