/**
 * 01-tokens.css - Design Tokens
 * Theme: Schnieders Kommunal | CoSWa GmbH / Benedikt Wallmeyer
 *
 * Einzige Quelle der Wahrheit fuer Farben, Typografie, Abstaende, Radien
 * und Schatten. Alle weiteren CSS-Dateien verwenden ausschliesslich diese
 * Custom Properties - keine Hardcoded-Farbwerte.
 */

:root {
	/* --- Markenfarben (CDU-Blau) --- */
	--c-blue-950: #061B33;
	--c-blue-900: #0A2A4E;
	--c-blue-800: #0E3159;
	--c-blue-700: #123B6B; /* Primaerfarbe */
	--c-blue-600: #1B5099;
	--c-blue-500: #2B6CB8;
	--c-blue-300: #8FB4DC;
	--c-blue-100: #E7EFF8;
	--c-blue-50:  #F4F8FC;

	/* --- Akzent (CDU-Orange, sparsam einsetzen) --- */
	--c-accent:      #F29400;
	--c-accent-dark: #C97900;
	--c-accent-soft: #FFF4E2;

	/* --- Neutrale Toene --- */
	--c-ink:      #101828;
	--c-body:     #33415C;
	--c-muted:    #5A6779;
	--c-border:   #DCE3EC;
	--c-surface:  #F4F7FB;
	--c-white:    #FFFFFF;

	/* --- Semantisch --- */
	--color-primary:        var(--c-blue-700);
	--color-primary-dark:   var(--c-blue-900);
	--color-primary-light:  var(--c-blue-600);
	--color-accent:         var(--c-accent);
	--color-text:           var(--c-body);
	--color-muted:          var(--c-muted);
	--color-heading:        var(--c-blue-900);
	--color-link:           var(--c-blue-600);
	--color-link-hover:     var(--c-blue-900);
	--color-bg:             var(--c-white);
	--color-bg-alt:         var(--c-surface);
	--color-bg-invert:      var(--c-blue-900);
	--color-border:         var(--c-border);
	--color-focus:          var(--c-accent);

	/* --- Typografie (DSGVO: nur System-Fonts, keine Google Fonts) --- */
	--font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-sans);

	--fs-xs:   0.8125rem;
	--fs-sm:   0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--fs-lg:   clamp(1.3rem, 0.7vw + 1.15rem, 1.55rem);
	--fs-xl:   clamp(1.6rem, 1.3vw + 1.3rem, 2.1rem);
	--fs-2xl:  clamp(1.95rem, 2vw + 1.45rem, 2.75rem);
	--fs-3xl:  clamp(2.3rem, 3.2vw + 1.5rem, 3.6rem);

	--lh-tight: 1.18;
	--lh-snug:  1.35;
	--lh-base:  1.65;

	--fw-normal:   400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	--tracking-wide: 0.08em;

	/* --- Abstaende --- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.5rem;
	--sp-6:  2rem;
	--sp-7:  2.5rem;
	--sp-8:  3rem;
	--sp-9:  4rem;
	--sp-10: 5rem;

	--section-y: clamp(3rem, 6vw, 5.5rem);

	/* --- Layout --- */
	--container:        1180px;
	--container-narrow: 760px;
	--container-wide:   1400px;
	--gutter: clamp(1rem, 4vw, 2rem);

	/* --- Radien --- */
	--radius-sm: 4px;
	--radius:    8px;
	--radius-lg: 14px;
	--radius-xl: 22px;
	--radius-pill: 999px;

	/* --- Schatten --- */
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow:    0 4px 16px rgba(16, 24, 40, 0.08);
	--shadow-md: 0 10px 30px rgba(10, 42, 78, 0.10);
	--shadow-lg: 0 22px 50px rgba(10, 42, 78, 0.16);

	/* --- Bewegung --- */
	--transition: 180ms ease;
	--transition-slow: 320ms ease;

	/* --- Ebenen --- */
	--z-header: 100;
	--z-nav: 200;
	--z-overlay: 300;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition: 0ms;
		--transition-slow: 0ms;
	}
}