.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.is-disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Sizes */
.btn-sm { padding: 6px 10px; font-size: 14px; }
.btn-md { padding: 8px 12px; font-size: 15px; }
.btn-lg { padding: 12px 16px; font-size: 16px; }
.btn-block { width: 100%; }

/* Variants */
.btn-primary { border-color: var(--accent); color: var(--text-on-accent); background: var(--accent); }
.btn-primary:hover { filter: brightness(1.05); color: var(--text-on-accent); }
.btn-success { border-color: var(--success); color: var(--text-on-success); background: var(--success); }
.btn-success:hover { filter: brightness(1.05); color: var(--text-on-success); }
.btn-danger { color: var(--text-on-danger); background: var(--danger); }
.btn-danger:hover { filter: brightness(1.05); color: var(--text-on-danger); }
.btn-ghost { background: rgba(255,255,255,0.02); }
.btn-link { border-color: transparent; background: transparent; color: var(--accent); }
.btn-link:hover { color: var(--accent); border-color: transparent; text-decoration: underline; }