/* FluxFront — buttons component · extracted verbatim from base.css for modularity (render-identical). */
/* ---- Buttons ---------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 14px 22px; border-radius: var(--r-pill); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  transition: transform var(--d-2) var(--e-spring), background var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out), color var(--d-2);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--teal); color: var(--ink); box-shadow: var(--sh-sm); }
.btn-primary:hover { box-shadow: var(--sh-teal); background: var(--teal-bright); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-2); }
.btn-ghost:hover { border-color: var(--ink); background: rgb(var(--paper-shadow) / 0.03); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #000; }
.btn-lg { padding: 17px 28px; font-size: 1rem; }
.btn-sm { padding: 10px 16px; font-size: var(--t-xs); }
.btn:active { transform: translateY(1px) scale(0.99); }