/* buttons — single .btn component with modifier classes */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-1);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  border: 0;
  cursor: pointer;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background .15s var(--ease), opacity .15s, transform .1s;
  user-select: none;
  text-align: center;
  justify-content: center;
}
.btn:hover   { background: var(--ink-2); }
.btn:active  { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .38; cursor: not-allowed; pointer-events: none;
}
.btn svg { width: 13px; height: 13px; flex-shrink: 0; }

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

.btn--accent  { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.1); background: var(--accent); }

.btn--ghost {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--hair-2);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hair-strong); }

.btn--danger  { background: var(--overdue); color: #fff; }
.btn--danger:hover { background: var(--overdue-deep); }

.btn--icon {
  padding: 7px;
  aspect-ratio: 1;
  border-radius: var(--r-1);
}

.btn--full { width: 100%; justify-content: center; }

.btn--sm { padding: 5px 10px; font-size: var(--t-xs); }
.btn--sm svg { width: 11px; height: 11px; }

/* Spinner inside button */
.btn-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }