/* =============================================================================
   KMP Digital — Design Tokens
   Zentrale CSS-Custom-Properties. Werden überall referenziert.
   ============================================================================= */

:root {

	/* Marken-Farben ------------------------------------------------------- */
	--kmp-dark:    #0D0B2E;   /* Tiefes Dunkelblau, Header & dunkle Blöcke */
	--kmp-purple:  #7F77DD;   /* Akzent, Links, Hover, CTA-Outline         */
	--kmp-light:   #F0EFFE;   /* Helle Produkt-/Content-Flächen            */

	/* Abgeleitete Farben -------------------------------------------------- */
	--kmp-dark-2:  #1a1648;                        /* Gradient-Zielton */
	--kmp-white:   #ffffff;
	--kmp-ink:     #0D0B2E;                        /* Primärer Text   */
	--kmp-ink-2:   #4a4867;                        /* Sekundärer Text */
	--kmp-ink-3:   #8a88a3;                        /* Meta, Captions  */
	--kmp-line:    rgba(13, 11, 46, 0.10);          /* Hairlines       */
	--kmp-line-dark: rgba(255, 255, 255, 0.14);    /* Hairlines auf dunkel */

	/* Flächen auf Dunkel/Hell -------------------------------------------- */
	--kmp-surface-dark:  var(--kmp-dark);
	--kmp-surface-light: var(--kmp-light);
	--kmp-surface-card:  var(--kmp-white);

	/* Typographie --------------------------------------------------------- */
	--font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

	/* Type-Scale (fluid, mit clamp) -------------------------------------- */
	--fs-display:  clamp(2.5rem,  5vw + 1rem, 4.5rem);   /* Hero-Titel     */
	--fs-h1:       clamp(2rem,    3vw + 1rem, 3.25rem);
	--fs-h2:       clamp(1.6rem,  2vw + 1rem, 2.4rem);
	--fs-h3:       clamp(1.25rem, 1vw + 1rem, 1.6rem);
	--fs-lead:     clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	--fs-body:     1rem;
	--fs-small:    0.875rem;
	--fs-eyebrow:  0.75rem;

	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-normal:   1.55;
	--lh-loose:    1.7;

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    800;

	/* Spacing (8-pt basiert) --------------------------------------------- */
	--space-0:  0;
	--space-1:  0.25rem;   /* 4  */
	--space-2:  0.5rem;    /* 8  */
	--space-3:  0.75rem;   /* 12 */
	--space-4:  1rem;      /* 16 */
	--space-5:  1.5rem;    /* 24 */
	--space-6:  2rem;      /* 32 */
	--space-7:  3rem;      /* 48 */
	--space-8:  4rem;      /* 64 */
	--space-9:  6rem;      /* 96 */
	--space-10: 8rem;      /* 128 */

	/* Block-Padding vertikal (konsistent, damit kein Padding-Krieg)       */
	--block-py:      clamp(3rem, 6vw, 5.5rem);
	--block-py-sm:   clamp(2rem, 4vw, 3rem);

	/* Container ----------------------------------------------------------- */
	--container-max: 1200px;
	--container-px:  clamp(1rem, 3vw, 2rem);

	/* Radii --------------------------------------------------------------- */
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-full: 9999px;

	/* Shadows ------------------------------------------------------------- */
	--sh-sm: 0 1px 2px rgba(13, 11, 46, 0.06);
	--sh-md: 0 4px 20px rgba(13, 11, 46, 0.07);
	--sh-lg: 0 16px 40px rgba(127, 119, 221, 0.18);
	--sh-xl: 0 30px 60px rgba(13, 11, 46, 0.20);

	/* Motion -------------------------------------------------------------- */
	--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:   160ms;
	--dur-base:   280ms;
	--dur-slow:   520ms;

	/* Z-Index ------------------------------------------------------------- */
	--z-header: 50;
	--z-modal:  100;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}