/*
 * THE PAINT: every color, font, size, spacing, radius and shadow, in one place.
 * Style (Steve, 2026-10-19): "classic family dealer": brand navy + gold, warm cream, a classic serif for headings.
 * Change a value here and it changes everywhere. components.css uses only these variables.
 */

:root {
	/* Brand */
	--hb-navy:        #003a6d;   /* the brand navy (header, buttons, prices) */
	--hb-navy-deep:   #00274a;   /* top bar, footer */
	--hb-navy-soft:   #e6edf4;   /* light navy tint (badges, hovers) */
	--hb-gold:        #d3b574;   /* gold on dark backgrounds (lines, labels, menu hover) */
	--hb-gold-deep:   #87672a;   /* gold that is readable on cream/white */

	/* Neutrals */
	--hb-cream:       #faf6ee;   /* page background */
	--hb-cream-band:  #f3ecdf;   /* alternating sections, page title band */
	--hb-white:       #ffffff;   /* cards */
	--hb-line:        #e5dccb;   /* borders, dividers */
	--hb-ink:         #1d2733;   /* main text */
	--hb-muted:       #5b6571;   /* secondary text */
	--hb-on-dark:     #f5f1e8;   /* text on navy */
	--hb-on-dark-muted: #c3cdd8;

	/* Status */
	--hb-pending:     #a35a07;
	--hb-sold:        #6b7280;

	/* Type */
	--hb-font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--hb-font-body:    "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hb-text-base:    1.0625rem;                              /* 17px: easy to read */
	--hb-text-small:   0.9375rem;
	--hb-text-tiny:    0.8125rem;
	--hb-text-large:   1.25rem;
	--hb-text-h1:      clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	--hb-text-h2:      clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
	--hb-text-h3:      1.25rem;
	--hb-text-price:   clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	--hb-line-height:  1.65;
	--hb-label-spacing: 0.14em;                                 /* small caps labels ("SINCE 1970") */

	/* Space and shape */
	--hb-space-2xs: 0.25rem;
	--hb-space-xs:  0.5rem;
	--hb-space-s:   0.75rem;
	--hb-space-m:   1.25rem;
	--hb-space-l:   2rem;
	--hb-space-xl:  clamp(3rem, 2rem + 4vw, 5.5rem);            /* between page sections */
	--hb-gutter:    clamp(1rem, 0.5rem + 2.5vw, 2rem);          /* page side padding */
	--hb-width:     1240px;                                     /* page content width */
	--hb-width-text: 46rem;                                     /* comfortable reading width */
	--hb-radius:    10px;
	--hb-radius-s:  6px;
	--hb-shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .07);
	--hb-shadow-lift: 0 4px 10px rgba(16, 24, 40, .08), 0 18px 40px rgba(16, 24, 40, .12);
	--hb-card-min:  280px;                                      /* smallest car card width in grids */
	--hb-header-height: 84px;
	--hb-speed:     180ms;                                      /* hover/transition speed */
}