/* Design tokens — mirrors the measured reference system. */

:root {
	/* Palette */
	--cf-ink: #252427;
	--cf-ink-70: rgba(37, 36, 39, 0.7);
	--cf-ink-45: rgba(37, 36, 39, 0.45);
	--cf-ink-12: rgba(37, 36, 39, 0.12);
	--cf-bg: #ffffff;
	--cf-bg-soft: #f5f4f1;
	--cf-bg-dark: #252427;
	--cf-bar: #1a1a1a;
	--cf-accent: #bb243e;
	--cf-accent-ink: #ffffff;
	--cf-line: rgba(37, 36, 39, 0.14);

	/* Typography scale */
	--cf-font: "Hooma Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cf-fs-h1: 36px;
	--cf-fs-h2: 48px;
	--cf-fs-h3: 24px;
	--cf-fs-body: 16px;
	--cf-fs-sm: 14px;
	--cf-fs-xs: 12px;
	--cf-fs-price: 20px;

	--cf-lh-h1: 43.2px;
	--cf-lh-h2: 52.8px;
	--cf-lh-body: 25.6px;

	--cf-ls-h1: -0.72px;
	--cf-ls-h2: -0.96px;
	--cf-ls-body: -0.32px;

	--cf-fw-body: 500;
	--cf-fw-mid: 600;
	--cf-fw-bold: 700;

	/* Structure */
	--cf-container: 1328.8px;
	--cf-gutter: 24px;
	--cf-grid-gap-x: 24px;
	--cf-grid-gap-y: 48px;
	--cf-bar-h: 48px;
	--cf-header-h: 89px;

	/* Shape */
	--cf-radius-pill: 60px;
	--cf-radius-card: 10px;
	--cf-radius-sm: 4px;

	/* Motion */
	--cf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cf-dur: 0.35s;

	/* Elevation */
	--cf-shadow-card: 0 2px 14px rgba(37, 36, 39, 0.08);
	--cf-shadow-lift: 0 14px 34px rgba(37, 36, 39, 0.16);
	--cf-shadow-drawer: -18px 0 48px rgba(37, 36, 39, 0.18);
}

@media (max-width: 900px) {
	:root {
		--cf-fs-h1: 28px;
		--cf-fs-h2: 32px;
		--cf-lh-h1: 34px;
		--cf-lh-h2: 37px;
		--cf-ls-h2: -0.6px;
		--cf-grid-gap-y: 32px;
	}
}