:root {
  
  --color-white: #FFFFFF;
  --color-ilo-blue: #1E2DBE;
  --color-navy: #230050;
  --color-yellow: #FFCD2D;
  --color-light-blue: #EBF5FD;
  --color-green-accent: #8CE164;
  --color-red-accent: #FA3C4B;
  --color-footer-gray: #6E6E6E;
  --color-footer-border: #B8C4CC;

  
  --font-overpass: 'Overpass', sans-serif;
  --font-noto: 'Noto Sans', sans-serif;

  
  --page-max-width: 1600px;
  --content-width: 1312px;
  --map-width: 1088px;
  --hero-height: 950px;
  --nav-height: 64px;
  --top-bar-height: 32px;

  
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1320px;
  --breakpoint-xl: 1600px;

  
  --spacing-xs: clamp(8px, 1.5vw, 12px);
  --spacing-sm: clamp(12px, 2vw, 16px);
  --spacing-md: clamp(16px, 2.5vw, 24px);
  --spacing-lg: clamp(24px, 3vw, 40px);
  --spacing-xl: clamp(40px, 5vw, 60px);
  --spacing-xxl: clamp(60px, 8vw, 120px);

  
  --container-padding: clamp(16px, 4vw, 20px);
  --section-padding-y: clamp(60px, 8vw, 120px);
}