:root {
	--hartwell-black: #1A1A1A;
	--hartwell-white: #FFFFFF;
	--hartwell-section-bg-dark: #F0ECE6;
	--hartwell-section-bg-light: #FAF9F7;
	--hartwell-product-backdrop: #BAB8A9;
	--hartwell-gold: #C9A227;
	--hartwell-testimonials-bg: #E4E3D9;
}

/* Supplement to Kadence's own color system, not a replacement for it. */

body {
	color: var(--hartwell-black);
}

/*
 * `body` prefix on .wp-block-button__link is load-bearing, not decorative:
 * Kadence's own global.min.css ships `button, .button, .wp-block-button__link,
 * .wp-element-button, input[type="button"], ...{ background: var(--global-palette-btn-bg) }`
 * (their accent blue) at the same (0,1,0) specificity as a bare
 * `.wp-block-button__link` here. That stylesheet is confirmed (see the
 * hartwell-type.css header comment on kadence-global-inline-css) to
 * print after this one, so on a tie it wins — the native Gutenberg Buttons
 * block rendered blue, not black/white, until this was added. The `body`
 * prefix bumps us to (0,1,1), same technique as `body .price` below in
 * hartwell-type.css, so this wins on specificity regardless of load
 * order, no !important needed.
 *
 * The `:visited` variant here is not redundant: Kadence's global.min.css also
 * ships `.wp-block-button__link:visited{ background: var(--global-palette-btn-bg) }`
 * at (0,2,0), which ties our plain (0,1,1) rule's specificity and wins on load
 * order for any placeholder `href="#"` link the browser already counts as
 * visited (e.g. it resolves to the current page's own URL). Browsers also
 * make `getComputedStyle()` lie and report the unvisited value for `:visited`
 * styles (a long-standing history-sniffing protection), so this class of bug
 * is invisible to any JS-based check — only a real screenshot shows it.
 * `body .wp-block-button__link:visited` is (0,2,1), safely ahead of Kadence's
 * (0,2,0) regardless of load order.
 */
body .wp-block-button__link,
body .wp-block-button__link:visited,
.kt-button,
button:not(.kt-slider-arrow, .kt-slider-dot, .testimonials__dot),
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--hartwell-black);
	color: var(--hartwell-white);
	border-color: var(--hartwell-black);
}

body .wp-block-button__link:hover,
.kt-button:hover,
button:not(.kt-slider-arrow, .kt-slider-dot, .testimonials__dot):hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--hartwell-white);
	color: var(--hartwell-black);
	border-color: var(--hartwell-black);
}

/*
 * WooCommerce buttons (incl. "Legg i handlekurv" / .single_add_to_cart_button) use an
 * .alt class that Kadence styles with var(--global-palette-btn-bg), which resolves to the
 * theme's accent blue. That selector — e.g. .woocommerce button.button.alt — has higher
 * CSS specificity than the generic rule above, so it wins regardless of stylesheet load
 * order. These button variants are also often <a> elements, which the generic rule above
 * never targets. Matching selectors + !important here is the reliable way to override it.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button {
	background-color: var(--hartwell-black) !important;
	color: var(--hartwell-white) !important;
	border-color: var(--hartwell-black) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--hartwell-white) !important;
	color: var(--hartwell-black) !important;
	border-color: var(--hartwell-black) !important;
}

/* Utility classes for alternating section backgrounds. */

.hartwell-section-bg-dark {
	background-color: var(--hartwell-section-bg-dark);
}

.hartwell-section-bg-light {
	background-color: var(--hartwell-section-bg-light);
}