:root {

	/* COLORS — scheme-aware: a button takes the active scheme's accent / on-accent
	   pair, falling back to the brand primary (so it recolors inside schemed
	   sections and dark mode, inert in the default scheme). */
	--button-background-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-text-color: var(--ftm-scheme-accent-text, var(--color-white));

	/* Hover darkens the ACTIVE scheme's accent (same 14% formula as ftm-blocks
	   elements.css) — a fixed brand step here breaks contrast inside schemed
	   sections where the accent is not the brand red (e.g. white on a red fill). */
	--button-hover-background-color: color-mix(in srgb, var(--ftm-scheme-accent, var(--color-primary)), #000 14%);
	--button-hover-text-color: var(--button-text-color);
	--button-gradient: none;

	/* FOCUS (accessibility) — inherits the shared §14 focus-visible standard. */
	--button-focus-outline-color: var(--ftps-focus-color, currentcolor);
	--button-focus-outline-width: var(--ftps-focus-width, 2px);
	--button-focus-outline-style: var(--ftps-focus-style, solid);
	--button-focus-outline-offset: var(--ftps-focus-offset, 2px);

	/* SPACING */
	--button-padding-top: var(--space-xsmall);
	--button-padding-bottom: var(--space-xsmall);
	--button-padding-left: var(--space-normal);
	--button-padding-right: var(--space-normal);
	--button-block-gap: 0;

	/* BORDER */
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: currentcolor;
	--button-border-radius: 1.5em;

	/* TYPOGRAPHY */
	--button-font-family: var(--label-large-font);
	--button-font-size: var(--label-large-size);
	--button-font-style: normal;
	--button-font-weight: var(--label-large-weight);
	--button-line-height: var(--label-large-line-height);
	--button-letter-spacing: var(--label-large-letter-spacing, 0);
	--button-text-transform: none;

	/* DIMENSIONS */
	--button-aspect-ratio: inherit;
	--button-min-height: inherit;

	/* MOTION */
	--button-transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== BASE BUTTON ===== */

button[type="submit"],
.button,
:root :where(.wp-element-button, .wp-block-button__link) {
	aspect-ratio: var(--button-aspect-ratio);
	background-color: var(--button-background-color);
	border-color: var(--button-border-color);
	border-radius: var(--button-border-radius);
	border-style: var(--button-border-style);
	border-width: var(--button-border-width);
	color: var(--button-text-color);
	cursor: pointer;
	display: inline-block;
	font: var(--button-font-style) var(--button-font-weight) var(--button-font-size)/var(--button-line-height) var(--button-font-family);
	letter-spacing: var(--button-letter-spacing);
	margin: 0;
	min-height: var(--button-min-height);
	padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
	text-decoration: none;
	text-transform: var(--button-text-transform);
	transition: var(--button-transition);

	&:hover {
		background-color: var(--button-hover-background-color);
		color: var(--button-hover-text-color);
	}

	&:focus-visible {
		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
		outline-offset: var(--button-focus-outline-offset);

		/* ftm-blocks elements.css sets a box-shadow focus ring on the same
		   selectors; the theme's outline is the single focus indicator. */
		box-shadow: none;
	}

	/* Disabled state (§14) — completes the state set (hover / focus-visible /
	   disabled). De-emphasised + not-allowed, with no hover response. */
	&:disabled,
	&[disabled],
	&[aria-disabled='true'] {
		opacity: var(--ftps-disabled-opacity, 0.5);
		cursor: not-allowed;

		&:hover {
			background-color: var(--button-background-color);
			color: var(--button-text-color);
		}
	}

	/* ===== VARIANTS ===== */

	&.green {
		--button-background-color: var(--color-success-700);
		--button-hover-background-color: var(--color-success-800);
	}

	&.white {
		--button-background-color: var(--color-white);
		--button-hover-background-color: var(--color-primary-50);
		--button-text-color: var(--color-primary);
		--button-hover-text-color: var(--color-primary);
	}

	&.ghost {
		--button-background-color: transparent;
		--button-border-width: 1px;
		--button-hover-background-color: var(--color-primary-50);
		--button-text-color: var(--color-white);
		--button-hover-text-color: var(--color-white);
	}

	&.ghost-red {
		--button-background-color: transparent;
		--button-border-color: currentcolor;
		--button-border-width: 1px;
		--button-hover-background-color: var(--color-primary-50);
		--button-text-color: var(--color-primary);
	}

	&.accordion {
		--button-background-color: transparent;
		--button-border-color: var(--color-neutral-200);
		--button-border-radius: var(--border-radius);
		--button-border-width: 1px;
		--button-hover-background-color: transparent;
		--button-text-color: var(--color-text);
		--button-hover-text-color: var(--color-primary);

		align-items: center;
		display: flex;
		text-align: left;
		width: 100%;

		&::after {
			-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
			-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
			content: var(--icon-ftm-angle-down);
			font: var(--icon-font);
			margin-left: auto;
		}

		&.toggled::after {
			content: var(--icon-ftm-angle-up);
		}
	}
}

/* ===== ANCHOR BUTTONS INSIDE ENTRY CONTENT =====
   ftm-blocks elements.css colors entry-content links with the scheme link
   role — a.button/.woocommerce-Button anchors (Woo "View", "Browse products",
   added-to-cart forwards…) aren't block buttons, so they match its
   `.entry-content a:where(:not(.wp-element-button)…)` rule at (0,1,1), which
   beats the base `.button` color above at (0,1,0) → link-red text on the
   button fill. Restate the button text tokens at matching specificity; this
   sheet prints after elements.css (see ftm_buttons_after_ftm_blocks_elements),
   so ties resolve to the theme. */

a.button,
a.woocommerce-button,
a.woocommerce-Button {
	color: var(--button-text-color);

	&:hover {
		color: var(--button-hover-text-color);
	}

	&:focus-visible {
		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
		outline-offset: var(--button-focus-outline-offset);
		box-shadow: none;
	}
}

/* ===== NATIVE BUTTON RESET =====
   Brand CTA styling is opt-in (submit / .button / block-button), so plain
   <button> controls (toggles, icon buttons, tabs, steppers) no longer inherit
   it. Strip the user-agent chrome (native border + grey background) so those
   controls read as neutral — without colouring them. Kept at zero specificity
   via :where() so each control's own rules win effortlessly. */
button:where(:not([type="submit"], .button, .wp-element-button, .wp-block-button__link)) {
	appearance: none;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

.button.ghost a,
.button.ghost {
	background-color: var(--button-background-color);
	color: var(--button-text-color);

	&:hover,
	&:hover a {
		background-color: var(--button-text-color);
		color: var(--red-dark);
	}
}

/* ===== AUTHOR-PICKABLE BLOCK STYLES (§10) — scheme-aware =====
   Registered via includes/loader/register-components.php. They only re-map the
   --button-* tokens, so they inherit the base button's structure + states and
   recolor with the active scheme (which is why white/green are NOT here). */

/* Ghost — transparent with an accent outline; fills on hover. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	--button-background-color: transparent;
	--button-text-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-border-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-border-width: 1px;
	--button-hover-background-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-hover-text-color: var(--ftm-scheme-accent-text, var(--color-white));
}

/* Soft / Tonal — a light tint of the accent; quieter than Primary, still filled. */
.wp-block-button.is-style-soft .wp-block-button__link {
	--button-background-color: color-mix(in srgb, var(--ftm-scheme-accent, var(--color-primary)) 14%, transparent);
	--button-text-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-hover-background-color: color-mix(in srgb, var(--ftm-scheme-accent, var(--color-primary)) 24%, transparent);
	--button-hover-text-color: var(--ftm-scheme-accent, var(--color-primary));
}

/* Subtle / Quiet — accent text with a tint only on hover; keeps button padding
   (a low-emphasis button, distinct from Text link's link affordance). */
.wp-block-button.is-style-subtle .wp-block-button__link {
	--button-background-color: transparent;
	--button-text-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-hover-background-color: color-mix(in srgb, var(--ftm-scheme-accent, var(--color-primary)) 12%, transparent);
	--button-hover-text-color: var(--ftm-scheme-accent, var(--color-primary));
	--button-border-width: 0;
}

/* Danger / Destructive — the GLOBAL error role (red in every scheme, like
   validation), for delete / remove actions. */
.wp-block-button.is-style-danger .wp-block-button__link {
	--button-background-color: var(--color-error-600);
	--button-text-color: var(--color-white);
	--button-hover-background-color: var(--color-error-700);
	--button-hover-text-color: var(--color-white);
}

/* Text link — no chrome; reads as an inline link in the scheme's link color. */
.wp-block-button.is-style-link .wp-block-button__link {
	--button-background-color: transparent;
	--button-hover-background-color: transparent;
	--button-text-color: var(--ftm-scheme-link, var(--color-primary));
	--button-hover-text-color: var(--ftm-scheme-link, var(--color-primary));
	--button-border-width: 0;
	--button-border-radius: 0;
	--button-padding-top: 0;
	--button-padding-bottom: 0;
	--button-padding-left: 0;
	--button-padding-right: 0;

	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

/* Icon only — square/circular target for an icon glyph. The author must supply an
   accessible name (aria-label): there is no visible text label. */
.wp-block-button.is-style-icon .wp-block-button__link {
	--button-padding-top: var(--space-xsmall);
	--button-padding-bottom: var(--space-xsmall);
	--button-padding-left: var(--space-xsmall);
	--button-padding-right: var(--space-xsmall);
	--button-border-radius: 50%;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ftps-target-min, 44px);
	min-height: var(--ftps-target-min, 44px);
	aspect-ratio: 1;
}

/* ===== TOGGLE UTILITIES ===== */

.toggles-element-container {
	position: relative;
}

.toggles {
	transform-origin: top right;
	transition: transform 0.25s ease-out, opacity 0.25s ease-out 0.12s;
}

.toggled-off {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: -9999em;
	transform: scale(0);
	opacity: 0;
}

.toggled-on {
	visibility: visible;
	position: static;
	transform: scale(1);
	opacity: 1;
}