/*
 * Token-Defaults
 *
 * Diese Werte greifen, wenn weder Skin noch Customizer einen Token überschreiben.
 * Die Laufzeit-Werte aus class-customizer-tokens.php werden als
 * `<style id="ln-tokens">` FRÜH im <head> ausgegeben (wp_head Prio 5) — also VOR
 * diesem Stylesheet. Damit sie trotzdem gewinnen, nutzt das Inline-Style den
 * Selektor `html:root` (Spezifität 0,0,1,1) gegenüber dem `:root` hier (0,0,1,0).
 * Die responsiven Overrides unten stehen daher ebenfalls auf `html:root`, damit
 * sie an ihren Breakpoints (spätere Quelle, gleiche Spezifität) weiter gewinnen.
 * Diese Datei = Basis-Fallback + Doku.
 */

:root {
	--ln-primary:        #FF8600;
	--ln-primary-dark:   #cc6a00;
	--ln-dark:           #2A2A2C;
	--ln-mid:            #666666;
	--ln-light:          #F6F6F6;
	--ln-border:         #D3D3D3;
	--ln-white:          #ffffff;

	--ln-font-body:      'Noto Sans', sans-serif;
	--ln-font-heading:   'Noto Sans', sans-serif;
	--ln-font-size-base: 14px;

	--ln-container-max:  1600px;
	--ln-container-pad:  80px;

	--ln-radius-sm:      2px;
	--ln-radius-md:      4px;

	--ln-header-bg:      #2A2A2C;
	--ln-header-height:  64px;
	--ln-footer-bg:      #2A2A2C;

	/* Header-Chrome-Text/Hover — Defaults = Dark-Optik (heller Text auf dunklem
	   Header). Der „Light"-Skin überschreibt diese Tokens auf dunklen Text +
	   dunkle Hover-Flächen für einen hellen Header. Kein Customizer-Setting →
	   Skin-Tokens gewinnen direkt (sofortiger Wechsel). */
	--ln-header-text:        #ffffff;
	--ln-header-nav:         rgba(255, 255, 255, 0.92);
	--ln-header-muted:       rgba(255, 255, 255, 0.75);
	--ln-header-icon:        rgba(255, 255, 255, 0.9);
	--ln-header-hover:       rgba(255, 255, 255, 0.12);
	--ln-header-hover-soft:  rgba(255, 255, 255, 0.1);
	--ln-header-border:      transparent;

	--ln-shadow-card:    0 8px 30px rgba(0, 0, 0, 0.1);
	--ln-shadow-hover:   0 12px 40px rgba(0, 0, 0, 0.2);
	--ln-transition:     0.2s ease;
	--ln-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

	--ln-z-header:       100;
	--ln-z-overlay:      900;
	--ln-z-drawer:       1000;
	--ln-z-modal:        1100;

	--ln-section-pad:    80px;
}

@media (max-width: 1024px) {
	html:root {
		--ln-container-pad: 32px;
		--ln-section-pad:   60px;
	}
}

@media (max-width: 768px) {
	html:root {
		--ln-container-pad: 20px;
		--ln-section-pad:   52px;
		--ln-header-height: 56px;
	}
}

@media (max-width: 480px) {
	html:root {
		--ln-container-pad: 16px;
	}
}