/* HHD Shop — design tokens (Horse & Home Decoration brand palette).
 * Single source of truth voor de shop-plugin frontend.
 * Aligned with HHD brand designs (02-decoratie-overview.html, 02-tuinbeelden-overview.html).
 */
:root {
	/* Brand primaries — HHD brand palette */
	--hhd-gold:        #B8924E;
	--hhd-gold-dark:   #8F7038;
	--hhd-gold-soft:   #D4B57A;
	--hhd-cream:       #F5F0E8;
	--hhd-cream-soft:  #EFE7DA;
	--hhd-charcoal:    #1F1D1A;
	--hhd-charcoal-soft: #2B2825;
	--hhd-line:        #D9CFBE;
	--hhd-line-dark:   #3A352F;
	--hhd-forest:      #1F1D1A; /* legacy alias — points to charcoal now */
	--hhd-white:       #FFFFFF;
	--hhd-off-white:   #FAF6EF;

	/* Text */
	--hhd-text:        #2B2825;
	--hhd-text-dark:   #1F1D1A;
	--hhd-text-muted:  #5C534A;
	--hhd-ink:         #2B2825;
	--hhd-ink-soft:    #5C534A;

	/* States */
	--hhd-error:         #A02A2A;
	--hhd-error-soft:    #FBE0E0;
	--hhd-success:       #366E26;
	--hhd-success-soft:  #E2F0DD;
	--hhd-warning:       #6F5A1C;
	--hhd-warning-soft:  #FAEFCC;

	/* Semantic */
	--hhd-primary:    var(--hhd-gold);
	--hhd-secondary:  var(--hhd-forest);
	--hhd-accent:     var(--hhd-gold);

	/* Border / surfaces — aligned with HHD line tokens */
	--hhd-border:         var(--hhd-line);
	--hhd-border-strong:  var(--hhd-charcoal);
	--hhd-surface:        var(--hhd-cream);          /* was white — HHD pages use cream as default surface */
	--hhd-surface-soft:   var(--hhd-cream-soft);
	--hhd-surface-warm:   var(--hhd-cream);
	--hhd-shadow-sm:      0 1px 2px rgba(31, 29, 26, 0.06);
	--hhd-shadow-md:      0 6px 18px rgba(31, 29, 26, 0.10);

	/* Typography — HHD brand fonts (Fraunces serif, DM Sans body, JetBrains Mono numbers) */
	--hhd-font-heading: 'Fraunces', Georgia, 'Cormorant Garamond', 'Times New Roman', serif;
	--hhd-font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--hhd-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
	--hhd-serif:        var(--hhd-font-heading);
	--hhd-sans:         var(--hhd-font-body);
	--hhd-mono:         var(--hhd-font-mono);

	/* Radius — square-ish per HHD brand (4px small, 12px larger surfaces, 999px pills) */
	--hhd-radius-sm: 4px;
	--hhd-radius:    4px;
	--hhd-radius-lg: 12px;
	--hhd-radius-pill: 999px;

	/* Spacing scale */
	--hhd-space-1: 4px;
	--hhd-space-2: 8px;
	--hhd-space-3: 12px;
	--hhd-space-4: 16px;
	--hhd-space-5: 24px;
	--hhd-space-6: 32px;

	/* Transitions */
	--hhd-transition:        200ms ease;
	--hhd-transition-fast:   120ms ease;
	--hhd-transition-spring: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Focus states — HHD gold ring */
	--hhd-focus-ring:        0 0 0 2px rgba(184, 146, 78, 0.45);
	--hhd-focus-ring-offset: 0 0 0 2px var(--hhd-cream);

	/* Extended shadows */
	--hhd-shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.04);
	--hhd-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.12);
	--hhd-shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.15);

	/* Backdrop effects */
	--hhd-backdrop-blur: blur(8px);

	/* Drawer sizing */
	--hhd-drawer-width:   min(85vw, 360px);
	--hhd-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}