/*
 * Joias VIP: base do redesenho.
 * Vale só dentro de .jv (a raiz de cada módulo novo) e nas classes .jv-*, então o site antigo não muda.
 * Todo valor vem de tokens.css, que precisa carregar antes deste arquivo.
 */

/* Raiz de cada módulo novo. */
.jv {
  font-family: var(--jv-font-sans);
  font-size: var(--jv-size-body);
  font-weight: var(--jv-weight-regular);
  line-height: var(--jv-leading-normal);
  color: var(--jv-color-text);
}

.jv *,
.jv *::before,
.jv *::after {
  box-sizing: border-box;
}

/* :where() deixa estas regras sem peso: o componente muda qualquer uma com uma classe só. */
.jv :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

/* Lista sem marcador deixa de ser anunciada como lista no Safari: nesse caso, use role="list" no <ul>. */
.jv :where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jv :where(img, picture, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.jv :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.jv :where(button) {
  cursor: pointer;
}

/* Foco do teclado sempre visível (WCAG 2.4.7). Toque e mouse não mostram o contorno. */
.jv :focus-visible {
  outline: var(--jv-focus-width) solid var(--jv-color-focus);
  outline-offset: var(--jv-focus-offset);
}

/* Texto só para leitor de tela. */
.jv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Estilos de texto: os papéis que aparecem nos quadros do Figma, que ainda não tem estilos nomeados. */
.jv-text-title {
  /* nome da joia (h1) */
  font-family: var(--jv-font-display);
  font-size: var(--jv-size-title);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
}

.jv-text-heading {
  /* título de seção (h2) */
  font-family: var(--jv-font-display);
  font-size: var(--jv-size-heading);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
}

.jv-text-body {
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

.jv-text-paragraph {
  /* descrição da joia e textos longos: texto corrido, 16px (usuário, 15/10/2026) */
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
}

.jv-text-label {
  /* botões e rótulos em caixa alta */
  font-size: var(--jv-size-label);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-auto);
  text-transform: uppercase;
}

.jv-text-caption {
  /* letra miúda, como o guia de medidas */
  font-size: var(--jv-text-xs);
  line-height: var(--jv-leading-normal);
}