/* brewing.com — design tokens + base elements. See design_handoff README for source values. */

:root {
	/* Color */
	--cream: #F6F0E4;
	--parchment: #EDE4D3;
	--paper: #FFFDF8;
	--line: #DCD2BF;
	--input-border: #B8AC94;
	--charcoal: #26231F;
	--ash: #6B655B;
	--copper: #B5651D;
	--copper-hover: #9A5416;
	--hop-green: #4F6B4A;
	--hop-green-hover: #3F573B;
	--green-tint: #E4EAE0;
	--green-text: #3F573B;

	--cat-beer: #B5651D;
	--cat-coffee: #7A4B2A;
	--cat-tea: #4F6B4A;
	--cat-kombucha: #8A7A2E;
	--cat-wine: #7B3B4B;

	/* Type */
	--font-display: 'Lora', Georgia, 'Times New Roman', serif;
	--font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--fs-display: 52px;
	--fs-section: 30px;
	--fs-section-sm: 26px;
	--fs-card-title: 20px;
	--fs-card-sm: 19px;
	--fs-body: 17px;
	--fs-ui: 15px;
	--fs-meta: 14px;
	--fs-eyebrow: 12px;
	--fs-label: 11px;

	/* Spacing */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
	--content-max: 1200px;
	--sidebar-w: 300px;

	/* Shape */
	--radius: 4px;
	--radius-pill: 999px;
}

@media (max-width: 768px) {
	:root {
		--fs-display: 36px;
		--fs-section: 24px;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--charcoal);
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-section); line-height: 1.2; }
h3 { font-size: var(--fs-card-title); line-height: 1.3; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

hr, .brewing-rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* Content width utility */
.brewing-container { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--sp-5); }
@media (max-width: 768px) { .brewing-container { padding-inline: var(--sp-4); } }

.brewing-section { padding-block: var(--sp-7) var(--sp-7); border-top: 1px solid var(--line); }
.brewing-section:first-child { border-top: none; }
@media (max-width: 768px) { .brewing-section { padding-block: var(--sp-6); } }
.brewing-section-gray { background: var(--parchment); }
.brewing-section-amber { background: var(--green-tint); }

/* Focus: always visible, 2px offset, color depends on the surface behind it. */
:focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 2px;
}
.brewing-btn--commerce:focus-visible,
[data-surface="charcoal"] :focus-visible { outline-color: var(--paper); }
[data-surface="green"] :focus-visible,
.brewing-finder :focus-visible { outline-color: var(--hop-green); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}