/* app/assets/stylesheets/components/buttons.css
   ─────────────────────────────────────────────────────────────────────────────
   Button system. Three variants × two sizes + icon-only.
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  border:          1px solid transparent;
  border-radius:   var(--radius-md);
  padding:         var(--space-2) var(--space-4);
  height:          36px;
  transition:      background var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor:  not-allowed;
  pointer-events: none;
}

/* ── Variants ────────────────────────────────────────────────────────────── */

/* Primary — blue fill */
.btn--primary {
  background:   var(--color-blue-600);
  color:        var(--color-white);
  border-color: var(--color-blue-600);
}
.btn--primary:hover {
  background:   var(--color-blue-700);
  border-color: var(--color-blue-700);
  color:        var(--color-white);
}

/* Ghost — outline only */
.btn--ghost {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background:   var(--tint-neutral-bg);
  color:        var(--text-primary);
  border-color: var(--color-gray-500);
}

/* Retained alias — the app is dark throughout, so this is now plain ghost. */
.btn--ghost-dark {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--border-strong);
}
.btn--ghost-dark:hover {
  background:   var(--tint-neutral-bg);
  color:        var(--text-primary);
  border-color: var(--color-gray-500);
}

/* Danger — red for destructive actions */
.btn--danger {
  background:   var(--color-red-600);
  color:        var(--color-white);
  border-color: var(--color-red-600);
}
.btn--danger:hover {
  background:   var(--color-red-700);
  border-color: var(--color-red-700);
  color:        var(--color-white);
}

/* Danger ghost */
.btn--danger-ghost {
  background:   transparent;
  color:        var(--tint-red-text);
  border-color: var(--tint-red-border);
}
.btn--danger-ghost:hover {
  background:   var(--tint-red-bg);
  color:        var(--tint-red-text);
  border-color: var(--danger-color);
}

/* ── Sizes ───────────────────────────────────────────────────────────────── */

/* Small */
.btn--sm {
  font-size: var(--text-xs);
  padding:   var(--space-1) var(--space-3);
  height:    28px;
}

/* Large */
.btn--lg {
  font-size: var(--text-md);
  padding:   var(--space-3) var(--space-6);
  height:    46px;
}

/* Full-width */
.btn--full {
  width:   100%;
  display: flex;
}

/* ── Icon-only ───────────────────────────────────────────────────────────── */

.btn--icon {
  width:   36px;
  padding: 0;
}

.btn--icon.btn--sm {
  width:  28px;
}