/* ==========================================================================
   Buttons  (.pf-btn)
   Condensed uppercase labels, sharp corners. Pink is the hover moment.
   Variants: --primary (solid ink), --outline, --ghost. Sizes: default, --sm.

   Note: Figma's homepage used text links, not filled buttons. These are a
   refinement — a coherent button set in the same visual language for CTAs.
   ========================================================================== */

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-1);
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-label);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  padding: var(--pf-space-2) var(--pf-space-4);
  border: var(--pf-border-strong) solid transparent;
  border-radius: var(--pf-radius-none);
  cursor: pointer;
  transition: background-color var(--pf-dur) var(--pf-ease),
    border-color var(--pf-dur) var(--pf-ease),
    color var(--pf-dur) var(--pf-ease);
}

.pf-btn--sm {
  font-size: var(--pf-text-small);
  padding: var(--pf-space-1) var(--pf-space-3);
}

/* Primary — solid ink, inverts, pinks on hover */
.pf-btn--primary {
  background: var(--pf-ink);
  color: var(--pf-ink-inverse);
  border-color: var(--pf-ink);
}
.pf-btn--primary:hover,
.pf-btn--primary:focus-visible {
  background: var(--pf-accent); /* fills pink on hover, like Rapha */
  color: var(--pf-ink);         /* DARK label — ink on pink = 6.4:1 (AA) */
  border-color: var(--pf-accent);
}

/* Outline — hairline box, ink text, pink on hover */
.pf-btn--outline {
  background: transparent;
  color: var(--pf-ink);
  border-color: var(--pf-ink);
}
.pf-btn--outline:hover,
.pf-btn--outline:focus-visible {
  background: var(--pf-accent); /* fills pink on hover */
  color: var(--pf-ink);         /* dark label — AA on pink */
  border-color: var(--pf-accent);
}

/* Ghost — text-like with a reveal underline feel */
.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink);
  border-color: transparent;
  padding-inline: var(--pf-space-2);
}
.pf-btn--ghost:hover,
.pf-btn--ghost:focus-visible {
  background: var(--pf-accent); /* fills pink on hover, like the others */
  color: var(--pf-ink);         /* dark label — AA on pink */
}

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