/* ================================================================
   DataHints DS — Buttons Component
   Requires: tokens.css
   Classes: .dh-btn, .btn-{variant}, .btn-{size}, .dh-btn-pill,
            .dh-btn-icon, .dh-icon, .dh-btn.loading, .dh-btn[disabled]
   ================================================================ */

/* ── Base ── */
.dh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: 600;
  border: none; border-radius: var(--r-xs); cursor: pointer;
  transition:
    background var(--ease-fast),
    color var(--ease-fast),
    box-shadow var(--ease-fast),
    border-color var(--ease-fast),
    transform var(--ease-fast);
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.dh-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.dh-btn:active { transform: translateY(1px); }

/* ── Sizes ── */
.dh-btn-sm  { font-size: 0.8125rem; padding: 7px 16px;  letter-spacing: 0.01em; }
.dh-btn-md  { font-size: 0.9375rem; padding: 10px 22px; letter-spacing: 0.01em; }
.dh-btn-lg  { font-size: 1.0625rem; padding: 14px 28px; letter-spacing: 0; }
.dh-btn-xl  { font-size: 1.125rem;  padding: 18px 36px; letter-spacing: -0.01em; }

/* Pill shape */
.dh-btn-pill { border-radius: var(--r-pill); }

/* ── Variants ── */

/* Primary — Amethyst filled */
.dh-btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm), 0 0 0 0 transparent;
}
.dh-btn-primary:hover {
  background: var(--accent-fill-h);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* Secondary — outline */
.dh-btn-secondary {
  background: transparent;
  color: var(--accent-text);
  border: 1.5px solid var(--border-a);
}
.dh-btn-secondary:hover {
  background: var(--accent-sub);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Ghost — very subtle, text-like */
.dh-btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--border-s);
}
.dh-btn-ghost:hover {
  background: var(--bg-card-h);
  color: var(--fg);
  border-color: var(--border-s);
}

/* FX — gradient border only; do not use behind white text */
.dh-btn-fx {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--grad-fx) border-box;
  color: var(--fx-h);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-sm);
}
.dh-btn-fx:hover {
  background:
    linear-gradient(var(--bg-card-h), var(--bg-card-h)) padding-box,
    var(--grad-fx) border-box;
  color: var(--fg);
  box-shadow: var(--shadow-md), var(--shadow-glow-fx);
}

/* Glow — accent with signature amethyst glow */
.dh-btn-glow {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: var(--shadow-glow);
}
.dh-btn-glow:hover {
  background: var(--accent-fill-h);
  box-shadow: var(--shadow-glow-strong), var(--shadow-md);
}

/* Danger — destructive actions only */
.dh-btn-danger {
  background: var(--micro-coral-sub);
  color: var(--micro-coral-text);
  border: 1px solid rgba(255, 90, 60, 0.30);
}
.dh-btn-danger:hover {
  background: var(--micro-coral-text);
  color: var(--bg);
  border-color: transparent;
}

/* ── States ── */
.dh-btn[disabled], .dh-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.dh-btn.loading { position: relative; cursor: wait; }
.dh-btn.loading .dh-btn-text { opacity: 0; }
.dh-btn.loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.30);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .dh-btn.loading::after {
    animation: none;
    border-top-color: #fff;
  }
}

/* ── Icon button — square ── */
.dh-btn-icon {
  padding: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-xs);
}
.dh-btn-icon.dh-btn-sm { width: 32px; height: 32px; }
.dh-btn-icon.dh-btn-lg { width: 48px; height: 48px; }

/* ── SVG icon wrapper ── */
.dh-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.dh-icon svg { width: 100%; height: 100%; }