/*
 * brand.css — token ALIAS layer (no hex literals).
 *
 * theme.json is the single source of truth for token VALUES. WordPress emits
 * --wp--preset--* and --wp--custom--* from it at runtime. This file maps those
 * to short, stable --wh-* aliases that every .whb-* component consumes. So a
 * per-site reskin only edits theme.json values — never this file or components.css.
 *
 * Per-site swap surface = theme.json palette/custom + inc/brand-config.php (GA4 id).
 */

:root {
	/* Brand colours */
	--wh-base:            var(--wp--preset--color--base);
	--wh-primary:         var(--wp--preset--color--primary);
	--wh-primary-dark:    var(--wp--preset--color--primary-dark);
	--wh-cta:             var(--wp--preset--color--cta);
	--wh-cta-shadow:      var(--wp--custom--shadow--cta);
	--wh-eyebrow:         var(--wp--preset--color--accent-eyebrow);

	/* On-dark (hero/section) */
	--wh-on-dark:         var(--wp--preset--color--on-dark-primary);
	--wh-on-dark-body:    var(--wp--preset--color--on-dark-body);
	--wh-on-dark-muted:   var(--wp--preset--color--on-dark-muted);

	/* Surfaces & text */
	--wh-card:            var(--wp--preset--color--card);
	--wh-card-border:     var(--wp--preset--color--card-border);
	--wh-text:            var(--wp--preset--color--text);
	--wh-text-heading:    var(--wp--preset--color--text-heading);
	--wh-text-muted:      var(--wp--preset--color--text-muted);

	/* Takeaway / warning callouts */
	--wh-takeaway:        var(--wp--preset--color--takeaway);
	--wh-takeaway-border: var(--wp--preset--color--takeaway-border);
	--wh-warning:         var(--wp--preset--color--warning);
	--wh-warning-border:  var(--wp--preset--color--warning-border);
	--wh-warning-text:    var(--wp--preset--color--warning-text);

	/* Price bands */
	--wh-price-budget:    var(--wp--custom--price-band--budget);
	--wh-price-mid:       var(--wp--custom--price-band--mid);
	--wh-price-premium:   var(--wp--custom--price-band--premium);

	/* Award chips */
	--wh-award-overall:   var(--wp--custom--award--overall);
	--wh-award-value:     var(--wp--custom--award--value);
	--wh-award-budget:    var(--wp--custom--award--budget);
	--wh-award-forx:      var(--wp--custom--award--forx);

	/* Shape & rhythm */
	--wh-radius-card:     var(--wp--custom--radius--card);
	--wh-radius-chip:     var(--wp--custom--radius--chip);
	--wh-space-flow:      var(--wp--custom--space--flow);
	--wh-space-section:   var(--wp--custom--space--section);

	/* Type */
	--wh-font-heading:    var(--wp--preset--font-family--heading);
	--wh-font-body:       var(--wp--preset--font-family--body);
}

/*
 * FALLBACK (documented): some performance plugins strip theme.json global
 * styles, which nulls every var(--wp--preset--*) above. If that happens on a
 * site, uncomment this block and paste the resolved hex values so the --wh-*
 * aliases still resolve. Keep the values in sync with theme.json.
 *
 * :root{
 *   --wh-primary:#1f5132; --wh-primary-dark:#143620; --wh-cta:#c2410c;
 *   --wh-cta-shadow:0 2px 0 0 #7c2d12; --wh-eyebrow:#0a7d4b;
 *   --wh-on-dark:#ffffff; --wh-on-dark-body:#e8f0ea; --wh-on-dark-muted:#b9ccc0;
 *   --wh-card:#ffffff; --wh-card-border:#e3e8e4; --wh-text:#1f2a24;
 *   --wh-text-heading:#13211a; --wh-text-muted:#5b6b62;
 *   --wh-takeaway:#eef7f1; --wh-takeaway-border:#bfe0cd;
 *   --wh-warning:#fff7ed; --wh-warning-border:#fed7aa; --wh-warning-text:#9a3412;
 *   --wh-price-budget:#2e7d32; --wh-price-mid:#b26a00; --wh-price-premium:#9a3412;
 *   --wh-radius-card:12px; --wh-radius-chip:999px;
 *   --wh-space-flow:1.25rem; --wh-space-section:3rem;
 *   --wh-font-heading:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 *   --wh-font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 * }
 */