/*
 * Theme-wide aliases and CSS-only helpers.
 *
 * Values that WordPress can expose in Global Styles originate in theme.json.
 * These aliases keep block CSS concise without creating a second value source.
 */

:root {
	/* Spacing. */
	--space-xxs: var(--wp--preset--spacing--xx-small);
	--space-xs: var(--wp--preset--spacing--x-small);
	--space-s: var(--wp--preset--spacing--small);
	--space-m: var(--wp--preset--spacing--medium);
	--space-l: var(--wp--preset--spacing--large);
	--space-xl: var(--wp--preset--spacing--x-large);
	--space-xxl: var(--wp--preset--spacing--xx-large);

	/* Typography. */
	--text-2xs: var(--wp--preset--font-size--text-2xs);
	--text-xs: var(--wp--preset--font-size--text-xs);
	--text-s: var(--wp--preset--font-size--text-s);
	--text-m: var(--wp--preset--font-size--text-m);
	--text-l: var(--wp--preset--font-size--text-l);
	--text-xl: var(--wp--preset--font-size--text-xl);
	--text-2xl: var(--wp--preset--font-size--text-2xl);
	--font-heading: var(--wp--preset--font-family--heading);
	--font-body: var(--wp--preset--font-family--body);
	--font-decorative: var(--wp--preset--font-family--decorative);

	/* Layout and components. */
	--section-padding: var(--space-l);
	--section-gutter: var(--wp--custom--layout--gutter);
	--header-block-size: var(--wp--custom--layout--header-height);
	--container-gap: var(--space-m);
	--column-gap: var(--space-m);
	--grid-gap: var(--space-m);
	--radius-s: var(--wp--custom--border--radius--small);
	--radius-m: var(--wp--custom--border--radius--medium);
	--radius-l: var(--wp--custom--border--radius--large);
	--card-padding: var(--space-m);
	--card-radius: var(--radius-l);

	/* Colours. */
	--primary-ultra-light: var(--wp--preset--color--primary-ultra-light);
	--primary-light: var(--wp--preset--color--primary-light);
	--primary: var(--wp--preset--color--primary);
	--primary-dark: var(--wp--preset--color--primary-dark);
	--primary-ultra-dark: var(--wp--preset--color--primary-ultra-dark);

	--secondary-ultra-light: var(--wp--preset--color--secondary-ultra-light);
	--secondary-light: var(--wp--preset--color--secondary-light);
	--secondary: var(--wp--preset--color--secondary);
	--secondary-dark: var(--wp--preset--color--secondary-dark);
	--secondary-ultra-dark: var(--wp--preset--color--secondary-ultra-dark);

	--accent-ultra-light: var(--wp--preset--color--accent-ultra-light);
	--accent-light: var(--wp--preset--color--accent-light);
	--accent: var(--wp--preset--color--accent);
	--accent-dark: var(--wp--preset--color--accent-dark);
	--accent-ultra-dark: var(--wp--preset--color--accent-ultra-dark);

	--text: var(--wp--preset--color--contrast);
	--text-light: var(--wp--preset--color--muted);
	--link: var(--primary);
	--link-hover: var(--primary-dark);

	/* Shadows, motion, and aspect ratios. */
	--box-shadow-s: var(--wp--preset--shadow--small);
	--box-shadow-m: var(--wp--preset--shadow--medium);
	--box-shadow-l: var(--wp--preset--shadow--large);
	--transition: var(--wp--custom--transition--standard);
	--fade-in-up: ohso-fade-in-up 0.5s ease-out both;
	--fade-in-left: ohso-fade-in-left 0.5s ease-out both;
	--fade-in-right: ohso-fade-in-right 0.5s ease-out both;
	--aspect-square: var(--wp--preset--aspect-ratio--square);
	--aspect-video: var(--wp--preset--aspect-ratio--video);
	--aspect-landscape: var(--wp--preset--aspect-ratio--landscape);
	--aspect-portrait: var(--wp--preset--aspect-ratio--portrait);
	--aspect-panoramic: var(--wp--preset--aspect-ratio--panoramic);
}

a {
	transition: color var(--transition);
}

a:hover {
	color: var(--link-hover);
}

@keyframes ohso-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(var(--space-s));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ohso-fade-in-left {
	from {
		opacity: 0;
		transform: translateX(calc(var(--space-s) * -1));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ohso-fade-in-right {
	from {
		opacity: 0;
		transform: translateX(var(--space-s));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.fade-in-up {
	animation: var(--fade-in-up);
}

.fade-in-left {
	animation: var(--fade-in-left);
}

.fade-in-right {
	animation: var(--fade-in-right);
}

/* Apply to a card containing one direct, primary link. */
.link-expand {
	position: relative;
}

.link-expand > a::after {
	position: absolute;
	inset: 0;
	content: '';
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition: 0.01ms linear;
		--fade-in-up: none;
		--fade-in-left: none;
		--fade-in-right: none;
	}
}