/* FONTES */
/* Roboto  */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
/* Fira */
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
/* Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
/* Manrope */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
/* Neulis Cursive */
@import url("https://use.typekit.net/xom3ule.css");
/* Satoshi */
@import url("https://fonts.cdnfonts.com/css/satoshi");
/* Code */
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  /* Fonta Familys */
  --font-family-Roboto: "Roboto", sans-serif;
  --font-family-Fira: "Fira Sans", sans-serif;
  --font-family-Poppins: "Poppins", sans-serif;
  --font-family-Manrope: "Manrope", sans-serif;
  --font-family-Neulis: "neulis-cursive", sans-serif;
  --font-family-Satoshi: "Satoshi", sans-serif;
  --font-family-Code: "Source Code Pro", monospace;
  /* Tamanhos */
  --tags: 0.875em;
  /* 14px - Tags */
  --font-size-sm: 1em;
  /* 16px - Legend */
  --font-size-p: 1.125em;
  /* 18px - paragraph--medium*/
  --font-size-md: 1.5em;
  /* 24px - Heading 4 */
  --font-size-lg: 1.75em;
  /* 28px - Heading 3 */
  --font-size-xl: 2em;
  /* 32px - Heading 2 */
  --font-size-2xl: 2.25em;
  /*  36px - Heading 1 */
  --font-size-3xl: 2.25em;
  /* 48px - Display */
  /* Entrelinhas */
  --line-height-tight: 100%;
  --line-height-medium: 150%;
  --line-height-distant: 180%;
  /* Pesos  */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Tipografia */
.code {
  font-family: var(--font-family-code);
  line-height: var(--line-height-medium);
  font-size: var(--font-size-p) !important;
  color: var(--text--Anil);
}

.tags {
  font-family: var(--font-family-body);
  font-size: var(--tags) !important;
  /* Tamanho para tags */
  line-height: var(--line-height-medium) !important;
  margin: 0;
}

.legend {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm) !important;
  /* Tamanho para legenda */
  line-height: var(--line-height-distant) !important;
  color: #000000;
  margin: 0;
}

.paragraph {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  /* Tamanho para parágrafo */
  line-height: var(--line-height-distant);
  margin: 0 0 0.5rem 0;
}

.paragraph--medium {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  /* Tamanho para parágrafo */
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
}

.paragraph--tight {
  font-family: var(--font-family-body);
  font-size: var(--font-size-p);
  /* Tamanho para parágrafo */
  line-height: var(--line-height-tight);
  margin: 0 0 0.5rem 0;
}

.heading4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md) !important;
  /* Tamanho para H4 */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.heading3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg) !important;
  /* Tamanho para H3 */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.heading2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl) !important;
  /* Tamanho para H2 */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.heading1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl) !important;
  /* Tamanho para H1 */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.display {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl) !important;
  /* Tamanho para Display */
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-medium);
  margin: 0 0 0.5rem 0;
  padding: 0;
}

/* Listas */
/* Estilo para listas não ordenadas */
.list-ul {
  margin: 1rem 0;
}

.list-ul .list-item::marker {
  font-size: 0.875rem;
}

/* Estilo para listas ordenadas */
.list-ol {
  margin: 1rem 0;
}

.list-ol .list-item::marker {
  font-size: var(--font-family-body);
}

/* Estilo para os itens da lista */
.list-item {
  font-size: var(--font-family-body);
  line-height: var(--line-height-medium);
  margin-bottom: 0.5rem;
}

/* Truncates */
.truncate--two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.truncate--three-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.truncate--four-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* OUTROS */
.text-link {
  color: var(--Anil);
  text-decoration: underline !important;
}

.text-link:hover {
  color: var(--Marinho);
}

/* Font Weights */
.font-weight--regular {
  font-weight: var(--font-weight-regular) !important;
  /* 400 */
}

.font-weight--medium {
  font-weight: var(--font-weight-medium) !important;
  /* 500 */
}

.font-weight--semibold {
  font-weight: var(--font-weight-semibold) !important;
  /* 600 */
}

.font-weight--bold {
  font-weight: var(--font-weight-bold) !important;
  /* 700 */
}

/* TEXT ALIGN */
.text__left {
  text-align: left;
}

.text__right {
  text-align: right;
}

.text__center {
  text-align: center;
}

/* ===============================
   CORES - TEXTOS
================================== */

/* Anil */
.text--Anil {
  color: var(--Anil) !important;
}

/* Marinho */
.text--Marinho {
  color: var(--Marinho) !important;
}

/* ===== NEUTRAL ===== */
.text-neutral-300 {
  color: var(--color-neutral-300) !important;
}

.text-neutral-600 {
  color: var(--color-neutral-600) !important;
}

.text-neutral-900 {
  color: var(--color-neutral-900) !important;
}

.text-neutral-950 {
  color: var(--color-neutral-950) !important;
}

/* ===== BLUE ===== */
.text-blue-300 {
  color: var(--color-blue-300) !important;
}

.text-blue-600 {
  color: var(--color-blue-600) !important;
}

.text-blue-900 {
  color: var(--color-blue-900) !important;
}

.text-blue-950 {
  color: var(--color-blue-950) !important;
}

/* ===== TURQUOISE ===== */
.text-turquoise-300 {
  color: var(--color-turquoise-300) !important;
}

.text-turquoise-600 {
  color: var(--color-turquoise-600) !important;
}

.text-turquoise-900 {
  color: var(--color-turquoise-900) !important;
}

.text-turquoise-950 {
  color: var(--color-turquoise-950) !important;
}

/* ===== RED ===== */
.text-red-300 {
  color: var(--color-red-300) !important;
}

.text-red-600 {
  color: var(--color-red-600) !important;
}

.text-red-900 {
  color: var(--color-red-900) !important;
}

.text-red-950 {
  color: var(--color-red-950) !important;
}

/* ===== YELLOW ===== */
.text-yellow-300 {
  color: var(--color-yellow-300) !important;
}

.text-yellow-600 {
  color: var(--color-yellow-600) !important;
}

.text-yellow-900 {
  color: var(--color-yellow-900) !important;
}

.text-yellow-950 {
  color: var(--color-yellow-950) !important;
}

/* ===== PURPLE ===== */
.text-purple-300 {
  color: var(--color-purple-300) !important;
}

.text-purple-600 {
  color: var(--color-purple-600) !important;
}

.text-purple-900 {
  color: var(--color-purple-900) !important;
}

.text-purple-950 {
  color: var(--color-purple-950) !important;
}

/* BREAKPOINTS */
/* Dispositivos médios (telefones, de 375px a 280px) */
@media (max-width: 425px) {
  .Code {
    font-size: var(--font-size-sm);
  }

  .tags {
    font-size: var(--tags);
  }

  .legend {
    font-size: var(--font-size-tags);
  }

  .paragraph--medium {
    font-size: var(--font-size-sm);
  }

  .heading4 {
    font-size: var(--font-size-p);
  }

  .heading3 {
    font-size: var(--font-size-md);
  }

  .heading2 {
    font-size: var(--font-size-lg);
  }

  .heading1 {
    font-size: var(--font-size-xl);
  }

  .display {
    font-size: var(--font-size-2xl);
  }
}