/* Buttons (08 §7.2). .btn + one variant: --primary | --secondary | --text. Add --pill for test actions. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--pill { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 88%, var(--color-text)); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-text); }
.btn--text { background: none; border: 0; padding: 0 var(--space-2); color: var(--color-primary); min-height: var(--tap-min); }
.btn--text:hover { text-decoration: underline; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* Icon-only button (settings, theme, menu): square tap target */
.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--color-text);
}
.icon-btn:hover { border-color: var(--color-border); }
.icon-btn svg { width: var(--icon-md); height: var(--icon-md); }

@media (max-width: 575.98px) { .btn--block-sm { width: 100%; } }