/* Shared button system — Ard Labs Break Room */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 2px);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-main, 'Fira Code', monospace);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn:active { transform: scale(0.98); transition: transform 0.1s ease; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Size variants ── */

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 14px 36px;
  font-size: 1.1rem;
}

.btn-full { width: 100%; }

/* ── Color variants ── */

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

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

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

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

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Back button ── */

.back-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 2px);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-family: var(--font-main, 'Fira Code', monospace);
  transition: border-color 0.2s, color 0.2s;
}
.back-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Loading spinner ── */

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}