/* Design tokens: the one place colour, type, space and shape are decided.
   A component reads these names; it never hard-codes a hex or a pixel gap. */
:root {
	/* Type */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-body);
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-lg: 1.1875rem;
	--fs-h3: clamp(1.125rem, 1.6vw, 1.35rem);
	--fs-h2: clamp(1.55rem, 2.6vw, 2.15rem);
	--fs-h1: clamp(2.2rem, 4.6vw, 3.5rem);
	--fs-display: clamp(2.6rem, 6vw, 4.35rem);
	--lh-tight: 1.14;
	--lh-body: 1.65;
	--tracking-label: 0.14em;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-bold: 650;

	/* Colour: graphite steel, one deep teal, one copper accent */
	--color-ink: #101820;
	--color-ink-soft: #3b4852;
	--color-muted: #67757f;
	--color-background: #ffffff;
	--color-surface: #f4f6f7;
	--color-surface-strong: #e8edef;
	--color-line: #dbe1e4;
	--color-accent: #0d5b62;
	--color-accent-dark: #094145;
	--color-accent-soft: #e7f0f1;
	--color-copper: #a8611f;
	--color-on-accent: #ffffff;
	--color-focus: #b55718;

	/* Space, container, shape */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 72px;
	--space-section: 88px;
	--space-gutter: clamp(20px, 5vw, 40px);
	--container: 1180px;
	--radius-control: 8px;
	--radius-card: 14px;
	--radius-pill: 999px;
	--border-hairline: 1px solid var(--color-line);
	--shadow-card: 0 1px 2px rgba(16, 24, 32, 0.05), 0 18px 34px -26px rgba(16, 24, 32, 0.4);
	--shadow-raised: 0 2px 4px rgba(16, 24, 32, 0.06), 0 26px 48px -28px rgba(16, 24, 32, 0.45);
}
@media (max-width: 760px) {
	:root {
		--space-section: 56px;
		--space-8: 48px;
	}
}