/* ================================================================
   buttons.css — Global Button System (Bootstrap overrides)
   ================================================================ */

/* ── Base ────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1;
  border-radius: var(--radius-sm); padding: 0 16px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap; cursor: pointer; user-select: none;
  vertical-align: middle; text-decoration: none; position: relative;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
              color 140ms var(--ease), box-shadow 140ms var(--ease), transform 100ms var(--ease);
}
.btn:active:not(:disabled):not(.disabled) { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; box-shadow: none !important; }
.btn:disabled, .btn.disabled { opacity: 0.48; cursor: not-allowed; pointer-events: none; transform: none !important; }

/* ── Sizes ───────────────────────────────────────────────────── */
.btn-sm { font-size: 12px; height: 30px; padding: 0 11px; border-radius: 7px; gap: 4px; }
.btn-lg {
  font-size: 15px; font-weight: 600; height: 46px; padding: 0 24px;
  border-radius: var(--radius-md); gap: 8px; letter-spacing: -0.015em;
}

/* ── Filled variants ─────────────────────────────────────────── */

/* Primary — Indigo */
.btn-primary {
  background: linear-gradient(180deg, var(--color-brand-hi) 0%, var(--color-brand) 100%);
  border: 1px solid var(--color-brand-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(180deg, #6460f2 0%, var(--color-brand-hi) 100%);
  border-color: var(--color-brand-deep); color: #fff;
  box-shadow: 0 1px 2px rgba(79,70,229,.2), 0 4px 14px rgba(79,70,229,.32), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled):not(.disabled) {
  background: var(--color-brand-dark); box-shadow: 0 1px 2px rgba(79,70,229,.2);
  transform: translateY(0) scale(0.99);
}

/* Success — Emerald */
.btn-success {
  background: linear-gradient(180deg, var(--color-success-hi) 0%, var(--color-success) 100%);
  border: 1px solid var(--color-success-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(5,150,105,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-success:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(180deg, #34d399 0%, var(--color-success-hi) 100%);
  border-color: #065f46; color: #fff;
  box-shadow: 0 1px 2px rgba(5,150,105,.2), 0 4px 14px rgba(5,150,105,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.btn-success:active:not(:disabled):not(.disabled) {
  background: var(--color-success-dark); box-shadow: 0 1px 2px rgba(5,150,105,.2);
  transform: translateY(0) scale(0.99);
}

/* Danger — Red */
.btn-danger {
  background: linear-gradient(180deg, var(--color-danger-hi) 0%, var(--color-danger) 100%);
  border: 1px solid var(--color-danger-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(220,38,38,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-danger:hover:not(:disabled):not(.disabled) {
  background: linear-gradient(180deg, #fc8181 0%, var(--color-danger-hi) 100%);
  border-color: #991b1b; color: #fff;
  box-shadow: 0 1px 2px rgba(220,38,38,.2), 0 4px 14px rgba(220,38,38,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.btn-danger:active:not(:disabled):not(.disabled) {
  background: var(--color-danger-dark); box-shadow: 0 1px 2px rgba(220,38,38,.2);
  transform: translateY(0) scale(0.99);
}

/* Warning — Amber soft */
.btn-warning {
  background: var(--color-warning-100); border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text); box-shadow: 0 1px 2px rgba(217,119,6,.08);
}
.btn-warning:hover:not(:disabled):not(.disabled) {
  background: #fde68a; border-color: var(--color-warning-hi); color: #78350f;
  box-shadow: 0 1px 2px rgba(217,119,6,.1), 0 3px 10px rgba(217,119,6,.18);
  transform: translateY(-1px);
}
.btn-warning:active:not(:disabled):not(.disabled) {
  background: #fcd34d; transform: translateY(0) scale(0.99); box-shadow: none;
}

/* Secondary */
.btn-secondary {
  background: #fff; border: 1px solid var(--color-slate-200);
  color: var(--color-slate-600); box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.btn-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--color-slate-50); border-color: var(--color-slate-300); color: var(--color-slate-700);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 3px 8px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.btn-secondary:active:not(:disabled):not(.disabled) {
  background: var(--color-slate-100); box-shadow: none; transform: translateY(0) scale(0.99);
}

/* Light */
.btn-light {
  background: var(--color-slate-50); border: 1px solid var(--color-slate-200);
  color: var(--color-slate-700); box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.btn-light:hover:not(:disabled):not(.disabled) {
  background: var(--color-slate-100); border-color: var(--color-slate-300);
  color: var(--color-slate-900); transform: translateY(-1px);
}

/* ── Outline variants ────────────────────────────────────────── */

/* Shared outline base */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-dark { background: transparent; box-shadow: none; }

/* Outline Primary */
.btn-outline-primary { border: 1px solid var(--color-brand-200); color: var(--color-brand); }
.btn-outline-primary:hover:not(:disabled):not(.disabled) {
  background: var(--color-brand-50); border-color: #a5b4fc; color: var(--color-brand-dark);
  box-shadow: 0 2px 8px rgba(79,70,229,.12); transform: translateY(-1px);
}
.btn-outline-primary:active:not(:disabled):not(.disabled) {
  background: var(--color-brand-100); border-color: var(--color-brand-400); transform: translateY(0) scale(0.99);
}

/* Outline Secondary */
.btn-outline-secondary { border: 1px solid var(--color-slate-200); color: var(--color-slate-500); }
.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--color-slate-50); border-color: var(--color-slate-300);
  color: var(--color-slate-700); transform: translateY(-1px);
}
.btn-outline-secondary:active:not(:disabled):not(.disabled) {
  background: var(--color-slate-100); transform: translateY(0) scale(0.99);
}

/* Borderless icon button variant (score ±) */
.btn-outline-secondary.border-0 { border-color: transparent !important; color: #94a3b8; box-shadow: none; }
.btn-outline-secondary.border-0:hover:not(:disabled):not(.disabled) {
  background: var(--color-slate-100); color: var(--color-slate-600); transform: none;
}

/* Outline Success */
.btn-outline-success { border: 1px solid #6ee7b7; color: var(--color-success); }
.btn-outline-success:hover:not(:disabled):not(.disabled) {
  background: var(--color-success-50); border-color: #34d399; color: var(--color-success-dark);
  box-shadow: 0 2px 8px rgba(5,150,105,.12); transform: translateY(-1px);
}
.btn-outline-success:active:not(:disabled):not(.disabled) {
  background: var(--color-success-dim); transform: translateY(0) scale(0.99);
}

/* Outline Danger */
.btn-outline-danger { border: 1px solid #fca5a5; color: var(--color-danger); }
.btn-outline-danger:hover:not(:disabled):not(.disabled) {
  background: var(--color-danger-50); border-color: #f87171; color: var(--color-danger-dark);
  box-shadow: 0 2px 8px rgba(220,38,38,.12); transform: translateY(-1px);
}
.btn-outline-danger:active:not(:disabled):not(.disabled) {
  background: #fee2e2; transform: translateY(0) scale(0.99);
}

/* Outline Warning */
.btn-outline-warning { border: 1px solid var(--color-warning-border); color: var(--color-warning); }
.btn-outline-warning:hover:not(:disabled):not(.disabled) {
  background: var(--color-warning-50); border-color: var(--color-warning-hi); color: #b45309;
  box-shadow: 0 2px 8px rgba(217,119,6,.12); transform: translateY(-1px);
}
.btn-outline-warning:active:not(:disabled):not(.disabled) {
  background: var(--color-warning-100); transform: translateY(0) scale(0.99);
}

/* Outline Dark (filter pills) */
.btn-outline-dark { border: 1px solid var(--color-slate-200); color: var(--color-slate-500); }
.btn-outline-dark:hover:not(:disabled):not(.disabled) {
  background: var(--color-slate-50); border-color: var(--color-slate-300); color: var(--color-slate-700);
}
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark {
  background: var(--color-slate-900); border-color: var(--color-slate-900); color: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.2), 0 3px 8px rgba(15,23,42,.12);
}

/* Link button */
.btn-link {
  background: transparent; border: none; color: var(--color-brand);
  padding: 0; height: auto; text-decoration: none; box-shadow: none; font-weight: 500;
}
.btn-link:hover:not(:disabled):not(.disabled) {
  color: var(--color-brand-dark); text-decoration: underline; transform: none;
}

/* ── Pill modifier ───────────────────────────────────────────── */
.btn.rounded-pill { border-radius: 999px; }