/*
 * Hauseit Spacing System
 * 8px-base modular scale. All margin/padding values should reference
 * these variables. Non-scale values (e.g. 18px, 22px) are off-grid
 * and should be replaced with the nearest scale value.
 */

/* ── SPACING SCALE ──────────────────────────────────────────────────────── */

:root {
	--space-1:  4px;    /* hairline */
	--space-2:  8px;    /* tight — list items, icon gaps */
	--space-3:  12px;   /* input padding, inline gaps */
	--space-4:  16px;   /* standard — paragraph gap, field gap */
	--space-5:  24px;   /* breathing — heading-to-body gap */
	--space-6:  32px;   /* comfortable — card padding */
	--space-7:  48px;   /* spacious — section internal */
	--space-8:  64px;   /* generous — between elements */
	--space-9:  80px;   /* large — between sections (mobile) */
	--space-10: 96px;   /* between sections (desktop) */
	--space-11: 128px;  /* major page sections */
	--space-12: 160px;  /* hero / large breaks */
}


/* ── SECTION RHYTHM CLASSES ─────────────────────────────────────────────── */

/*
 * Apply these classes on section elements to enforce consistent
 * vertical rhythm across page templates.
 */

/* Hero band */
.section--hero {
	padding: var(--space-12) 0;
}

/* Standard editorial section */
.section--standard {
	padding: var(--space-10) 0;
}

/* Compact section — proof bars, stats, testimonials */
.section--compact {
	padding: var(--space-8) 0;
}

/* CTA band — full-bleed coloured band */
.section--cta {
	padding: var(--space-9) 0;
}

@media (max-width: 768px) {
	.section--hero     { padding: calc(var(--space-12) * 0.6) 0; }
	.section--standard { padding: calc(var(--space-10) * 0.625) 0; }
	.section--compact  { padding: calc(var(--space-8)  * 0.75)  0; }
	.section--cta      { padding: calc(var(--space-9)  * 0.625) 0; }
}


/* ── COMPONENT SPACING STANDARDS ────────────────────────────────────────── */

/*
 * Document the standard spacing decisions for common components.
 * Not applied globally — reference when building new components.
 *
 * Stacked headlines:      gap: var(--space-3)   (12px)
 * Heading to body:        gap: var(--space-5)   (24px)
 * Body paragraph stack:   gap: var(--space-4)   (16px)
 * List item stack:        gap: var(--space-2)   (8px)
 * Button padding:         var(--space-4) var(--space-6) (16px/32px)
 * Form field stack:       gap: var(--space-5)   (24px)
 * Card padding:           var(--space-6)        (32px)
 * Card gap in grid:       var(--space-6)        (32px)
 */