:root {
	/* === BRAND COLORS (R, G, B) — from existing Klopfer UI === */
	--klopfer-color-primary: 142, 29, 54; /* #8e1d36 */
	--klopfer-color-primary-dark: 110, 22, 42;
	--klopfer-color-primary-light: 168, 52, 78;
	--klopfer-color-secondary: 48, 49, 51; /* #303133 */
	--klopfer-color-surface: 255, 255, 255;
	--klopfer-color-surface-muted: 242, 245, 247; /* #f2f5f7 */
	--klopfer-color-border: 198, 202, 203; /* #c6cacb */
	--klopfer-color-overlay: 20, 12, 14;

	/* === SPACING (Base: 12px — Uncode-Grid: 12 / 36 / 72) === */
	--klopfer-spacing-base: 12px;
	--klopfer-spacing-xs: calc(var(--klopfer-spacing-base) * 0.5); /* 6px */
	--klopfer-spacing-sm: calc(var(--klopfer-spacing-base) * 0.75); /* 9px */
	--klopfer-spacing-md: calc(var(--klopfer-spacing-base) * 1); /* 12px */
	--klopfer-spacing-lg: calc(var(--klopfer-spacing-base) * 1.5); /* 18px */
	--klopfer-spacing-xl: calc(var(--klopfer-spacing-base) * 3); /* 36px */
	--klopfer-spacing-2xl: calc(var(--klopfer-spacing-base) * 4); /* 48px */
	--klopfer-spacing-3xl: calc(var(--klopfer-spacing-base) * 6); /* 72px */

	/* === TYPE === */
	--klopfer-font-sans: "IBM Plex Sans", "IBMPlexSans-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--klopfer-radius: calc(var(--klopfer-spacing-base) * 0.25);
	--klopfer-shadow-modal: 0 calc(var(--klopfer-spacing-base) * 1.5) calc(var(--klopfer-spacing-base) * 4) rgba(var(--klopfer-color-overlay), 0.28);
}