:root {
  /* Colors */
  --color-primary: #31afff;
  --color-primary-hover: #009dff;
  --color-dark: #333333;
  --color-text: #000000; /* Use dark color as default text */
  --color-text-light: #666666;
  --color-text-hover: #000000; /* Added for button hover */
  --color-text-secondary: #666666;
  --expandable-text-color: #333333;
  --color-background: #ffffff;
  --color-border: #eeeeee;
  --color-shadow: rgba(0, 0, 0, 0.2);
  --color-light-gray: #f0f0f0; /* Added for button hover */
  --color-light-gray-hover: #e0e0e0; /* Added for button hover */

  /* Dark Mode Colors */
  --color-dark-background: #1e1e1e;
  --color-dark-text: #e0e0e0;
  --color-dark-text-light: #cccccc;
  --color-dark-border: #444444;
  --color-dark-hover: #3a3a3a; /* Added for dark mode button hover */
  --color-dark-text-hover: #ffffff; /* Added for dark mode button hover */

  /* Map Index Colors */
  --color-index-zeloSlaba: #FF0000;
  --color-index-izrednoSlaba: #800080;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-display: 'League Spartan', Arial, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.8rem; /* Converted from em for stability */
  --font-size-sm: 0.9rem; /* Converted from em for stability */
  --font-size-base: 1rem; /* Converted from em for stability */
  --font-size-button: 18px; /* Used in forecast buttons */
  --font-size-time-display: 16px; /* Used in forecast time display */
  --font-size-legend-item: 12px; /* Used in legend items */
  --font-size-legend-title: 14px; /* Used in legend titles */

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;

  /* Added extra small spacing */
  --spacing-xxs: 2px;
  --spacing-xxs-plus: 3px;
  --spacing-xs-plus: 8px;

  /* Added specific spacing for UI elements */
  --spacing-ui-padding-sm: 5px;
  --spacing-ui-padding-md: 10px;
  --spacing-ui-margin-sm: 5px;
  --spacing-ui-margin-md: 10px;

  /* Font Sizes */
  --font-size-xxs: 0.7rem; /* Converted from em for stability */
  
  /* Font Sizes for Naslovna Stran */
  --font-size-naslovna-h1: clamp(32px, 3.6vw, 72px);
  --font-size-naslovna-p: clamp(20px, 1.3vw, 28px);

  /* Font Sizes for Other Pages */
  --font-size-general-h1: clamp(28px, 3.2vw, 52px);
  --font-size-general-h2: clamp(22px, 3vw, 36px);
  --font-size-general-h3: clamp(20px, 1.3vw, 26px);
  --font-size-general-p: clamp(16px, 1.2vw, 22px);
  
  /* Font Sizes for Map Popups */
  --font-size-popup-heading: 0.9rem;
  --font-size-popup-text: 0.9rem;
  --font-size-popup-timestamp: 0.8rem;

  /* Borders */
  --border-radius: 5px;
  --border-radius-sm: 3px;
  --border-width: 1px;

  /* Timing (Transitions) */

  --expandable-transition: 0.4s ease;
  
  /* Z-indices */
  --z-header: 1000;
  --z-modal: 2000;

  /* Header & Footer Heights */
  --header-height-min: 40px;
  --header-logo-height-min: 30px;
  --header-logo-height-max: 70px;

  --footer-height-min: 45px;
  --footer-logo-height-min: 20px;
  --footer-logo-height-max: 40px; /* If footer min is 45px, this guarantees 5px total padding. Allows logos to be larger at normal sizes. */

  /* Breakpoints */

  /* Map Specific Variables */
  --legend-color-box-size: 14px;
  --legend-circle-size: 18px;
  --legend-icon-size: 24px;       /* Novo - standardna velikost za ikone */

  /* Novo - enotna poravnava */
  --legend-symbol-alignment-offset: -3px; /* Majhna korekcija za idealno poravnavo */

  /* Chart Hover Variables */
  --chart-hover-bg: #f0f0f0;
  --chart-hover-text: #333333;
  --chart-hover-padding: 2px 5px;
  --chart-hover-border-radius: 3px;
  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* Animation Timing */
  --animation-duration-fast: 200ms;
  --animation-duration-medium: 300ms;
  --animation-duration-slow: 500ms;

  /* Additional Z-indexes */
  --z-dropdown: 500;
  --z-overlay: 1500;
  --z-tooltip: 2500;

  /* Common Patterns */
  --button-padding: var(--spacing-sm) var(--spacing-md);
  --input-padding: var(--spacing-xs) var(--spacing-sm);
  --card-padding: var(--spacing-md) var(--spacing-lg);

  /* Breakpoints (for documentation and JS usage) */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 992px;
  --breakpoint-desktop: 1200px;
  /* Dark mode shadows */
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --box-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}