@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/figtree-300.ttf") format("truetype");
}

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

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

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-line-grey: #a5a5a5;
  --color-line-grey-dark: #7b7b7b;
  --color-error: #bf2b2b;
  --color-success: #2f8358;
  --color-info: #3877a1;

  --font-primary: "Figtree", sans-serif;
  --font-size-xxs: clamp(0.55rem, 0.8vw, 0.7rem);
  --font-size-xs: clamp(0.6rem, 0.9vw, 0.8rem);
  --font-size-sm: clamp(0.65rem, 1vw, 0.9rem);
  --font-size-md: clamp(0.75rem, 1.1vw, 1rem);
  --font-size-base: clamp(0.8rem, 1.2vw, 1.1rem);
  --font-size-lg: clamp(1rem, 1.4vw, 1.3rem);
  --font-size-xl: clamp(1.5rem, 2.2vw, 2rem);
  --font-size-xxl: clamp(1.8rem, 2.8vw, 2.5rem);
  --font-size-hero: clamp(2rem, 3.3vw, 3rem);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;

  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-normal: 0.4s;
}