/* ============================================================================
   Forge Core — Buttons component
   primary (gold/black) · secondary (black/white) · ghost (gold outline) ·
   cta-link ("VIEW PRODUCT →"). Tokens only (design-system.css).
   ============================================================================ */

.forge-btn {
  display: inline-block;
  font-family: var(--forge-font-body);
  font-size: var(--forge-btn-font-size);
  font-weight: 500;
  letter-spacing: var(--forge-btn-letter-spacing);
  text-transform: uppercase;
  padding: var(--forge-btn-padding);
  border-radius: var(--forge-btn-radius);
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--forge-transition);
}

/* Primary — gold bg, black text */
.forge-btn--primary {
  background: var(--forge-gold);
  color: var(--forge-black);
  border-color: var(--forge-gold);
}
.forge-btn--primary:hover { background: var(--forge-black); color: var(--forge-gold); }

/* Secondary — black bg, white text */
.forge-btn--secondary {
  background: var(--forge-black);
  color: var(--forge-white);
  border-color: var(--forge-black);
}
.forge-btn--secondary:hover { background: var(--forge-gold); color: var(--forge-black); border-color: var(--forge-gold); }

/* Ghost — gold border + gold text */
.forge-btn--ghost {
  background: transparent;
  color: var(--forge-gold);
  border-color: var(--forge-gold);
}
.forge-btn--ghost:hover { background: var(--forge-gold); color: var(--forge-black); }

/* CTA link — "VIEW PRODUCT →" */
.forge-cta-link {
  font-family: var(--forge-font-body);
  font-size: var(--forge-size-xs);
  font-weight: 600;
  letter-spacing: var(--forge-btn-letter-spacing);
  text-transform: uppercase;
  color: var(--forge-gold);
  text-decoration: none;
  transition: var(--forge-transition);
}
.forge-cta-link:hover { color: var(--forge-black); }