/* Poke Around Pittsburgh — design tokens.
 *
 * This is the single source of truth for color, type and spacing.
 * Change a value here and it changes everywhere on the site, including the
 * style guide at /style-guide. Nothing else in the theme should hard-code a
 * color or a size.
 *
 * SLATE SETTLED 21 Sep 2026: #22333B, Alesa's call. Six lighter steels were
 * compared first; she went the other way and chose the darkest. It is 18% light,
 * and below about 25% the eye stops registering blue-green — so this reads as a
 * near-black, not a steel. That is the intended look, not an oversight: the gold
 * and the caps wordmark carry the lift instead of the ground doing it.
 *
 * Contrast measured against WCAG:
 *   slate on white .......... 13.1:1   (passes everything)
 *   white on slate .......... 13.1:1
 *   gold on slate ............ 7.4:1   (passes everything — strongest accent)
 *   gold on slate-lift ....... 5.8:1   (button hover — still passes)
 *   light gray on slate ...... 8.2:1
 *   blue on white ............ 3.9:1   (large text and borders only)
 *   gold on white ............ 1.8:1   (decoration only — never text or a shape)
 */

:root {
	/* Color */
	--pap-slate: #22333B;
	--pap-slate-lift: #2E444E;
	--pap-blue: #4E86B8;
	--pap-gold: #F7B801;
	--pap-gray: #C9CDD3;
	/* A line a person has to SEE to find a control — the edge of a form field —
	   needs 3:1 against the page. The light gray above is 1.6:1, which is fine
	   for a decorative rule but not for that. Measured 21 Sep 2026. */
	--pap-gray-line: #8E959D;
	/* Small print still has to be readable: 4.6:1. The previous #8D969C was
	   3.0:1, which fails. Measured 21 Sep 2026. */
	--pap-gray-text: #6E767D;
	--pap-white: #FFFFFF;

	/* Type */
	--pap-body: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pap-display: "Fredoka", var(--pap-body);
	--pap-script: "Kalam", var(--pap-display);

	/* Sriracha, for "Poke". It ships ONE weight (400) — there is no bold, and
	   asking Google Fonts for 700 returns an error, not a heavier cut. So the
	   weight is added as an even outline instead; see .pap-lockup .poke. */
	--pap-hand: "Sriracha", var(--pap-script);
	--pap-hand-weight: 0.035em;

	--pap-size-lockup: clamp(38px, 8vw, 74px);
	--pap-size-h2: 30px;
	--pap-size-h3: 21px;
	--pap-size-lede: clamp(17px, 2.2vw, 21px);
	--pap-size-body: 17px;
	--pap-size-small: 14.5px;
	--pap-size-label: 12.5px;

	/* Spacing — a 4px step, so gaps line up instead of being guessed */
	--pap-space-1: 4px;
	--pap-space-2: 8px;
	--pap-space-3: 12px;
	--pap-space-4: 16px;
	--pap-space-5: 24px;
	--pap-space-6: 32px;
	--pap-space-7: 48px;
	--pap-space-8: 64px;

	/* Shape */
	--pap-radius-pill: 999px;
	--pap-radius-box: 14px;
	--pap-border: 1.5px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pap-white);
	color: var(--pap-slate);
	font-family: var(--pap-body);
	font-size: var(--pap-size-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}