/**
 * LPH Theme - CSS Variables
 * 
 * Zentrale CSS-Variablen für konsistentes Design-System
 * Namespace: --lph-*
 */

:root {
	/* ==========================================================================
	   Brand Colors
	   ========================================================================== */
	
	/* Primary Colors */
	--lph-color-black: 0, 0, 0;           /* #000000 */
	--lph-color-white: 255, 255, 255;     /* #ffffff */
		
	/* ==========================================================================
	   Typography
	   ========================================================================== */
	
	--lph-font-regular: "Brandon-Text-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--lph-font-bold: "Brandon-Text-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	
	/* ==========================================================================
	   Spacing
	   ========================================================================== */
	
	--lph-spacing-xs: 4px;
	--lph-spacing-sm: 8px;
	--lph-spacing-md: 16px;
	--lph-spacing-lg: 24px;
	--lph-spacing-xl: 32px;
	--lph-spacing-xxl: 48px;
	
	/* ==========================================================================
	   Transitions
	   ========================================================================== */
	
	--lph-transition-fast: 0.15s ease;
	--lph-transition-base: 0.2s ease;
	--lph-transition-slow: 0.3s ease;
	
	/* ==========================================================================
	   Z-Index Scale
	   ========================================================================== */
	
	--lph-z-base: 1;
	--lph-z-dropdown: 100;
	--lph-z-sticky: 200;
	--lph-z-fixed: 300;
	--lph-z-modal-backdrop: 400;
	--lph-z-modal: 500;
	--lph-z-popover: 600;
	--lph-z-tooltip: 700;
	
	/* ==========================================================================
	   Breakpoints (for JavaScript usage)
	   ========================================================================== */
	
	--lph-breakpoint-mobile: 569px;
	--lph-breakpoint-tablet: 960px;
	--lph-breakpoint-desktop: 1200px;
}

/**
 * Usage Examples:
 * 
 * Solid Color:
 * color: rgb(var(--lph-color-black));
 * 
 * With Opacity:
 * background: rgba(var(--lph-color-black), 0.5);
 * 
 * Font Family:
 * font-family: var(--lph-font-regular);
 * 
 * Transitions:
 * transition: all var(--lph-transition-base);
 */