/* ===================================
   TIPOGRAFIA PURISSIMA - TÍTULOS
   Presets para H1, H2, H3, H4
   =================================== */

/* 1) Tokens (CSS custom properties) */
:root {
  /* Família/tuning de títulos */
  --heading-font: "Brandon Grotesque", brandon-grotesque, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-wdth: 100;                  /* para variable fonts */
  --heading-weight: 900;                /* peso padrão do projeto para títulos */
  --heading-transform: uppercase;       /* casing padrão */

  /* Alinhamento padrão global dos títulos */
  --heading-align: left;

  /* Escalas sugeridas (clamp) */
  /* H1 */
  --h1-size-min: 2rem;                  /* 32px */
  --h1-size-max: 2.625rem;              /* 42px */
  --h1-line-height: 1.15;               /* ~36.8–48.3px */

  /* H2 */
  --h2-size-min: 1.625rem;              /* 26px */
  --h2-size-max: 2rem;                  /* 32px */
  --h2-line-height: 1.2;

  /* H3 "EXATO" */
  --h3-size-fixed: 23px;
  --h3-line-height-fixed: 27.6px;       /* 23 * 1.2 */
  --h3-letter-spacing: 0;

  /* H4 compacto */
  --h4-size-fixed: 18px;
  --h4-line-height: 1.25;               /* ~22.5px */

  /* Defaults utilitários */
  --heading-letter-spacing: 0;
  --heading-text-wrap-mode: wrap;
  --heading-text-wrap-style: pretty;
}

/* 2) Presets de TÍTULO */

/* H1 — heading-xl (responsivo com clamp) */
.heading-xl {
  /* família & variações */
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: var(--heading-weight);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" var(--heading-wdth);

  /* tamanho/linha */
  font-size: clamp(var(--h1-size-min), 1.2rem + 1.5vw, var(--h1-size-max));
  line-height: var(--h1-line-height);

  /* tracking & alinhamento & casing */
  letter-spacing: var(--heading-letter-spacing);
  text-align: var(--heading-align);
  text-transform: var(--heading-transform);

  /* wrap/comportamento */
  text-wrap-mode: var(--heading-text-wrap-mode);
  text-wrap-style: var(--heading-text-wrap-style);
  -webkit-text-size-adjust: 100%;

  /* layout neutro */
  margin: 0;
  display: block;
}

/* H2 — heading-lg (responsivo com clamp) */
.heading-lg {
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: var(--heading-weight);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" var(--heading-wdth);

  font-size: clamp(var(--h2-size-min), 1.05rem + 0.8vw, var(--h2-size-max));
  line-height: var(--h2-line-height);

  letter-spacing: var(--heading-letter-spacing);
  text-align: var(--heading-align);
  text-transform: var(--heading-transform);

  text-wrap-mode: var(--heading-text-wrap-mode);
  text-wrap-style: var(--heading-text-wrap-style);
  -webkit-text-size-adjust: 100%;

  margin: 0;
  display: block;
}

/* H3 — heading-md-exact (EXATO: 23px, 900, uppercase, center, LH 27.6px) */
.heading-md-exact {
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: var(--heading-weight);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" var(--heading-wdth);

  font-size: var(--h3-size-fixed);             /* 23px */
  line-height: var(--h3-line-height-fixed);    /* 27.6px */
  letter-spacing: var(--h3-letter-spacing);    /* 0 */
  text-transform: var(--heading-transform);    /* uppercase */

  /* este preset replica computed com alinhamento CENTRAL */
  text-align: center;

  text-wrap-mode: var(--heading-text-wrap-mode);
  text-wrap-style: var(--heading-text-wrap-style);
  -webkit-text-size-adjust: 100%;

  margin: 0;
  display: block;
}

/* H4 — heading-sm (compacto, fixo) */
.heading-sm {
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: var(--heading-weight);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" var(--heading-wdth);

  font-size: var(--h4-size-fixed);     /* 18px */
  line-height: var(--h4-line-height);  /* 1.25 (~22.5px) */

  letter-spacing: var(--heading-letter-spacing);
  text-align: var(--heading-align);
  text-transform: var(--heading-transform);

  text-wrap-mode: var(--heading-text-wrap-mode);
  text-wrap-style: var(--heading-text-wrap-style);
  -webkit-text-size-adjust: 100%;

  margin: 0;
  display: block;
}

/* 3) Utilitários opcionais */
/* alinhamento */
.is-left   { text-align: left   !important; }
.is-center { text-align: center !important; }
.is-right  { text-align: right  !important; }

/* casing */
.is-normalcase { text-transform: none !important; }
.is-lowercase  { text-transform: lowercase !important; }
.is-uppercase  { text-transform: uppercase !important; }