/* ── Button ── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  font-family:     var(--font-sans);
  font-weight:     var(--fw-medium);
  white-space:     nowrap;
  cursor:          pointer;
  border:          1px solid transparent;
  border-radius:   var(--r-md);
  transition:      background var(--dur-base) var(--ease-in-out),
                   color      var(--dur-base) var(--ease-in-out),
                   border-color var(--dur-base) var(--ease-in-out),
                   box-shadow var(--dur-base) var(--ease-in-out),
                   opacity    var(--dur-base) var(--ease-in-out);
  text-decoration: none;
  -webkit-user-select: none;
  user-select:         none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Sizes ── */
.btn-sm {
  height:      var(--input-h-sm);
  padding:     0 var(--sp-3);
  font-size:   var(--text-xs);
  border-radius: var(--r-sm);
  gap:         var(--sp-1);
}
.btn-md {
  height:    var(--input-h);
  padding:   0 var(--sp-4);
  font-size: var(--text-sm);
}
.btn-lg {
  height:    var(--input-h-lg);
  padding:   0 var(--sp-5);
  font-size: var(--text-base);
  border-radius: var(--r-lg);
}

/* ── Variants ── */
.btn-primary {
  background: var(--color-primary);
  color:      var(--color-primary-fg);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background:  var(--color-primary-hover);
  border-color:var(--color-primary-hover);
}
.btn-primary:active { background: var(--color-primary-active); }

.btn-secondary {
  background:  var(--color-surface-raised);
  color:       var(--color-text);
  border-color:var(--color-border-strong);
}
.btn-secondary:hover {
  background:  var(--color-border);
  border-color:var(--color-border-strong);
}

.btn-ghost {
  background:  transparent;
  color:       var(--color-text-secondary);
  border-color:var(--color-border-strong);
}
.btn-ghost:hover {
  background: var(--color-surface-raised);
  color:      var(--color-text);
}

.btn-danger {
  background:  var(--color-danger);
  color:       #fff;
  border-color:var(--color-danger);
}
.btn-danger:hover {
  background:  var(--color-danger-hover);
  border-color:var(--color-danger-hover);
}
.btn-danger:focus-visible { outline-color: var(--color-danger); }

.btn-outline {
  background:  transparent;
  color:       var(--color-primary);
  border-color:var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary-bg);
}

/* ── States ── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor:  not-allowed;
  pointer-events: none;
}

.btn-loading {
  pointer-events: none;
  opacity: .8;
}
.btn-loading > :not(.btn-spinner) { opacity: .4; }

/* ── Spinner ── */
.btn-spinner {
  position: absolute;
  width:  16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  animation: btn-spin .7s linear infinite;
}
.btn { position: relative; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Icon button ── */
.btn-icon {
  padding: var(--sp-1);
  border-radius: var(--r-md);
}
.btn-icon.btn-sm  { width: var(--input-h-sm); }
.btn-icon.btn-md  { width: var(--input-h); }
.btn-icon.btn-lg  { width: var(--input-h-lg); border-radius: var(--r-lg); }
.btn-icon.btn-circle { border-radius: var(--r-full) !important; }

/* ── Button group ── */
.btn-group {
  display:  inline-flex;
  gap:      0;
}
.btn-group > .btn { border-radius: 0; border-right-width: 0; }
.btn-group > .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-group > .btn:last-child  {
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-right-width: 1px;
}