:root {
	/* Brand colors — provisional palette (see README.md). */
	--sss-ink: #0A1423;
	--sss-navy: #12263F;
	--sss-blue: #176BFF;
	--sss-cyan: #47B7C8;
	--sss-slate: #566579;
	--sss-cloud: #F3F6F9;
	--sss-line: #D8E0E8;
	--sss-white: #FFFFFF;
	--sss-success: #1F7A5A;

	/* Typography. */
	--sss-font-heading: 'Sora', sans-serif;
	--sss-font-body: 'Source Sans 3', sans-serif;
	--sss-font-mono: 'IBM Plex Mono', monospace;

	/* Spacing scale. */
	--sss-space-1: 0.25rem;
	--sss-space-2: 0.5rem;
	--sss-space-3: 1rem;
	--sss-space-4: 1.5rem;
	--sss-space-5: 2.5rem;
	--sss-space-6: 4rem;
	--sss-space-7: 6rem;

	/* Shape. */
	--sss-radius-sm: 4px;
	--sss-radius-md: 8px;
	--sss-radius-lg: 12px;
	--sss-border-width: 1px;

	/* Layout. */
	--sss-container-max: 1440px;
	--sss-content-max: 720px;

	/* Content widths — not every section should share one width. */
	--sss-content-wide: 1360px;
	--sss-content-default: 1180px;
	--sss-content-reading: 720px;

	/* Gutters. */
	--sss-gutter-desktop: 40px;
	--sss-gutter-tablet: 28px;
	--sss-gutter-mobile: 20px;

	/* Section spacing. */
	--sss-section-compact: 64px;
	--sss-section-standard: 96px;
	--sss-section-major: 112px;

	/* Elevation. */
	--sss-shadow-sm: 0 1px 2px rgba(10, 20, 35, 0.08);
	--sss-shadow-md: 0 4px 16px rgba(10, 20, 35, 0.12);
}

/* Section-spacing tokens scaled down for mobile — redefining the custom
   properties here (rather than overriding padding-block on every section
   that uses them) cascades to every rule built on top of them. Without
   this, sections kept their full 64–112px desktop padding-block on phones,
   reading as oversized empty gaps between sections. */
@media (max-width: 767px) {
	:root {
		--sss-section-compact: 40px;
		--sss-section-standard: 56px;
		--sss-section-major: 64px;
	}
}