/* ==========================================================================
   CASA PIETRA — COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTÃO — componente $Button do Figma
   Tipografia igual ao text style "Label": Geologica ExtraLight 16 / lh 1 / ls 0
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-family-03);
  font-weight: var(--font-weight-extralight);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-default);
  border-radius: var(--border-radius-none);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* Variante vazada — CTA do hero. Figma: 24px/16px, borda 1px gray-100 */
.btn--outline {
  padding: 16px 24px;
  border: var(--border-width-default) solid var(--color-gray-100);
  color: var(--color-gray-100);
  background-color: transparent;
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-gray-100);
  color: var(--color-button-solid-text);
}

/* Variante sólida — botão CONTATO do header. Figma: 110x40, sem borda */
.btn--solid {
  padding: 12px 16px;
  border: 0;
  background-color: var(--color-gray-100);
  color: var(--color-button-solid-text);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background-color: var(--color-white);
}

/* Foco visível sobre fundo escuro — o outline padrão (primary) some no vídeo */
.btn:focus-visible {
  outline: var(--border-width-md) solid var(--color-white);
  outline-offset: 3px;
}

.btn.is-success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}

/* Variante aba — seletor de plantas. Mesma geometria da .btn--outline.
   ⚠ O texto inativo em gray-500 sobre o fundo claro dá 3.9:1, abaixo dos
   4.5:1 da WCAG AA para texto normal. Cor vem do Figma. */
.btn--tab {
  padding: 16px 24px;
  border: var(--border-width-default) solid var(--color-gray-500);
  color: var(--color-gray-500);
  background-color: transparent;
}

.btn--tab:hover,
.btn--tab:focus-visible {
  border-color: var(--color-primary-shade-1);
  color: var(--color-primary-shade-1);
}

.btn--tab[aria-selected="true"] {
  background-color: var(--color-primary-shade-1);
  border-color: var(--color-primary-shade-1);
  color: var(--color-gray-100);
}

.btn--tab:focus-visible {
  outline: var(--border-width-md) solid var(--color-primary-shade-1);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   TÍTULO DE DESTAQUE
   Quentin na escala --display-font-size (40 / 48 / 64). Usado no hero e nos
   títulos de seção. Cada seção define a própria cor.
   -------------------------------------------------------------------------- */

.title-display {
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-font-size);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

/* --------------------------------------------------------------------------
   SKIP LINK — acessibilidade de teclado
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 16px;
  background-color: var(--color-gray-100);
  color: var(--color-button-solid-text);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

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