/* ATLAS · components/buttons.css
 * Provenance: AuditHunt v3 · Phase 1.4 · authored 2026-04-25
 * Spec: DESIGN-BIBLE-v2 §XX.1 + v3 §C.11 · Primary · Ghost · Thread × 5 states
 * Tokens: brand.css (--shield-hi, --bone, --ink, --line, --gold), easing.css
 */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 6px;
  font-family: var(--f-body); font-weight: 500; font-size: 14px;
  letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; cursor: pointer; user-select: none;
  background: transparent; color: inherit;
  transition: background 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo),
              color 200ms var(--ease-out-expo), transform 120ms var(--ease-out-expo);
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Primary — shield-hi fill, bone label, single legal inset top-highlight */
.btn-primary {
  background: var(--shield-hi);
  color: var(--bone);
  box-shadow: inset 0 1px 0 0 rgba(234, 238, 245, 0.18);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: "⊹"; position: absolute; left: 14px; top: 50%;
  transform: translate(-12px, -50%); opacity: 0;
  color: var(--gold); font-size: 14px;
  transition: transform 240ms var(--ease-out-expo), opacity 240ms var(--ease-out-expo);
}
.btn-primary:hover::before { transform: translate(0, -50%); opacity: 1; }
.btn-primary:hover { background: color-mix(in oklab, var(--shield-hi) 88%, var(--bone) 12%); }

/* Ghost — transparent, faint border */
.btn-ghost {
  border-color: var(--line);
  color: var(--ash);
}
.btn-ghost:hover {
  border-color: color-mix(in oklab, var(--gold) 40%, var(--line) 60%);
  color: var(--bone);
}

/* Thread — borderless, arrow slides on hover */
.btn-thread {
  padding: 0 0 0 4px; height: auto;
  color: var(--ash); border-radius: 0;
}
.btn-thread::after {
  content: "→"; display: inline-block; margin-left: 8px;
  transition: transform 200ms var(--ease-out-expo);
}
.btn-thread:hover { color: var(--bone); }
.btn-thread:hover::after { transform: translateX(6px); }