/* =============================================================
   Static Sites DS — components
   Botões (3 tamanhos × 4 variações) e card.
   Cor e fonte do botão variam por projeto; aqui usamos a paleta
   de exemplo. Peso sempre 400. Depende de tokens.css + base.css.
   ============================================================= */

/* ---------- Botão: base ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: var(--ff);
  font-weight: var(--btn-fw);   /* sempre 400 */
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ---------- Botão: tamanhos (escala de fonte própria) ---------- */
.btn--sm { font-size: var(--btn-sm-fs); padding: var(--btn-sm-py) var(--btn-sm-px); }
.btn--md { font-size: var(--btn-md-fs); padding: var(--btn-md-py) var(--btn-md-px); } /* px 48 = exceção */
.btn--lg { font-size: var(--btn-lg-fs); padding: var(--btn-lg-py) var(--btn-lg-px); }

/* ---------- Botão: variações ---------- */
.btn--primary {
  background: var(--c-primary);
  color: var(--c-50);
}
.btn--primary:hover { background: var(--c-primary-strong); }

.btn--secondary {
  background: transparent;
  color: var(--c-primary-strong);
  border-color: var(--c-primary);
}
.btn--secondary:hover { background: var(--c-100); }

.btn--tertiary {
  background: transparent;
  color: var(--c-primary-strong);
  border-color: transparent;
}
.btn--tertiary:hover { background: var(--c-100); }

/* Botão de ícone — quadrado, só o ícone */
.btn--icon {
  background: var(--c-primary);
  color: var(--c-50);
  padding: var(--sp-16);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
}
.btn--icon:hover { background: var(--c-primary-strong); }
.btn--icon svg { width: 24px; height: 24px; }

/* ---------- Card ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-32);
}
.card--raised {
  border-color: transparent;
  box-shadow: var(--shadow);  /* stack de 5 camadas — completo ou nada */
}
.card--flat {
  box-shadow: none;
}