/* =========================================================================
   Etéra Work — Base e Estilos de Texto
   Espelha os "Font Tokens" do style guide (node 4207:1340).
   ========================================================================= */

html {
  font-size: 100%; /* 1rem = 16px */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-01);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

/* -------------------------------------------------------------------------
   Headings
   As classes .h1 / .h2 / .h3 permitem aplicar o estilo visual sem quebrar a
   hierarquia semântica da página (um único <h1>, sem pular níveis).
   ------------------------------------------------------------------------- */

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
}

h1,
.h1 {
  font-size: var(--h1-font-size);
}

h2,
.h2 {
  font-size: var(--h2-font-size);
}

h3,
.h3 {
  font-size: var(--h3-font-size);
}

/* -------------------------------------------------------------------------
   Parágrafos
   ------------------------------------------------------------------------- */

p,
.p {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.p-sm {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-sm);
}

.p-xs-medium {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-default);
}

/* Estilos presentes no arquivo do Figma mas ausentes da página de Font Tokens
   do style guide. Adicionados a partir do uso real na Section 1. */

.p-xs-light {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-default);
}

.label-light {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
}

/* -------------------------------------------------------------------------
   Labels — TT Norms
   O Figma indica Light (300) no estilo Label, mas o handoff só traz o peso
   Regular; por decisão do projeto, Label usa Regular (400).
   ------------------------------------------------------------------------- */

.label {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-md);
}

.label-sm {
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-md);
}

/* -------------------------------------------------------------------------
   Modificadores de peso
   Os estilos P, P SM e P XS Medium aceitam mais de um peso no style guide.
   ------------------------------------------------------------------------- */

.u-fw-light {
  font-weight: var(--font-weight-light);
}

.u-fw-regular {
  font-weight: var(--font-weight-regular);
}

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

/* -------------------------------------------------------------------------
   Compensação do tracking final
   O navegador conta o letter-spacing depois do último caractere da linha ao
   decidir a quebra; o Figma não. Em textos com tracking largo isso quebra
   uma palavra antes do previsto. Os 0.3em extras são invisíveis: a mancha
   de texto continua dentro da caixa do design.
   ------------------------------------------------------------------------- */

.u-track-fit {
  width: calc(100% + var(--letter-spacing-md));
}

/* -------------------------------------------------------------------------
   Quebra de linha condicional
   Reproduz as quebras manuais do Figma sem forçá-las nos breakpoints em que
   o texto quebra naturalmente.
   ------------------------------------------------------------------------- */

.u-br-lg {
  display: none;
}

@media (min-width: 1366px) {
  .u-br-lg {
    display: inline;
  }
}

/* -------------------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------------------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 12px 16px;
  background-color: var(--white);
  color: var(--black);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
}