/* Buttons — fill vs. outline carries emphasis, not color */

.btn {
  --_bg: var(--ink-900); --_fg: var(--paper); --_bd: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn i { font-size: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary { --_bg: var(--ink-900); --_fg: var(--paper); --_bd: var(--ink-900); }
.btn-primary:hover { --_bg: #000; --_bd: #000; }
.btn-secondary { --_bg: var(--paper-sunken); --_fg: var(--ink-900); --_bd: var(--paper-sunken); }
.btn-secondary:hover { --_bg: var(--ink-150); --_bd: var(--ink-150); }
.btn-outline { --_bg: transparent; --_fg: var(--ink-900); --_bd: var(--ink-900); }
.btn-outline:hover { --_bg: var(--ink-900); --_fg: var(--paper); }
.btn-ghost { --_bg: transparent; --_fg: var(--ink-700); --_bd: transparent; }
.btn-ghost:hover { --_bg: var(--paper-sunken); }
.btn-danger { --_bg: var(--paper); --_fg: var(--ink-900); --_bd: var(--ink-900); border-width: 2px; }
.btn-danger:hover { --_bg: var(--ink-900); --_fg: var(--paper); }
.btn-quiet { --_bg: var(--paper-raised); --_fg: var(--ink-900); --_bd: var(--line-default); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-default);
  background: var(--paper-raised); display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); cursor: pointer; transition: all .15s ease;
}
.icon-btn:hover { background: var(--paper-sunken); border-color: var(--ink-500); }
.icon-btn i { font-size: 19px; }
.icon-btn.solid, .icon-btn.on { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }

.fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink-900); color: var(--paper); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float);
}
.fab i { font-size: 24px; }