/* theme.json owns the values. These aliases keep component CSS readable.
 * Breakpoints: medium 48rem; wide 72rem (see theme.json settings.custom).
 * CSS variables cannot be used in media conditions: repeat literals there.
 */
:root,
.editor-styles-wrapper {
	--ft-canvas: var(--wp--preset--color--canvas);
	--ft-surface: var(--wp--preset--color--surface);
	--ft-ink: var(--wp--preset--color--ink);
	--ft-muted: var(--wp--preset--color--muted);
	--ft-primary: var(--wp--preset--color--primary);
	--ft-primary-hover: var(--wp--preset--color--primary-hover);
	--ft-pink: var(--wp--preset--color--pink-soft);
	--ft-lilac: var(--wp--preset--color--lilac-soft);
	--ft-peach: var(--wp--preset--color--peach-soft);
	--ft-mint: var(--wp--preset--color--mint-soft);
	--ft-border: var(--wp--preset--color--border);
	--ft-control-border: var(--wp--preset--color--control-border);
	--ft-focus: var(--wp--preset--color--focus);
	--ft-error: var(--wp--preset--color--error);
	--ft-success: var(--wp--preset--color--success);
	--ft-font: var(--wp--preset--font-family--system);
	--ft-text-small: var(--wp--preset--font-size--small);
	--ft-text-base: var(--wp--preset--font-size--base);
	--ft-text-medium: var(--wp--preset--font-size--medium);
	--ft-text-large: var(--wp--preset--font-size--large);
	--ft-text-x-large: var(--wp--preset--font-size--x-large);
	--ft-text-xx-large: var(--wp--preset--font-size--xx-large);
	--ft-leading-body: var(--wp--custom--line-height--body);
	--ft-leading-heading: var(--wp--custom--line-height--heading);
	--ft-space-1: var(--wp--preset--spacing--1);
	--ft-space-2: var(--wp--preset--spacing--2);
	--ft-space-3: var(--wp--preset--spacing--3);
	--ft-space-4: var(--wp--preset--spacing--4);
	--ft-space-6: var(--wp--preset--spacing--6);
	--ft-space-8: var(--wp--preset--spacing--8);
	--ft-space-12: var(--wp--preset--spacing--12);
	--ft-space-16: var(--wp--preset--spacing--16);
	--ft-radius-small: var(--wp--custom--radius--small);
	--ft-radius-medium: var(--wp--custom--radius--medium);
	--ft-radius-large: var(--wp--custom--radius--large);
	--ft-radius-pill: var(--wp--custom--radius--pill);
	--ft-shadow-card: var(--wp--custom--shadow--card);
	--ft-content-width: var(--wp--style--global--content-size);
	--ft-wide-width: var(--wp--style--global--wide-size);
}