/* ═══════════════════════════════════════════
   Buttons — All button variants
   ═══════════════════════════════════════════ */

/* ─── Base ─── */
.btn {
  font-family: var(--sc-font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--sc-focus-ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ─── Sizes ─── */
.btn-sm {
  font-size: 0.78rem;
  padding: 7px 12px;
}

.btn-lg {
  font-size: 0.92rem;
  padding: 13px 24px;
}

/* ─── Primary (rust) ─── */
.btn-primary {
  background: var(--sc-rust);
  color: white;
  border-color: var(--sc-rust);
}

.btn-primary:hover {
  background: var(--sc-bark);
  border-color: var(--sc-bark);
}

.btn-primary:disabled {
  background: var(--sc-sand);
  border-color: var(--sc-sand);
}

/* ─── Secondary (outlined) ─── */
.btn-secondary {
  background: none;
  color: var(--sc-bark-faint);
  border-color: var(--sc-border);
}

.btn-secondary:hover {
  border-color: var(--sc-sand);
  color: var(--sc-bark);
}

/* ─── Ghost (no border) ─── */
.btn-ghost {
  background: none;
  color: var(--sc-bark-faint);
  border-color: var(--sc-border);
}

.btn-ghost:hover {
  border-color: var(--sc-sand);
  color: var(--sc-bark);
}

/* ─── Destructive ─── */
.btn-destructive {
  background: var(--sc-error);
  color: white;
  border-color: var(--sc-error);
}

.btn-destructive:hover {
  background: #a8392a;
  border-color: #a8392a;
}

.btn-destructive-ghost {
  background: none;
  color: var(--sc-error);
  border-color: transparent;
}

.btn-destructive-ghost:hover {
  background: var(--sc-error-subtle);
}

/* ─── Block (full-width) ─── */
.btn-block {
  width: 100%;
}