/* 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(--color-gray-400);
  border-color: var(--color-gray-500);
}
.btn--ghost:hover {
  background:   rgba(255,255,255,0.08);
  color:        var(--color-white);
  border-color: var(--color-gray-300);
}

/* Ghost on light backgrounds */
.btn--ghost-dark {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--border-color);
}
.btn--ghost-dark:hover {
  background:   var(--bg-sunken);
  color:        var(--text-primary);
  border-color: var(--border-strong);
}

/* 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(--color-red-600);
  border-color: var(--color-red-600);
}
.btn--danger-ghost:hover {
  background:   var(--color-red-100);
  color:        var(--color-red-700);
}

/* ── 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;
}