/* ==========================================================================
   buttons.css — .wf-btn / --primary / --ghost (PLAN §6.2, §11.5d)
   Primary = terracotta fill, white label >=16px (BRIEF §3 contrast note).
   Min tap target 44px (research 04). Focus ring per BRIEF §8.
   ========================================================================== */

.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;                 /* tap target */
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--step-0);         /* >=16px: AA white-on-terracotta */
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary — terracotta fill, white label. */
.wf-btn--primary {
  background-color: var(--c-terracotta);
  color: #fff;
}
.wf-btn--primary:hover,
.wf-btn--primary:focus-visible {
  background-color: var(--c-terracotta-dk);
  color: #fff;
}
/* Focus ring must keep >=3:1 against the dark fill (PLAN §14.5 SF-6). */
.wf-btn--primary:focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* Ghost — outlined, parchment-friendly. */
.wf-btn--ghost {
  background-color: transparent;
  color: var(--c-terracotta-dk);
  border-color: var(--c-terracotta-dk);
}
.wf-btn--ghost:hover,
.wf-btn--ghost:focus-visible {
  background-color: var(--c-terracotta-dk);
  color: #fff;
}
.wf-btn--ghost:focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* Full-width modifier for stacked mobile forms. */
.wf-btn--block { width: 100%; }

.wf-btn:disabled,
.wf-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}