/*
 * RAXE Design System — Buttons
 * All button variants, sizes, and states.
 * Depends on: tokens.css
 */

/* ── Base ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--weight-semibold);
  line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 10px var(--space-6);
  transition: var(--transition-ui);
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* ── Primary — gradient fill ── */
.btn-primary {
  background: linear-gradient(90deg, #38bdf8 0%, #e879f9 100%);
  color: var(--surface-base);
  font-weight: var(--weight-bold);
  border: none;
  box-shadow: 0 0 30px rgba(56,189,248,0.15);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 0 40px rgba(56,189,248,0.25); }
.btn-primary:active { transform: translateY(0); opacity: 1; }

/* ── Ghost — border only ── */
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(56,189,248,0.06); border-color: var(--cyan); }

/* ── Amber ghost — for secondary CTAs in intel context ── */
.btn-amber {
  background: transparent; color: var(--amber);
  font-family: var(--font-mono); letter-spacing: var(--tracking-wide);
  border-color: var(--border-amber);
}
.btn-amber:hover { background: rgba(245,158,11,0.07); }

/* ── Text — no border ── */
.btn-text {
  background: transparent; color: var(--text-brand); border-color: transparent; padding-left: 0; padding-right: 0;
}
.btn-text:hover { color: var(--text-primary); }

/* ── Sizes ── */
.btn-sm { font-size: var(--fs-label);  padding: 7px var(--space-4); }
.btn-lg { font-size: var(--fs-body);   padding: 14px var(--space-8); }
.btn-xl { font-size: var(--fs-body-lg); padding: 16px var(--space-10); font-weight: var(--weight-bold); }

/* ── Icon button ── */
.btn-icon { padding: 9px; border-radius: var(--radius-md); }
.btn-icon.btn-sm { padding: 7px; }

/* ── Loading state ── */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }