/* Design tokens
 * Colors + type: reskinned 2026-08-31 to match the "Jobsite Precision"
 * design system from the React demo (demo.alexremod.com / project
 * AlexsRemod/website/tailwind.config.js) — same palette, same three
 * Google-Fonts families. Font sizes are that system's scale plus an
 * explicit ~15% size increase on top (client request, 2026-08-31) —
 * they are intentionally larger than the demo's own type scale.
 * Space/grid/radius/motion tokens are unchanged from the original
 * design_handoff_alexs_remod_site/DESIGN-TOKENS.md — the demo has no
 * equivalents for those, so there was nothing to reconcile.
 */

:root {
	/* Color — matches the demo's 5-color palette (primary/secondary/
	   tertiary/canvas/divider) exactly. --color-accent keeps a distinct,
	   darker hover shade rather than duplicating --color-primary, since
	   the existing CSS relies on primary/accent being different colors
	   for hover and light/dark-section eyebrow states — the demo itself
	   doesn't define a hover shade to copy, so this one is derived, not
	   sourced. Everything else below (frame-rule, muted-dark, meta-dark,
	   legal-dark, card-dark, tint) has no demo equivalent and is left as
	   it was. */
	--color-primary: #D64500;    /* fills only — never text on white */
	--color-accent: #B23900;     /* links/accents on white, primary-hover fill */
	--color-ink: #14181F;
	--color-dark: #14181F;
	--color-card-dark: #1F1F1F;
	--color-tint: #F6F6F5;
	--color-line: #D8DBDF;
	--color-frame-rule: #B4B4B4;
	--color-muted: #5B6B7C;
	--color-muted-dark: #C9C9C9;
	--color-meta-dark: #A8A8A8;
	--color-legal-dark: #8A8A8A;
	--color-canvas: #F4F5F6;
	--color-white: #FFFFFF;

	/* Radius / borders */
	--radius: 2px;
	--border-hairline: 1px;
	--border-rule: 2px;
	--border-rule-accent: 3px;

	/* Type — same three families as the demo (loaded via Google Fonts,
	   see functions.php). --font-label is new: the demo uses a distinct
	   monospace face for eyebrows/uppercase labels that this theme
	   didn't previously have a token for. */
	--font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Sizes: demo's Tailwind default scale (text-4xl..text-6xl for h1 etc.)
	   scaled up ~15% per the explicit "make the fonts larger" request. */
	--fs-h1: clamp(41px, 5.3vw, 76px);
	--lh-h1: 1.03;
	--ls-h1: -0.028em;

	--fs-h2: clamp(32px, 3.3vw, 48px);
	--lh-h2: 1.10;
	--ls-h2: -0.022em;

	--fs-h3: 23px;
	--lh-h3: 1.25;

	--fs-eyebrow: 13px;
	--ls-eyebrow: 0.20em;

	--fs-body: 20px;
	--lh-body: 1.65;
	--fs-body-floor: 18px;

	--fs-small: 17px;
	--lh-small: 1.6;

	--fs-caption: 16px;
	--lh-caption: 1.5;

	--fs-micro: 13px;

	--fs-button: 18px;

	/* Space (4px scale) */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-44: 44px;
	--space-56: 56px;
	--space-76: 76px;
	--space-92: 92px;
	--space-120: 120px;

	/* Grid */
	--container-max: 1200px;
	--gutter-desktop: 120px;
	--gutter-tablet: 56px;
	--gutter-mobile: 20px;

	/* Motion */
	--transition-fast: 150ms ease-out;

	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
	}
}