/*
 * Grey Giant design tokens.
 * Reskin the theme by editing this file. Fluid values are exact at the two
 * design widths (390px mobile, 1440px desktop) and interpolate between.
 * Generated sizes: --name: clamp(min, mobile + (100vw - 390px) * slope, max).
 */

:root {
	/* Color */
	--bg: #f3f2ee;
	--surface: #fafaf7;
	--line: #d6d6cf;
	--line-strong: #b9bdb6;
	--grid: #e8e7e1;
	--text: #16181a;
	--body: #2f3633;
	--prose: #2a302d;
	--muted: #4a514d;
	--subtle: #5d6560;
	--accent: #1f4a2c;
	--accent-hover: #123019;
	--accent-halo: rgba(31, 74, 44, 0.16);
	--on-accent: #ffffff;
	--field: #ffffff;
	--placeholder: #d4d8d3;
	--media-bg: #3a3d3a;

	/* Type */
	--font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Shape */
	--radius-sm: 6px;
	--radius: 8px;
	--radius-lg: 10px;
	--frame-max: 1280px;
	--grid-size: 40px;
	--col-gap: 24px;

	/* Fluid scale */
	--fs-display: clamp(44px, calc(44px + (100vw - 390px) * 0.03810), 84px);
	--fs-page: clamp(44px, calc(44px + (100vw - 390px) * 0.03048), 76px);
	--fs-page-sm: clamp(42px, calc(42px + (100vw - 390px) * 0.03238), 76px);
	--fs-article: clamp(34px, calc(34px + (100vw - 390px) * 0.02476), 60px);
	--fs-section: clamp(34px, calc(34px + (100vw - 390px) * 0.01714), 52px);
	--fs-section-lg: clamp(36px, calc(36px + (100vw - 390px) * 0.01524), 52px);
	--fs-section-sm: clamp(32px, calc(32px + (100vw - 390px) * 0.01905), 52px);
	--fs-contact: clamp(38px, calc(38px + (100vw - 390px) * 0.02095), 60px);
	--fs-quote: clamp(23px, calc(23px + (100vw - 390px) * 0.01238), 36px);
	--fs-statement: clamp(26px, calc(26px + (100vw - 390px) * 0.01714), 44px);
	--fs-card-title: clamp(24px, calc(24px + (100vw - 390px) * 0.00381), 28px);
	--fs-feature: clamp(24px, calc(24px + (100vw - 390px) * 0.01143), 36px);
	--fs-row-title: clamp(19px, calc(19px + (100vw - 390px) * 0.00286), 22px);
	--fs-next: clamp(21px, calc(21px + (100vw - 390px) * 0.00857), 30px);
	--fs-cta-title: clamp(22px, calc(22px + (100vw - 390px) * 0.00381), 26px);
	--fs-specialty: clamp(18px, calc(18px + (100vw - 390px) * 0.00381), 22px);
	--fs-prose: clamp(17px, calc(17px + (100vw - 390px) * 0.00095), 18px);
	--fs-prose-h2: clamp(24px, calc(24px + (100vw - 390px) * 0.00571), 30px);
	--fs-lede: clamp(17px, calc(17px + (100vw - 390px) * 0.00286), 20px);
	--fs-lede-page: clamp(17px, calc(17px + (100vw - 390px) * 0.00095), 18px);
	--fs-standfirst: clamp(18px, calc(18px + (100vw - 390px) * 0.00286), 21px);
	--fs-eyebrow: clamp(12px, calc(12px + (100vw - 390px) * 0.00095), 13px);
	--fs-stat: clamp(24px, calc(24px + (100vw - 390px) * 0.00571), 30px);
	--fs-btn: clamp(15px, calc(16px + (100vw - 390px) * -0.00095), 16px);
	--gutter: clamp(20px, calc(20px + (100vw - 390px) * 0.01905), 40px);
	--sec-y: clamp(48px, calc(48px + (100vw - 390px) * 0.03048), 80px);
	--head-top: clamp(48px, calc(48px + (100vw - 390px) * 0.02286), 72px);
	--head-bottom: clamp(28px, calc(28px + (100vw - 390px) * 0.01143), 40px);
	--hero-top: clamp(40px, calc(40px + (100vw - 390px) * 0.06667), 110px);
	--hero-bottom: clamp(48px, calc(48px + (100vw - 390px) * 0.04952), 100px);
	--hero-gap: clamp(24px, calc(24px + (100vw - 390px) * 0.00762), 32px);
	--page-top: clamp(40px, calc(40px + (100vw - 390px) * 0.05333), 96px);
	--page-bottom: clamp(48px, calc(48px + (100vw - 390px) * 0.03048), 80px);
	--page-gap: clamp(22px, calc(22px + (100vw - 390px) * 0.00571), 28px);
	--article-top: clamp(32px, calc(32px + (100vw - 390px) * 0.03810), 72px);
	--article-bottom: clamp(48px, calc(48px + (100vw - 390px) * 0.04571), 96px);
	--card-pad-y: clamp(28px, calc(28px + (100vw - 390px) * 0.01143), 40px);
	--card-pad-x: clamp(20px, calc(20px + (100vw - 390px) * 0.01905), 40px);
	--form-pad: clamp(20px, calc(20px + (100vw - 390px) * 0.01143), 32px);
	--form-pad-lg: clamp(20px, calc(20px + (100vw - 390px) * 0.01524), 36px);
	--cta-pad: clamp(24px, calc(24px + (100vw - 390px) * 0.01143), 36px);
	--footer-top: clamp(40px, calc(40px + (100vw - 390px) * 0.01524), 56px);
	--footer-bottom: clamp(28px, calc(28px + (100vw - 390px) * 0.00381), 32px);
}