/* ---------- VARIABLES ---------- */
:root {
  /* line-height */
  --lh-120: 120%;

  /* font-weight */
  --fw-bold: 700;
  --fw-regular: 400;

  /* font-style */
  --fs-italic: italic;

  /* letter-spacing (en em) */
  --ls-0: 0em;
  --ls-0-1: 0.02em;
  --ls-0-2: 0.2em;
}

/* ---------- AGRUPACIÓN POR FAMILIA TIPOGRÁFICA ---------- */

/* Kanit Bold Italic (h1-h4) */
.ag-h1,
.ag-h2,
.ag-h3,
.ag-h4 {
  font-family: "Kanit", sans-serif;
  font-weight: var(--fw-bold);
  font-style: var(--fs-italic);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-0);
  text-decoration: none;
  color: var(--on-background);
}

/* Inria Sans Bold Italic (button-text) */

.button-text {
  font-family: "Inria Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-style: var(--fs-italic);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-0);
  color: var(--on-accent);
  text-decoration: none;
}

/* Inria Sans Regular Italic (body-text, body-small-text, caption-text) */
.body-text,
.body-small-text,
.caption-text {
  font-family: "Inria Sans", sans-serif;
  font-weight: var(--fw-regular);
  font-style: var(--fs-italic);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-0);
  text-decoration: none;
  color: var(--on-background);
}

.ag-h5 {
  font-family: "Inria Sans", sans-serif;
  font-weight: var(--fw-bold);
  font-style: var(--fs-italic);
  line-height: var(--lh-120);
  letter-spacing: var(--ls-0);
  text-decoration: none;
  color: var(--on-background);
}

/* ---------- TAMAÑOS Y CASES ---------- */
.ag-h1 {
  font-size: 48px;
  text-transform: uppercase;
}
.ag-h2 {
  font-size: 40px;
  text-transform: uppercase;
}
.ag-h3 {
  font-size: 36px;
  text-transform: uppercase;
}
.ag-h4 {
  font-size: 32px;
  text-transform: uppercase;
}
.ag-h5 {
  font-size: 24px;
}

.button-text {
  font-size: 16px;
  text-transform: uppercase;
}

.body-text {
  font-size: 16px;
  text-transform: none;
}

.body-small-text {
  font-size: 14px;
  text-transform: none;
}
.caption-text {
  font-size: 12px;
  text-transform: none;
}

/************* media queries *************/

@media screen and (max-width: 925px) {
  .ag-h1 {
    font-size: calc(48px - 8px);
  }
  .ag-h2 {
    font-size: calc(40px - 8px);
  }
  .ag-h3 {
    font-size: calc(36px - 8px);
  }
  .ag-h4 {
    font-size: calc(32px - 8px);
  }
  .ag-h5 {
    font-size: calc(24px - 4px);
  }
}

/************* clases para colores en las types *************/

.text-color-background {
  color: var(--background);
}

.text-color-on-background {
  color: var(--on-background);
}