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

:root {
  /* Paleta de Cores */
  --primary-purple-color: #541fc4;
  --secondary-purple-color: #6629dc;
  --text-color: #000;
  --text-color-white: #fff;
  --text-secondary-color: #878787;
  --background-white-color: #f8f8f8;
  --hover-button-color: #dd1367;
  --span-orange-color: #ee7435;
  --gradient-light-purple: #a666fa;
  --gradient-dark-purple: #7731f3;

  /* Pesos e Fontes */
  --font-family-base: "Inter", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* Tamanho das fontes no mobile */
  /* Calc de PX p/ REM: https://nekocalc.com/px-to-rem-converter */
  --font-size-text: 1rem; /* 16px */
  --font-size-button: 1rem; /* 16px */
  --font-size-button-highlight: 1.0625rem; /* 17px */
  --font-size-button-main-menu: 1.25rem; /* 20px */
  --font-size-title: 1.5rem; /* 24px */
  --font-size-section-title: 1.125rem; /* 18px */
  --font-size-section-subtitle: 1rem; /* 16px */
  --font-size-exit-button: 0.713rem; /* 11.4px */
  --font-size-exit-button-desktop: 1rem;
}

/* Tamanho das fontes em Tablets e Desktop */
/* Calc de PX p/ REM: https://nekocalc.com/px-to-rem-converter */
@media (min-width: 768px) {
  :root {
    --font-size-text: 1.125rem; /* 18px */
    --font-size-section-title: 2.625rem; /* 42px */
    --font-size-section-subtitle: 1.9563rem; /* 31.3px */
    --font-size-button: 2.0625rem; /* 33px */
    --font-size-button-highlight: 2.6094rem; /* 41.75px */
    --font-size-title: 1.875rem; /* 30px */
  }
}