:root {
  /* --- COLORS --- */
  --primary-color: #1d1d1b;
  --secondary-color: #00b3d0;
  --darker-secondary-color: #005D72;

  --hero-title-color: white;

  --highlight-row-text-color: white;
  --highlight-row-text-color-important: #00b3d0;

  --banner-text-color: white;
  --banner-highlight-text-color: #00b3d0;

  --showcase-gradient: linear-gradient(120deg,rgba(0, 179, 208, 1) 45.8%, rgba(2, 172, 199, 1) 0%);
  --navbar-height: 88px;

  /* --- FONTS SIZES --- */
  --hero-home-title-size: 1.5rem;
  --hero-title-size: 2.5rem;
  --hero-subtitle-size: 1.5rem;

  --banner-title-size: 3.5rem;

  --title-S: 1.25rem;
  --title-M: 1.5rem;
  --title-L: 2rem;
  --title-XS: 1rem;
  --body-S: 0.875rem;
  --body-L: 1.125rem;
  --default-font-size: 1rem;

  --line-height-120: 1.2;
  --line-height-125: 1.25;
  --line-height-130: 1.3;
  --line-height-140: 1.4;
  --line-height-150: 1.5;
  --line-height-166: 1.66;
  --line-height-175: 1.75;
  --line-height-177: 1.77;
  --line-height-200: 2;

  /* --- SPACING --- */
  --space-XL: 96px;
  --space-L: 80px;
  --space-M: 40px;
  --space-S: 24px;

  /* --- SIZES --- */
  --cont-max-width: 1110px; /* Max width default cont */
  --cont-small-max-width: 728px; /* Max width smaller cont (i.e. faq)*/
  --cont-padding: 24px;
}

@media (max-width: 768px) {
  body {
    --space-XL: 64px;
    --space-L: 64px;
    --space-M: 24px;

    --title-XS: 0.875rem;
    --title-S: 1.125rem;
    --title-M : 1.25rem;
    --title-L: 1.5rem;
    --title-XL: 2rem;


    --body-S: 0.75rem;
    --body-L: 1rem;
    --default-font-size: 0.875rem;

    --hero-title-size: 2rem;
    --hero-subtitle-size: 1.125rem;
    --hero-home-title-size: 1.25rem;

    --banner-title-size: 2rem;

  }
}