/* Fontes locais ------------------------------------------------------------ */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Tokens tipográficos ------------------------------------------------------ */

:root {
  --font-heading: "Manrope", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-display: clamp(2.375rem, 1.8333rem + 2.4074vw, 4rem);
  --font-size-h1: var(--font-size-display);
  --font-size-h2: clamp(1.875rem, 1.5833rem + 1.2963vw, 2.75rem);
  --font-size-h3: clamp(1.4375rem, 1.3333rem + 0.463vw, 1.75rem);
  --font-size-h4: clamp(1.1875rem, 1.1458rem + 0.1852vw, 1.3125rem);
  --font-size-h5: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --font-size-h6: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);
  --font-size-lead: clamp(1.0625rem, 1rem + 0.2778vw, 1.25rem);
  --font-size-body-large: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --font-size-body: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);
  --font-size-small: 0.875rem;
  --font-size-caption: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);
  --font-size-menu: 0.875rem;
  --font-size-button: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
  --font-size-eyebrow: clamp(0.6875rem, 0.6667rem + 0.0926vw, 0.75rem);

  --line-height-h1: 1.08;
  --line-height-h2: 1.15;
  --line-height-h3: 1.22;
  --line-height-heading: 1.3;
  --line-height-body: 1.65;
  --line-height-interface: 1.3;
  --line-height-label: 1.4;

  --letter-spacing-h1: -0.035em;
  --letter-spacing-h2: -0.03em;
  --letter-spacing-h3: -0.025em;
  --letter-spacing-heading: -0.015em;
  --letter-spacing-label: 0.08em;

  --measure-display: 14ch;
  --measure-heading: 24ch;
  --measure-body: 70ch;
  --measure-compact: 55ch;
}

/* Base global -------------------------------------------------------------- */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  text-wrap: balance;
}

h1 {
  max-inline-size: var(--measure-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  max-inline-size: var(--measure-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

p,
ul,
ol,
dl {
  max-inline-size: var(--measure-body);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

label,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

/* Utilitários tipográficos ------------------------------------------------- */

.text-display {
  max-inline-size: var(--measure-display);
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  text-wrap: balance;
}

.text-heading {
  max-inline-size: var(--measure-heading);
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  text-wrap: balance;
}

.text-lead {
  max-inline-size: var(--measure-compact);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  text-wrap: pretty;
}

.text-body-large {
  max-inline-size: var(--measure-body);
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.text-body {
  max-inline-size: var(--measure-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.text-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.text-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.text-menu {
  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-interface);
}

.text-button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-interface);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

.font-weight-medium {
  font-weight: var(--font-weight-medium);
}

.font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
  font-weight: var(--font-weight-bold);
}

.font-weight-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.measure-display {
  max-inline-size: var(--measure-display);
}

.measure-heading {
  max-inline-size: var(--measure-heading);
}

.measure-body {
  max-inline-size: var(--measure-body);
}

.measure-compact {
  max-inline-size: var(--measure-compact);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}