/* Font declarations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Kontrapunkt Miki';
  src: url('assets/fonts/KontrapunktMiki-Regular.otf') format('opentype'),
       url('assets/fonts/KontrapunktMiki-Regular.woff2') format('woff2'),
       url('assets/fonts/KontrapunktMiki-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kontrapunkt Miki';
  src: url('assets/fonts/KontrapunktMiki-Bold.otf') format('opentype'),
       url('assets/fonts/KontrapunktMiki-Bold.woff2') format('woff2'),
       url('assets/fonts/KontrapunktMiki-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kontrapunkt Miki';
  src: url('assets/fonts/KontrapunktMiki-ExtraBold.otf') format('opentype'),
       url('assets/fonts/KontrapunktMiki-ExtraBold.woff2') format('woff2'),
       url('assets/fonts/KontrapunktMiki-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* TYPOGRAPHY*/
  /* Font sizes */
  --font-size-S: 0.75rem;    /* 12px */
  --font-size-M: 0.875rem;   /* 14px */
  --font-size-L: 1rem;       /* 16px */
  --font-size-XL: 1.125rem;  /* 18px */
  --font-size-2XL: 1.25rem;  /* 20px */
  --font-size-3XL: 1.5rem;   /* 24px */
  --font-size-4XL: 2rem;     /* 32px */
  --font-size-5XL: 3rem;     /* 48px */
  --font-size-6XL: 4rem;     /* 64px */


  /* COLORS */
  /* NEUTRALS */
  --neutral-50: #F2F2F3;
  --neutral-100: #CBCBCC;
  --neutral-200: #B7B7B8;
  --neutral-300: #98999A;
  --neutral-400: #6F6F71;
  --neutral-500: #4C4C4D;
  --neutral-600: #333333;
  --neutral-700: #262627;
  --neutral-800: #1F1F1F;
  --neutral-900: #121212;

  /* PROJECT THEMES */
  --ridemetric: #fe5915;
  --heca: #4DB2A6; 


  /* SPACING */
    /* Border radius */
  --radius-S: 8px;
  --radius-M: 12px;
  --radius-L: 16px;

  /* Spacing tokens */
  --space-2: 0.125rem;    /* 2px */
  --space-4: 0.25rem;     /* 4px */
  --space-8: 0.5rem;      /* 8px */
  --space-12: 0.75rem;    /* 12px */
  --space-16: 1rem;       /* 16px */
  --space-24: 1.5rem;     /* 24px */
  --space-32: 2rem;       /* 32px */
  --space-40: 2.5rem;     /* 40px */
  --space-48: 3rem;       /* 48px */
  --space-56: 3.5rem;     /* 56px */
  --space-64: 4rem;       /* 64px */
  --space-72: 4.5rem;     /* 72px */
  --space-80: 5rem;       /* 80px */
  --space-88: 5.5rem;     /* 88px */
  --space-96: 6rem;       /* 96px */
  --space-104: 6.5rem;    /* 104px */
  --space-112: 7rem;      /* 112px */
  --space-120: 7.5rem;    /* 120px */
  --space-128: 8rem;      /* 128px */
  --space-136: 8.5rem;    /* 136px */
  --space-144: 9rem;      /* 144px */
  --space-152: 9.5rem;    /* 152px */
  --space-160: 10rem;     /* 160px */
  --space-168: 10.5rem;   /* 168px */
  --space-176: 11rem;     /* 176px */

  @media screen and (max-width: 768px) {
    --space-2: 0.0625rem;   /* 1px */
    --space-4: 0.125rem;    /* 2px */
    --space-8: 0.25rem;     /* 4px */
    --space-12: 0.375rem;   /* 6px */
    --space-16: 0.5rem;     /* 8px */
    --space-24: 0.75rem;    /* 12px */
    --space-32: 1rem;       /* 16px */
    --space-40: 1.25rem;    /* 20px */
    --space-48: 1.5rem;     /* 24px */
    --space-56: 1.75rem;    /* 28px */
    --space-64: 2rem;       /* 32px */
    --space-72: 2.25rem;    /* 36px */
    --space-80: 2.5rem;     /* 40px */
    --space-88: 2.75rem;    /* 44px */
    --space-96: 3rem;       /* 48px */
    --space-104: 3.25rem;   /* 52px */
    --space-112: 3.5rem;    /* 56px */
    --space-120: 3.75rem;   /* 60px */
    --space-128: 4rem;      /* 64px */
    --space-136: 4.25rem;   /* 68px */
    --space-144: 4.5rem;    /* 72px */
    --space-152: 4.75rem;   /* 76px */
    --space-160: 5rem;      /* 80px */
    --space-168: 5.25rem;   /* 84px */
    --space-176: 5.5rem;    /* 88px */
  }
}

/* Font Styles */
.H1-regular {
  font-family: 'Kontrapunkt Miki', sans-serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 83.2px;
  letter-spacing: 1.28px;
}

.H2-bold {
  font-family: 'Kontrapunkt Miki', sans-serif;
  font-weight: 700; /* bold */
  font-size: 32px;
  line-height: 44.8px;
  letter-spacing: 0;
}

.H2-regular {
  font-family: 'Kontrapunkt Miki', sans-serif;
  font-weight: 400; /* regular */
  font-size: 32px;
  line-height: 44.8px;
  letter-spacing: 0;
}

.H3-bold {
  font-family: 'Kontrapunkt Miki', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0;
}

.H3-regular {
  font-family: 'Kontrapunkt Miki', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0;
}

.Body-XL-semibold {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0;
}

.Body-XL-regular {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0;
}

.Body-L-regular {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

.Body-L-medium {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

.Caption-02-medium {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
}

.Caption-03-regular {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
}