/* Button: primary (one per screen), secondary, ghost. Sizes: default 56px, kid 64px, parent 40px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover, .btn--primary:active { background: var(--brand-strong); color: var(--on-brand); }
.btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { color: var(--ink); box-shadow: var(--shadow-lift); }
.btn--ghost { background: transparent; color: var(--ink-muted); }
.btn--ghost:hover { color: var(--ink); }
.btn--danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn--kid { height: 64px; border-radius: var(--radius-lg); font-size: 20px; padding: 0 var(--space-8); }
.btn--parent { height: 40px; font-size: 15px; padding: 0 var(--space-4); border-radius: 12px; }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
/* Turbo disables the clicked button while its form is sent: still blocked, but not greyed out */
form[aria-busy="true"] .btn:disabled { opacity: 1; cursor: progress; }

/* A form that only wraps a button (button_to) should not change the layout */
form.button_to { display: contents; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--info);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }