/*
 * Design tokens. One base unit (8px) for all spacing; one type scale
 * (base 17px x ~1.3) reused everywhere rather than ad-hoc sizes; a small
 * named palette chosen for this subject rather than inherited defaults --
 * see the brief in memory (feedback-visual-design-quality-gap.md) for why
 * that distinction matters for this build specifically.
 */

:root {
	/* ---- Color: cool clinical porcelain, not warm apothecary cream.
	   Amber is the color of the glass actives ship in, not a decorative
	   terracotta pick. Verdigris is the second, cooler accent reserved for
	   barrier / hydration content, so the two accents carry meaning. ---- */
	--st-ground:      #EEF1EE;
	--st-paper:       #E1E6E0;
	--st-paper-deep:  #D3D9D1;
	--st-ink:         #14181A;
	--st-ink-soft:    rgba(20, 24, 26, .64);
	--st-ink-faint:   rgba(20, 24, 26, .40);
	--st-amber:       #B2611C;
	--st-amber-deep:  #7E4212;
	--st-verdigris:   #3E6058;
	--st-verdigris-deep: #2A423C;
	--st-line:        rgba(20, 24, 26, .14);
	--st-line-strong: rgba(20, 24, 26, .28);

	/* ---- Type: one scale, base 17px x ~1.3, six steps ---- */
	--st-size-0: 1.0625rem;   /* 17px  body */
	--st-size-1: 1.375rem;    /* 22px  lead / nav */
	--st-size-2: 1.8125rem;   /* 29px  h4 / large label */
	--st-size-3: 2.3125rem;   /* 37px  h3 */
	--st-size-4: 3.9375rem;   /* 63px  h2, section headline */
	--st-size-5: 6.6875rem;   /* 107px hero -- used inside clamp() */

	--st-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--st-font-editorial: 'Newsreader', Georgia, serif;
	--st-font-body: 'Public Sans', -apple-system, sans-serif;
	--st-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* ---- Spacing: base 8px ---- */
	--st-space-1: .5rem;
	--st-space-2: 1rem;
	--st-space-3: 1.5rem;
	--st-space-4: 2rem;
	--st-space-6: 3rem;
	--st-space-8: 4rem;
	--st-space-12: 6rem;
	--st-space-16: 8rem;
	--st-space-24: 12rem;

	--st-container: 90rem;
	--st-measure: 62ch;
	--st-radius: 2px; /* sharp, architectural -- not rounded-lg */
}