:root {
--timing-spring: linear(
      0,
      0.002 0.4%,
      0.01 0.8%,
      0.021 1.2%,
      0.041 1.7%,
      0.062 2.1%,
      0.092 2.6%,
      0.127 3.1%,
      0.166 3.6%,
      0.237 4.4%,
      0.334 5.4%,
      0.685 8.7%,
      0.826 10.1%,
      0.892 10.8%,
      0.953 11.5%,
      1.009 12.2%,
      1.06 12.9%,
      1.106 13.6%,
      1.14 14.2%,
      1.171 14.8%,
      1.201 15.5%,
      1.222 16.1%,
      1.242 16.8%,
      1.257 17.5%,
      1.266 18.2%,
      1.272 19.1%,
      1.27 20%,
      1.262 20.9%,
      1.247 21.9%,
      1.227 22.9%,
      1.201 24%,
      1.168 25.2%,
      1.059 29%,
      1.025 30.3%,
      0.996 31.6%,
      0.969 33.1%,
      0.949 34.5%,
      0.936 35.9%,
      0.928 37.4%,
      0.926 39.2%,
      0.933 41.2%,
      0.945 43.3%,
      0.984 48.3%,
      1 50.8%,
      1.013 53.5%,
      1.019 56.3%,
      1.02 58.3%,
      1.018 60.5%,
      1 70%,
      0.995 75.2%,
      0.995 79.9%,
      1.001 92.2%,
      1
    );

  /* https://utopia.fyi/space/calculator/?c=360,16,1.2,1516,32,1.25,5,2,&s=0.75|0.5|0.38|0.25,1.5|2|3|4,s-l&g=s,l,xl,12 */
  --spacing-50: clamp(2px, 1.3772px + 0.173vw, 4px);
  --spacing-100: clamp(4px, 2.7543px + 0.346vw, 8px);
  --spacing-200: clamp(6px, 4.1315px + 0.519vw, 12px);
  --spacing-300: clamp(8px, 5.5087px + 0.692vw, 16px);
  --spacing-400: clamp(12px, 8.263px + 1.0381vw, 24px);
  --spacing-500: clamp(16px, 11.0173px + 1.3841vw, 32px);
  --spacing-600: clamp(24px, 16.526px + 2.0761vw, 48px);
  --spacing-700: clamp(32px, 22.0346px + 2.7682vw, 64px);
  --spacing-800: clamp(48px, 33.0519px + 4.1522vw, 96px);
  --spacing-900: clamp(64px, 44.0692px + 5.5363vw, 128px);


}

/* --new-mobile */
@media (max-width: 767px) {
  :root {
    --font-size-heading-3: 20px;

    --height-input-xl: 50px;
    --height-input-lg: 44px;
    --height-input-md: 38px;
    --height-input-sm: 28px;
    --height-input-xs: 22px;

    --font-size-2xl: 32px;
    --font-size-xl: 26px;
    --font-size-lg: 20px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
  }
}
/* --new-tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --font-size-heading-3: 22px;

    --height-input-xl: 54px;
    --height-input-lg: 46px;
    --height-input-md: 40px;
    --height-input-sm: 30px;
    --height-input-xs: 24px;

    --font-size-2xl: 36px;
    --font-size-xl: 28px;
    --font-size-lg: 22px;
    --font-size-md: 17px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
  }
}
/* --new-desktop-sm */
@media (min-width: 1200px) and (max-width: 1515px) {
  :root {
    --font-size-heading-3: 24px;

    --height-input-xl: 58px;
    --height-input-lg: 50px;
    --height-input-md: 42px;
    --height-input-sm: 32px;
    --height-input-xs: 26px;

    --font-size-2xl: 40px;
    --font-size-xl: 30px;
    --font-size-lg: 22px;
    --font-size-md: 18px;
    --font-size-sm: 15px;
    --font-size-xs: 12px;
  }
}
/* --new-desktop-lg */
@media (min-width: 1516px) {
  :root {
    --font-size-heading-3: 26px;

    --height-input-xl: 64px;
    --height-input-lg: 56px;
    --height-input-md: 46px;
    --height-input-sm: 34px;
    --height-input-xs: 28px;

    --font-size-2xl: 44px;
    --font-size-xl: 32px;
    --font-size-lg: 24px;
    --font-size-md: 18px;
    --font-size-sm: 15px;
    --font-size-xs: 12px;

  }
}