/*
 * Primitivas compartidas que NO son del header.
 *
 * Los botones vivian dentro del shell del header, pero el blog los usa en su
 * 404, en el CTA de autor y en entradas relacionadas. Dejarlos en una hoja de
 * header haria que esas tres vistas dependieran de ella.
 *
 * Depende del tokens.css del tema.
 */

.fz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--fz-radius-lg);
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-semibold);
  line-height: 1.25rem;
  text-decoration: none;
  transition: background-color var(--fz-transition), border-color var(--fz-transition),
    color var(--fz-transition), transform var(--fz-transition);
}

.fz-btn--ghost {
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  color: var(--fz-text);
}

/* El home no cambia el fondo: solo el borde y el texto pasan a azul. */
.fz-btn--ghost:hover {
  background: var(--fz-surface);
  border-color: var(--fz-blue);
  color: var(--fz-blue);
}

.fz-btn--primary {
  background: var(--fz-blue);
  border: 1px solid var(--fz-blue);
  color: var(--fz-text-inverse);
}

.fz-btn--primary:hover {
  background: var(--fz-blue-hover);
  border-color: var(--fz-blue-hover);
  color: var(--fz-text-inverse);
}

.fz-btn--primary:active {
  transform: scale(0.98);
}