/*
 * Velur design-system foundation
 *
 * Canonical values come from VELUR-BRAND-AND-DESIGN-BOOK.md. New customer
 * interfaces must consume these tokens instead of introducing local copies.
 * Existing components migrate through explicit adapters, one tested surface at
 * a time, so this file does not become another global reset.
 */

:root {
	color-scheme: only light;

	/* Core colour architecture. */
	--vlr-ink: #1a1a1a;
	--vlr-text: #2c2c2c;
	--vlr-muted: #6b6b6b;
	--vlr-white: #ffffff;
	--vlr-mist: #f4f4f4;
	--vlr-line: #dedede;

	/* Editorial/status accents. Never use these as generic CTA fills. */
	--vlr-warm: #f8f6f3;
	--vlr-gold: #b8956a;
	--vlr-gold-ink: #8a6a3f;
	--vlr-positive: #4a7c59;
	--vlr-trustpilot: #00855a;

	/* Typography. */
	--vlr-font-ui: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vlr-font-display: "Cormorant Garamond", Georgia, serif;

	/* Layout and shape. */
	--vlr-content-max: 1320px;
	--vlr-page-gutter: clamp(20px, 4vw, 60px);
	--vlr-radius: 2px;
	--vlr-hairline: 1px;
	--vlr-touch-target: 44px;

	/* Motion: name the property being animated; never transition all. */
	--vlr-motion-fast: 160ms;
	--vlr-motion-base: 220ms;
	--vlr-ease-standard: cubic-bezier(0.2, 0, 0, 1);

	/* Shared button contract. */
	--vlr-button-height: 50px;
	--vlr-button-padding-inline: 24px;
	--vlr-button-font-size: 12px;
	--vlr-button-font-weight: 700;
	--vlr-button-letter-spacing: 0.14em;
}

/*
 * Button component and PDP adapter.
 *
 * `.vlr-button` is the public component API. The PDP selector is a temporary
 * legacy adapter because WooCommerce renders the variable-product CTA inside a
 * core hook. It must match the component exactly until that markup migrates.
 */
.vlr-button,
body.single-product .single-product-description-sec .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--vlr-touch-target);
	min-height: var(--vlr-button-height);
	padding: 0 var(--vlr-button-padding-inline);
	border: var(--vlr-hairline) solid transparent;
	border-radius: var(--vlr-radius);
	box-shadow: none;
	font-family: var(--vlr-font-ui);
	font-size: var(--vlr-button-font-size);
	font-weight: var(--vlr-button-font-weight);
	line-height: 1.25;
	letter-spacing: var(--vlr-button-letter-spacing);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--vlr-motion-fast) var(--vlr-ease-standard),
		border-color var(--vlr-motion-fast) var(--vlr-ease-standard),
		color var(--vlr-motion-fast) var(--vlr-ease-standard),
		opacity var(--vlr-motion-fast) var(--vlr-ease-standard);
}

.vlr-button--primary,
body.single-product .single-product-description-sec .single_add_to_cart_button {
	border-color: var(--vlr-ink);
	background: var(--vlr-ink);
	color: var(--vlr-white);
}

/*
 * Elementor keeps older PDP button rules in generated CSS and some of them use
 * `!important`. Keep that exception inside this temporary legacy bridge so the
 * public `.vlr-button` API remains clean and predictable everywhere else.
 */
body.single-product .single-product-description-sec button.single_add_to_cart_button.button {
	border-radius: var(--vlr-radius) !important;
	font-family: var(--vlr-font-ui) !important;
	font-size: var(--vlr-button-font-size) !important;
	font-weight: var(--vlr-button-font-weight) !important;
	line-height: 1.25 !important;
	letter-spacing: var(--vlr-button-letter-spacing) !important;
	transition:
		background-color var(--vlr-motion-fast) var(--vlr-ease-standard),
		border-color var(--vlr-motion-fast) var(--vlr-ease-standard),
		color var(--vlr-motion-fast) var(--vlr-ease-standard),
		opacity var(--vlr-motion-fast) var(--vlr-ease-standard) !important;
}

.vlr-button--secondary {
	border-color: var(--vlr-ink);
	background: var(--vlr-white);
	color: var(--vlr-ink);
}

.vlr-button--ghost {
	border-color: var(--vlr-white);
	background: transparent;
	color: var(--vlr-white);
}

.vlr-button--tertiary {
	min-height: var(--vlr-touch-target);
	padding-right: 0;
	padding-left: 0;
	border-color: transparent;
	border-radius: 0;
	background: transparent;
	color: var(--vlr-ink);
	text-decoration: underline;
	text-decoration-thickness: var(--vlr-hairline);
	text-underline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
	.vlr-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
	body.single-product .single-product-description-sec .single_add_to_cart_button:hover:not(:disabled):not([aria-disabled="true"]) {
		border-color: var(--vlr-text);
		background: var(--vlr-text);
		color: var(--vlr-white);
	}

	.vlr-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
		background: var(--vlr-ink);
		color: var(--vlr-white);
	}

	.vlr-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
		background: var(--vlr-white);
		color: var(--vlr-ink);
	}

	.vlr-button--tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
		color: var(--vlr-muted);
	}
}

.vlr-button:focus-visible,
body.single-product .single-product-description-sec .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--vlr-ink);
	outline-offset: 3px;
}

body.single-product .single-product-description-sec button.single_add_to_cart_button.button:focus-visible {
	outline: 2px solid var(--vlr-ink) !important;
	outline-offset: 3px !important;
}

.vlr-button--ghost:focus-visible {
	outline-color: var(--vlr-white);
}

.vlr-button:disabled,
.vlr-button[aria-disabled="true"],
body.single-product .single-product-description-sec .single_add_to_cart_button:disabled,
body.single-product .single-product-description-sec .single_add_to_cart_button[aria-disabled="true"] {
	border-color: var(--vlr-muted);
	background: var(--vlr-muted);
	color: var(--vlr-white);
	cursor: not-allowed;
	opacity: 0.72;
}

.vlr-button.is-busy,
body.single-product .single-product-description-sec .single_add_to_cart_button.is-loading {
	cursor: progress;
	opacity: 0.72;
}

/* Restore a visible keyboard focus indicator after legacy theme resets. */
html body :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--vlr-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vlr-button,
	body.single-product .single-product-description-sec .single_add_to_cart_button {
		transition: none;
	}

	body.single-product .single-product-description-sec button.single_add_to_cart_button.button {
		transition: none !important;
	}
}