:root {
  --section-padding-block: clamp(4rem, 4.97vw + 2.211rem, 9rem);
  --section-padding-inline: clamp(2rem, 5vw, 6.4rem);
  --header-menu-height: 72px;
  --container-width: 1280px;
  

  --space-3xs: clamp(0.5rem, 0.4792rem + 0.1042vw, 0.5625rem);
  --space-2xs: clamp(0.75rem, 0.7083rem + 0.2083vw, 0.875rem);
  --space-xs: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);
  --space-s: clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem);
  --space-m: clamp(2rem, 1.9167rem + 0.4167vw, 2.25rem);
  --space-l: clamp(3rem, 2.875rem + 0.625vw, 3.375rem);
  --space-xl: clamp(4rem, 3.8333rem + 0.8333vw, 4.5rem);
  --space-2xl: clamp(6rem, 5.75rem + 1.25vw, 6.75rem);
  --space-3xl: clamp(8rem, 7.6667rem + 1.6667vw, 9rem);


  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-orange: 0 8px 32px rgba(255, 117, 31, 0.25);

  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  
  --grid-gutter: var(--space-s);

  --grid-columns: 12;
  --grid-1: minmax(0, 1fr);
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
}