/* ==========================================================================
   Design Tokens — Swiss / Minimalism
   Raster, hoher Kontrast, EIN Akzentton, sparsame funktionale 3D-Tiefe.
   ========================================================================== */

:root {
	/* Farben — neutral + ein gedämpfter Petrol-Akzent (Handwerk, kein SaaS-Blau) */
	--color-bg: #FAFAF9;
	--color-surface: #FFFFFF;
	--color-surface-sunken: #F2F2EF;
	--color-line: #E3E3DF;
	--color-line-strong: #CFCFC8;

	--color-ink: #121212;
	--color-ink-soft: #4A4A46;
	--color-ink-faint: #7A7A74;

	--color-accent: #24504F;
	--color-accent-strong: #163938;
	--color-accent-soft: #E7EFEE;
	--color-on-accent: #FFFFFF;

	--color-deep: #101414;
	--color-deep-surface: #182020;

	/* Typografie */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* Raster / Abstand */
	--container: 1200px;
	--gap: 2rem;
	--space-3xs: 0.375rem;
	--space-2xs: 0.75rem;
	--space-xs: 1rem;
	--space-sm: 1.5rem;
	--space-md: clamp(2rem, 3vw, 2.75rem);
	--space-lg: clamp(3rem, 6vw, 5rem);
	--space-xl: clamp(4.5rem, 9vw, 8rem);

	/* Form */
	--radius: 0px;
	--radius-pill: 999px;

	/* Schatten — Swiss: hart, kein Weichzeichner, nur bei echter Tiefe */
	--shadow-hard: 6px 6px 0 var(--color-ink);
	--shadow-hard-accent: 6px 6px 0 var(--color-accent);
	--shadow-soft: 0 1px 2px rgba(18, 18, 18, 0.06);

	/* Bewegung */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--dur-fast: 160ms;
	--dur-base: 220ms;
	--dur-slow: 420ms;

	/* Z-Index-Skala */
	--z-dropdown: 10;
	--z-sticky: 20;
	--z-overlay: 30;
	--z-drawer: 40;
	--z-toast: 50;
}

@media (prefers-color-scheme: dark) {
	/* Bewusst kein Auto-Dark-Mode: Marke bleibt hell/konsistent (Page-Theme-Lock) */
}