/*
  buttons.css — Nium Portal CTA system
  ─────────────────────────────────────
  Three tiers. One source of truth.
  Link from every page: <link rel="stylesheet" href="buttons.css">

  TIER 1  .btn-primary   — filled navy, one per view
  TIER 2  .btn-secondary — outlined, paired or standalone
  TIER 3  .btn-ghost     — borderless, low-weight actions
  MOD     .btn-sm        — compact size, all tiers
  MOD     .btn-danger    — destructive variant on btn-primary only

  Aliases retired (find → replace in HTML):
    btn-move-funds, dash-btn-move, form-btn-primary,
    sr-btn-primary, mf-btn-primary, adv-btn-apply      → btn-primary
    dash-btn-more, btn-secondary-outline, btn-more-actions,
    form-btn-secondary, sr-btn-secondary, adv-btn-save  → btn-secondary
    adv-btn-clear, view-all, stmt-view-all,
    notif-view-all, srd-dl-btn                          → btn-ghost

  Not replaced (not CTAs):
    pay-page-btn  tab/segment toggle
    brand-btn     selection control
    icon-btn      topbar icon chrome
    kebab-btn     overflow menu trigger
*/

/* ─── Base shared ─────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

/* ─── Tier 1: Primary ─────────────────────────────────────── */

.btn-primary {
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background: #222;
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--color-border-secondary, #d3d1c7);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

/* ─── Tier 2: Secondary ───────────────────────────────────── */

.btn-secondary {
  padding: 7px 15px;
  background: var(--color-bg-primary, #ffffff);
  color: var(--color-text-primary, #212b36);
  border: 1px solid var(--color-border-secondary, #cbd5e1);
}

.btn-secondary:hover {
  background: var(--color-bg-secondary, #f8fafc);
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ─── Tier 3: Ghost ───────────────────────────────────────── */

.btn-ghost {
  padding: 7px 12px;
  background: none;
  color: var(--color-text-secondary, #64748b);
  border: none;
  font-weight: 500; /* 500 only here — no border/fill to signal interactivity */
}

.btn-ghost:hover {
  background: var(--color-bg-secondary, #f8fafc);
  color: var(--color-text-primary, #212b36);
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ─── Size modifier ───────────────────────────────────────── */

.btn-sm {
  padding: 5px 11px;
  font-size: 12px;
}

/* ─── Danger modifier (btn-primary only) ──────────────────── */
/*     Usage: <button class="btn-primary btn-danger">          */

.btn-primary.btn-danger {
  background: #dc2626;
}

.btn-primary.btn-danger:hover {
  background: #b91c1c;
}