:root {
  /* Layout variables */
  --header-border-width: 2px;
  --header-border-radius: 50px;
  --header-padding: 1rem 2rem;
  --header-height: 4rem;
  --ai-button-size: 60px;
  --menu-button-size: 60px;
  --modal-width: 300px;
  --container-margin: 48px;
  
  /* Panel variables */
  --nav-panel-width: 280px;
  --ai-panel-width: 320px;
  --toggle-button-size: 50px;
  --toggle-button-offset: -10px;
  
  /* Spacing variables */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  
  /* Border radius variables */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;
  
  /* Size variables */
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 48px;
  --size-lg: 64px;
  --size-16: 16px;
  --size-44: 44px;
  --size-80: 80px;
  --size-160: 160px;
  --size-340: 340px;
  --size-400: 400px;
  --size-800: 800px;
  --size-1200: 1200px;
  --size-200: 200px;
  --size-300: 300px;
  --size-320: 320px;
  --size-500: 500px;
  --size-28: 28px;
  --size-30: 30px;
  --size-36: 36px;
  --size-40: 40px;
  --size-50: 50px;
  --size-60: 60px;
  --size-100: 100px;
  --size-120: 120px;
  --size-150: 150px;
  --size-342: 342px;
  --modal-width-sm: 300px;
  --modal-width-md: 500px;
  --modal-width-lg: 700px;
  --modal-max-width: 90%;
  --modal-max-height: 90vh;
  --search-input-min-width: 200px;
  --filter-min-width: 150px;
  
  /* Animation variables */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Z-index variables */
  --z-toggle: 1000;
  --z-panel: 997;
  --z-modal: 1001;
  --z-overlay: 999;
  
  /* Border width variables */
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  
  /* Specific size variables */
  --size-tiny: 6px;
  --size-btn-min: 40px;
  --font-size-2xl: 2rem;
  --font-size-2xs: 0.65rem;
  --font-size-08: 0.8rem;
  --font-size-11: 1.1rem;
  --font-size-167: 1.67rem;
  --letter-spacing-wide: 0.05em;
  --line-height-relaxed: 1.6;
  
  /* Transform variables */
  --transform-translate-tiny: 4px;
  --transform-translate-sm: 10px;
  --transform-translate-neg-2px: -2px;
  --transform-translate-2px: 2px;
  --transform-scale-hover: 1.05;
  --transform-scale-press: 1.02;
  --transform-scale-active: 0.98;
  --transform-scale-grow: 1.1;
  --transform-scale-typing: 1.2;
  
  /* Shadow variables */
  --shadow-offset-sm: 2px;
  --shadow-offset-md: 4px;
  --shadow-offset-lg: 5px;
  --shadow-blur-sm: 4px;
  --shadow-blur-hover: 8px;
  --shadow-blur-md: 15px;
  --shadow-blur-lg: 20px;
  
  /* Animation delays */
  --animation-delay-1: 0.2s;
  --animation-delay-2: 0.4s;
  --animation-duration-typing: 1.4s;
  --animation-duration-spin: 1s;
  --animation-duration-shake: 0.3s;
  --animation-duration-pulse: 0.6s;
  --animation-duration-slide: 0.4s;
  --animation-duration-bounce: 0.6s;
  --slide-in-duration: 0.3s;
  --expand-duration: 0.3s;
  --hover-duration: 0.2s;
  
  /* Grid variables */
  --grid-min-column-width: 280px;
  --grid-min-stat-width: 40px;
  
  /* Responsive breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-large: 1200px;
  --breakpoint-xlarge: 1400px;
  --panel-mobile-max-width: 320px;
  
  /* Percentage values */
  --width-full: 100%;
  --width-80: 80%;
  --opacity-half: 0.5;
  --opacity-visible: 1;
  --opacity-hidden: 0;
}