/* Harlow Gardens design tokens.
   Every widget reads from these. Change a value here and the whole pack follows. */

:root {
	/* Brand */
	--hg-green:        #3C4D31;  /* primary: text, dark surfaces, solid buttons on light */
	--hg-green-deep:   #2B3823;  /* hover / pressed on green */
	--hg-green-soft:   #E7EBE2;  /* tinted fills, icon discs on light */
	--hg-gold:         #EDDA8E;  /* secondary: accents on green only, never text on light */
	--hg-gold-deep:    #7A6524;  /* gold-family text that must sit on light surfaces (AA) */

	/* Neutrals */
	--hg-cream:        #FAF7EE;
	--hg-white:        #FFFFFF;
	--hg-ink:          #1F261A;
	--hg-muted:        #4F5A47;
	--hg-line:         #E3DFD2;
	--hg-line-dark:    rgba(237, 218, 142, 0.22);

	/* Type */
	--hg-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--hg-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hg-size-eyebrow: 0.8125rem;
	--hg-size-body:    1.0625rem;
	--hg-size-lead:    clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	--hg-size-h2:      clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
	--hg-size-h3:      clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	--hg-size-item:    1.125rem;

	/* Space (8pt scale) */
	--hg-space-1: 0.5rem;
	--hg-space-2: 1rem;
	--hg-space-3: 1.5rem;
	--hg-space-4: 2rem;
	--hg-space-5: 3rem;
	--hg-space-6: 4rem;
	--hg-section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
	--hg-gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--hg-max:       1200px;

	/* Shape + motion */
	--hg-radius:    14px;
	--hg-radius-sm: 8px;
	--hg-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
}