/**
 * #machen design tokens
 * Keep brand decisions centralized here.
 */
:root {
	--machen-color-red: #ba0000;
	--machen-color-logo-red: #e52520;
	--machen-color-dark: #151515;
	--machen-color-action: #4f7300;
	--machen-color-action-hover: #3d5900;
	--machen-color-white: #ffffff;
	--machen-color-ai-orange: #cc4d00;

	--machen-font-brand: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--machen-font-topbar: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	--machen-container-max: 1380px;
	--machen-content-readable: 760px;
	--machen-gutter: clamp(20px, 3vw, 48px);
	--machen-gutter-mobile: 20px;

	--machen-space-1: 0.5rem;
	--machen-space-2: 0.75rem;
	--machen-space-3: 1rem;
	--machen-space-4: 1.5rem;
	--machen-space-5: 2rem;
	--machen-space-6: 3rem;
	--machen-space-7: 4.5rem;
	--machen-space-8: 6rem;
	--machen-section-space: clamp(4rem, 7vw, 7.5rem);

	--machen-radius-button: 12px;
	--machen-transition: 180ms ease;

	/* CSS reference breakpoints: mobile < 768px; tablet 768–1023px; desktop >= 1024px. */
	--machen-breakpoint-mobile: 768px;
	--machen-breakpoint-desktop: 1024px;
}