/* ==========================================================================
   Design-Tokens (alle Farben und Abstände zentral)
   Breakpoints als Referenz (Custom Properties gehen in Media Queries nicht):
   md = 48em, lg = 64em
   ========================================================================== */
:root {
	/* Abstände */
	--cf-space-0: 0;
	--cf-space-1: 0.25rem;
	--cf-space-2: 0.5rem;
	--cf-space-3: 0.75rem;
	--cf-space-4: 1rem;
	--cf-space-6: 1.5rem;
	--cf-space-8: 2rem;
	--cf-space-12: 3rem;

	/* Layout */
	--cf-container-max: 72rem;
	--cf-container-narrow: 48rem;
	--cf-container-padding: var(--cf-space-4);
	--cf-gap-x: var(--cf-space-4);
	--cf-gap-y: var(--cf-space-4);
	--cf-radius: 0.5rem;

	/* Farben */
	--cf-color-bg: #ffffff;
	--cf-color-text: #1f2933;
	--cf-color-muted: #616e7c;
	--cf-color-accent: #0b6bcb;
	--cf-color-border: #e4e7eb;
	--cf-color-surface: #f5f7fa;
	--cf-color-secondary: #52606d;
	--cf-color-dark: #0f1720;
	--cf-color-on-dark: #ffffff;
	--cf-color-on-accent: #ffffff;

	/* Kompatibilität: bisherige Namen aus chalvi.css verweisen auf die neuen Tokens */
	--c-bg: var(--cf-color-bg);
	--c-text: var(--cf-color-text);
	--c-muted: var(--cf-color-muted);
	--c-accent: var(--cf-color-accent);
	--c-border: var(--cf-color-border);
	--c-surface: var(--cf-color-surface);
	--container: var(--cf-container-max);
	--gap: var(--cf-space-4);
}

@media (prefers-color-scheme: dark) {
	:root {
		--cf-color-bg: #121820;
		--cf-color-text: #e4e7eb;
		--cf-color-muted: #9aa5b1;
		--cf-color-accent: #5eaaf5;
		--cf-color-border: #2d3742;
		--cf-color-surface: #1a222c;
		--cf-color-secondary: #9aa5b1;
		--cf-color-on-accent: #0b1320;
	}
}

/* Ab mittlerer Breite: mehr Seitenrand */
@media (min-width: 48em) {
	:root {
		--cf-container-padding: var(--cf-space-8);
	}
}