:root {
	/* Viewport height fallbacks */
	--h-screen: 100vh; /* Fallback for older browsers */
	--h-screen: calc(var(--vh) * 100); /* JavaScript-driven fallback for better iOS support */

	--font-family-sans: 'NHaasGroteskTXPro-75Bd', sans-serif;
	--font-family-serif: serif;

	--color-black: rgba(43, 43, 43, 1);
	--color-grid: rgba(145, 145, 145, 1);
	--color-containers: rgba(167, 167, 167, 1);
	--color-background: rgba(108, 108, 108, 1);
	--blue-600: #1e61cd;

	--text-title: 26px;
	--lh-title: 90%;
	--ls-title: -0.01em;

	--text-subtitle: 18px;
	--lh-subtitle: 100%;
	--ls-subtitle: -0.01em;
	--text-base: 11.5px;
	--lh-base: 1;

	--base-space: 10px;
	--gap: var(--base-space);
	--padding: var(--base-space);

	--grid-cols: 10;
	--grid-rows: 5;

	/* available width inside a padded container */
	--container-inner-width: calc(100% - (var(--padding) * 2));

	/* single column width - matches flexbox with gap behavior */
	--single-column: calc(
		(var(--container-inner-width) - (var(--gap) * (var(--grid-cols) - 1))) / var(--grid-cols)
	);

	--six-columns: calc((var(--single-column) * 6) + (var(--gap) * 5));
	--five-columns: calc((var(--single-column) * 5) + (var(--gap) * 4));
	--four-columns: calc((var(--single-column) * 4) + (var(--gap) * 3));
	--three-columns: calc((var(--single-column) * 3) + (var(--gap) * 2));
	--two-columns: calc((var(--single-column) * 2) + (var(--gap) * 1));

	--single-row: calc(100% / 5 + var(--padding) / 2);

	--height-columns: calc((var(--single-column) * 8) + (var(--gap) * 7));
}

@media (min-width: 768px) {
	:root {
		--base-space: 20px;
		--grid-cols: 10;

		/* single column width for 10-column grid (matches your Figma grid) */
		--single-column: calc((100% - (var(--gap) * 9)) / 10);
		--two-columns: calc((var(--single-column) * 2) + (var(--gap) * 1));
		--three-columns: calc((var(--single-column) * 3) + (var(--gap) * 2));
		--four-columns: calc((var(--single-column) * 4) + (var(--gap) * 3));
		--six-columns: calc((var(--single-column) * 6) + (var(--gap) * 5));
	}
}