@font-face {
  font-family: "TWK Lausanne";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/TWKLausanne-400.ttf") format("truetype");
}

@font-face {
  font-family: "TWK Lausanne";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/TWKLausanne-600.ttf") format("truetype");
}

:root {
  --color-lime: #b5f47b;
  --color-ink: #1e1e1e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-mist: #e8f0f1;
  --color-forest: #374b37;
  --color-blue: #4965ee;
  --color-blue-bright: #4261f3;
  --color-periwinkle: #667ff3;
  --color-orange: #ec7f45;
  --color-pink: #ffcdda;
  --color-grey-100: #f5f5f5;
  --color-grey-500: #979797;
  --color-grey-600: #616161;

  --font-sans: "TWK Lausanne", "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 600;

  --text-display: 80px;
  --text-h1: 60px;
  --text-h2: 50px;
  --text-h3: 40px;
  --text-h4: 32px;
  --text-lg: 22px;
  --text-md: 20px;
  --text-base: 16px;
  --text-sm: 12px;

  --leading-tight: 1;
  --leading-snug: 1.1;
  --leading-normal: 1.3;
  --leading-relaxed: 1.4;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 50px;
  --space-8: 60px;
  --space-9: 80px;
  --space-10: 100px;
  --space-11: 120px;
  --space-12: 160px;
  --space-13: 220px;

  --container: 1440px;
  --container-narrow: 700px;
  --container-medium: 1000px;
  --gutter: 50px;

  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-panel: 50px;
  --radius-pill: 100px;

  --header-height: 103px;
  --ease: ease-out;
}

@media (max-width: 767px) {
  :root {
    --text-display: 40px;
    --text-h1: 40px;
    --text-h2: 40px;
    --text-h3: 32px;
    --text-h4: 26px;
    --gutter: 20px;
    --radius-panel: 30px;
    --header-height: 54px;
  }
}