/* ============================================================
   SAV — Design Tokens
   Alle Brand-Farben, Spacing, Typografie als CSS-Variablen.
   ============================================================ */

:root {
	/* Brand-Farben */
	--brand-orange:         #FF6600;
	--brand-orange-hover:   #E55A00;
	--brand-orange-soft:    #FFF4EC;
	--brand-orange-shadow:  rgba(255, 102, 0, 0.22);

	--brand-anthracite:       #3D3D3D;
	--brand-anthracite-dark:  #2B2B2B;
	--brand-anthracite-deep:  #1A1A1A;

	/* Neutrale Töne */
	--neutral-900: #1A1A1A;
	--neutral-800: #262626;
	--neutral-700: #404040;
	--neutral-600: #525252;
	--neutral-500: #737373;
	--neutral-400: #A3A3A3;
	--neutral-300: #D4D4D4;
	--neutral-200: #E5E5E5;
	--neutral-100: #F5F5F5;
	--neutral-50:  #FAFAFA;
	--white:       #FFFFFF;

	/* Status */
	--success: #10B981;
	--warning: #F59E0B;
	--error:   #EF4444;
	--info:    #3B82F6;

	/* Typografie */
	--font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono:   ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

	/* Mobile-friendly: kleinere Min-Werte verhindern abgeschnittene Headings auf 320-480px Screens */
	--text-xs:   clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
	--text-sm:   clamp(0.8rem, 0.75rem + 0.3vw, 1rem);
	--text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem);
	--text-lg:   clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
	--text-xl:   clamp(1.15rem, 1rem + 0.6vw, 1.625rem);
	--text-2xl:  clamp(1.3rem, 1.15rem + 0.8vw, 2rem);
	--text-3xl:  clamp(1.5rem, 1.25rem + 1.4vw, 2.5rem);
	--text-4xl:  clamp(1.75rem, 1.4rem + 2vw, 3.5rem);

	--leading-tight:   1.15;
	--leading-snug:    1.3;
	--leading-normal:  1.5;
	--leading-relaxed: 1.65;

	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-extra:    800;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-8:  3rem;
	--space-10: 4rem;
	--space-12: 6rem;
	--space-16: 8rem;
	--space-20: 10rem;

	/* Radius */
	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   0.75rem;
	--radius-xl:   1rem;
	--radius-2xl:  1.5rem;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
	--shadow-md:     0 4px 12px rgba(0,0,0,0.06);
	--shadow-lg:     0 10px 30px rgba(0,0,0,0.08);
	--shadow-xl:     0 20px 50px rgba(0,0,0,0.12);
	--shadow-brand:  0 8px 24px var(--brand-orange-shadow);
	--shadow-inner:  inset 0 2px 4px rgba(0,0,0,0.05);

	/* Z-Index */
	--z-base:     1;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-header:   300;
	--z-overlay:  400;
	--z-modal:    500;
	--z-toast:    600;
	--z-tooltip:  700;

	/* Container */
	--container-narrow: 880px;
	--container-base:   1200px;
	--container-wide:   1440px;

	/* Transitions */
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast:   150ms;
	--duration-base:   220ms;
	--duration-slow:   400ms;

	/* Brand → Blocksy/WP-Variablen aliasen, damit Customizer-Defaults gleich greifen */
	--theme-palette-color-1: var(--brand-orange);
	--theme-palette-color-2: var(--brand-orange-hover);
	--theme-palette-color-3: var(--brand-anthracite-deep);
	--theme-palette-color-4: var(--neutral-700);
	--theme-palette-color-5: var(--neutral-100);
	--theme-palette-color-6: var(--neutral-200);
	--theme-palette-color-7: var(--white);
	--theme-palette-color-8: var(--neutral-50);
}

/* Dark-Sections (z. B. Footer) bekommen invertierte Defaults */
.is-dark-section,
.sav-dark {
	--text-color: var(--neutral-200);
	--heading-color: var(--white);
	--border-color: rgba(255,255,255,0.1);
	background-color: var(--brand-anthracite-dark);
	color: var(--neutral-200);
}