/**
 * HouseBro Global Design Tokens
 *
 * CSS custom properties mirroring DESIGN_SYSTEM.md Sections 2 (Color System)
 * and 4 (Spacing System). These are the fallback/reference source for any
 * custom code — Elementor widgets should use Elementor's own Global Colors
 * and Global Fonts (configured in wp-admin, see the manual steps list),
 * not these variables directly. This file exists so custom-coded sections
 * (functions.php output, future custom blocks) have the same values
 * available without duplicating hex codes ad hoc.
 *
 * Do not edit these values without updating DESIGN_SYSTEM.md first —
 * this file must always mirror that document, never diverge from it.
 */

:root {
	/* Color System — DESIGN_SYSTEM.md Section 2 */
	--hb-color-ink: #1C1C1E;
	--hb-color-brass: #9C7A3C;
	--hb-color-marble-white: #FAF7F2;
	--hb-color-stone-grey: #6B6B70;
	--hb-color-divider: #E5E1DA;
	--hb-color-success-green: #2E7D46;
	--hb-color-error: #B3261E;
	--hb-color-whatsapp-green: #25D366;

	/* Official HouseBro brand colours — from the FINAL APPROVED logo
	   artwork, whose own palette strip declares them. Both APPROVED
	   2026-08-26.

	   DESIGN_SYSTEM.md Section 2 does not list these yet. It is the
	   authority for the Color System block above and this file must mirror
	   it, so these sit in their own block until that document is updated —
	   a doc-sync task, not a licence to diverge.

	   hb-brand-green is the brand green. It is the ONLY green permitted for
	   brand use. The two greens above it are functional, not brand, and
	   neither is a substitute: hb-color-success-green is a success state,
	   hb-color-whatsapp-green is WhatsApp's own colour and is fixed by
	   them. Do not add a fourth.

	   hb-brand-gold (#C89D3C) is lighter and more saturated than
	   hb-color-brass (#9C7A3C), and the two must never appear inside one
	   logo lockup — at wordmark size the difference reads as a rendering
	   fault. The brand mark and the wordmark's "Bro" take this gold; brass
	   keeps every other use on the site, where no artwork gold is beside
	   it to clash with. */
	--hb-brand-green: #0F4D3A;
	--hb-brand-gold: #C89D3C;

	/* Spacing System — DESIGN_SYSTEM.md Section 4 (8px base scale) */
	--hb-space-4: 4px;
	--hb-space-8: 8px;
	--hb-space-16: 16px;
	--hb-space-24: 24px;
	--hb-space-32: 32px;
	--hb-space-48: 48px;
	--hb-space-64: 64px;
	--hb-space-96: 96px;
	--hb-space-128: 128px;

	/* Border Radius — DESIGN_SYSTEM.md Section 11 */
	--hb-radius-button: 8px;
	--hb-radius-card: 12px;
	--hb-radius-pill: 999px;
	/* Batch 8 (2026-07-12) addition, not a change to the locked
	   DESIGN_SYSTEM.md values above — a softer, larger radius used
	   specifically for premium card treatments (Service Cards, Pricing
	   Cards) via .hb-card, distinct from the smaller button/base-card
	   radius so cards read as a deliberately softer shape than buttons. */
	--hb-radius-card-lg: 20px;

	/* Shadows — DESIGN_SYSTEM.md Section 10 */
	--hb-shadow-resting: 0 1px 3px rgba(28, 28, 30, 0.06);
	--hb-shadow-elevated: 0 4px 12px rgba(28, 28, 30, 0.10);
	--hb-shadow-overlay: 0 12px 32px rgba(28, 28, 30, 0.16);
	/* Batch 8 additions — softer, more diffused "floating" shadows for
	   premium card hover states, on top of the locked shadow scale above. */
	--hb-shadow-premium-resting: 0 2px 8px rgba(28, 28, 30, 0.05);
	--hb-shadow-premium-hover: 0 20px 48px rgba(28, 28, 30, 0.14);

	/* Motion — DESIGN_SYSTEM.md Section 13 (smooth and subtle only) */
	--hb-transition-duration: 200ms;
	--hb-transition-easing: ease-in-out;

	/* Typography — DESIGN_SYSTEM.md Section 3 (mobile sizes; desktop
	   overrides below at the 1024px breakpoint). Inter, 3 weights only
	   (400/600/700) — never load a 4th weight or second typeface. */
	--hb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--hb-font-size-h1: 1.75rem;
	--hb-font-size-h2: 1.5rem;
	--hb-font-size-h3: 1.25rem;
	--hb-font-size-h4: 1.125rem;
	--hb-font-size-body: 1rem;
	--hb-font-size-small: 0.875rem;
	--hb-font-size-button: 1rem;
	--hb-line-height-h1: 1.2;
	--hb-line-height-h2: 1.25;
	--hb-line-height-h3: 1.3;
	--hb-line-height-h4: 1.35;
	--hb-line-height-body: 1.6;
	--hb-line-height-small: 1.5;
}

@media (min-width: 1024px) {
	:root {
		--hb-font-size-h1: 2.75rem;
		--hb-font-size-h2: 2rem;
		--hb-font-size-h3: 1.5rem;
		--hb-font-size-h4: 1.25rem;
		--hb-font-size-body: 1.0625rem;
	}
}