/*
 * Design tokens — single source for the store's visual system (reference-analysis.md § 9, D-021).
 *
 * WHERE TO CHANGE BRANDING
 *  1. WoodMart → Theme Settings: primary colour (accent), secondary colour (stars), fonts, buttons, labels,
 *     body background. WoodMart exposes these as --wd-* variables; the --hg-* aliases below follow them.
 *  2. This file: only the values WoodMart has no setting for (marked "not in Theme Settings").
 *     Keep --hg-color-bg in sync with Theme Settings → Colors → Body background.
 */
:root {
	/* ── From Theme Settings (do not hard-code here) ─────────────────── */
	--hg-color-accent: var(--wd-primary-color);       /* #8f826b taupe-gold */
	--hg-color-accent-strong: color-mix(in srgb, var(--hg-color-accent) 78%, #000); /* white text on it ≥ 4.5:1 */
	--hg-color-star: var(--wd-alternative-color);     /* #d8bc34 */
	--hg-color-text: var(--wd-text-color);            /* #000 */
	--hg-font-body: var(--wd-text-font);              /* Nunito Sans */
	--hg-font-heading: var(--wd-title-font);          /* Poppins */

	/* ── Not in Theme Settings ──────────────────────────────────────── */
	--hg-color-bg: #f3efec;          /* page background (= Theme Settings body background) */
	--hg-color-surface: #e1dcd8;     /* header band, title band, section backgrounds */
	--hg-color-surface-2: #ece7e3;   /* subtle fills (inputs, pills) */
	--hg-color-white: #ffffff;
	--hg-color-dark: #121212;        /* dark product cards */
	--hg-color-muted: #5f5f5f;       /* meta lines (≥ 4.5:1 on the page background) */
	--hg-color-strike: #6b6b6b;      /* struck-through compare price (≥ 4.5:1) */
	--hg-color-border: #d4cec9;      /* hairlines */
	--hg-color-sale: #efb34c;        /* "Sale" pill on cards */
	--hg-color-hot: #f44848;         /* hot/sale on carousels */
	--hg-color-soldout: #c41a1a;     /* "Sold out" (darkened from #e22120 for contrast) */
	--hg-color-success: #17733f;     /* "Extra 10% off on prepaid" tag (darkened for white-text contrast) */
	--hg-color-coupon: #8a5236;      /* coupon text in marquee (darkened from reference #a56748 for contrast) */

	--hg-radius-card: 10px;          /* images, cards, boxes */
	--hg-radius-btn: 6px;            /* buttons */
	--hg-radius-pill: 999px;         /* badges, rating pill, quantity */

	--hg-btn-height: 42px;
	--hg-fs-body: 14px;
	--hg-fs-meta: 12px;
	--hg-fs-badge: 10px;
	--hg-fs-price: 14px;
	--hg-fs-price-pdp: 24px;
	--hg-fs-section-title: clamp(22px, 1.6vw + 14px, 28px);
	--hg-fs-pdp-title: clamp(18px, 0.5vw + 16px, 20px);

	--hg-space-section: clamp(40px, 5vw, 64px);
	--hg-gutter: 16px;

}

/* ── WoodMart variable overrides ──────────────────────────────────────
 * WoodMart prints its Theme Settings CSS (:root { … }) after this file, so these use :root:root
 * (higher specificity) to win. Only design-system values live here — colours stay in Theme Settings. */
:root:root {
	--wd-brd-radius: var(--hg-radius-card);
	--btn-transform: uppercase;
	--wd-form-brd-radius: var(--hg-radius-btn);
}