/* Buttons. Colors come from the surrounding theme (see themes.css). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h, 52px);
  padding-inline: var(--btn-px, var(--space-6));
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--btn-fs, 1.0625rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn[hidden] { display: none; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); }

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
  font-weight: var(--fw-medium);
}
.btn--secondary:hover {
  color: var(--btn-secondary-hover-fg);
  border-color: var(--btn-secondary-hover-border);
}

/* Smaller variant for the header bar. */
.btn--compact { --btn-h: 44px; --btn-px: 18px; --btn-fs: 0.9375rem; }

@media (min-width: 900px) {
  .btn { --btn-h: 56px; --btn-px: 30px; --btn-fs: 1.125rem; }
  .btn--compact { --btn-h: 48px; --btn-px: 24px; --btn-fs: 1rem; }
}