/* ===================================
    Google font
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,700&display=swap');

/* Variables para colores */
:root {
  /* Modo claro */
  /* Texto */
  --text-primary: #1a1a1a;
  --text-secondary: #616161;
  --text-brand: #328374;
  --text-invert: #1a1a1a;
  --text-brand-light: #3bd7ba;
  --text-text2-invert: #fafafa;

  /* Superficies */
  --surface-primary: #ffffff;
  --surface-secondary: #f7fef9;
  --surface-secondary-filter: #f7fef9;
  --surface-brand-dark: #328374;
  --surface-invert: #1a1a1a;
  --surface-brand-mid: #4db8a4;
  --surface-brand-light: #3bd7ba;
  --surface-grey: #ebeff5;

  /* Bordes */
  --border-primary: #1a1a1a;
  --border-disable: #bdbdbd;
  --border-secondary: #1a1a1a;
  --border-brand: #4db8a4;

  /* Divisores */
  --divider-primary: #ececec;

  /* Icons */
  --bs-form-select-bg-img: url('../assets/icon/chevron-down.svg');
}

.dark-mode {
  /* Modo oscuro */
  /* Texto */
  --text-primary: #ffffff;
  --text-secondary: #ececec;
  --text-brand: #3bd7ba;
  --text-invert: #ececec;
  --text-brand-light: #3bd7ba;
  --text-text2-invert: #1a1a1a;

  /* Superficies */
  --surface-primary: #1a1a1a;

  --surface-secondary: #328374;
  --surface-secondary-filter: #616161;
  --surface-brand-dark: #3bd7ba;
  --surface-invert: #ececec;
  --surface-brand-mid: #4db8a4;
  --surface-brand-light: #3bd7ba;
  --surface-grey: #616161;

  /* Bordes */
  --border-primary: #ececec;
  --border-disable: #bdbdbd;
  --border-secondary: #ececec;
  --border-brand: #328374;

  /* Divisores */
  --divider-primary: #616161;

  /* Icons */
  --bs-form-select-bg-img: url('../assets/icon/chevron-down-white.svg');
}

/* Variables para fuentes */
:root {
  --font-family-primary: 'Merriweather', serif;
  --font-family-secondary: 'Lato', sans-serif;
}

.bg-white {
  background-color: var(--surface-primary) !important;
}

.btn-green {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--surface-brand-dark);
  color: var(--text-text2-invert);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  width: 184px;
  min-height: 48px;
  height: 48px;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-green.lg {
  width: 297px;
}
