/**
 * components/buttons.css — MJC Fintech Button System
 *
 * Variants (from Figma):
 *   .mjc-btn--primary    Teal filled (default CTA)
 *   .mjc-btn--secondary  Teal outlined
 *   .mjc-btn--ghost      White outlined (on dark backgrounds)
 *   .mjc-btn--whatsapp   Green filled (WhatsApp CTA)
 *
 * Usage in PHP: <?php mjc_button('Get Started', '/contact', 'primary'); ?>
 * Usage in HTML: <a href="/contact" class="mjc-btn mjc-btn--primary">Get Started</a>
 */


/* =====================================================
   BASE BUTTON
   ===================================================== */

.mjc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);

  font-family:     var(--font-body);
  font-size:       var(--text-body);
  font-weight:     var(--fw-medium);
  line-height:     1;
  text-decoration: none;
  white-space:     nowrap;

  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius-pill);
  border:          2px solid transparent;

  cursor:          pointer;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    border-color     var(--transition-base),
    box-shadow       var(--transition-base),
    transform        var(--transition-spring);
}

/* Subtle lift on hover — applies to all variants */
.mjc-btn:hover {
  transform: translateY(-1px);
}

.mjc-btn:active {
  transform: translateY(0);
}

/* Focus state — WCAG AA compliant */
.mjc-btn:focus-visible {
  outline:        2px solid var(--color-cyan);
  outline-offset: 3px;
}


/* =====================================================
   PRIMARY — Teal filled
   ===================================================== */

.mjc-btn--primary {
  background-color: var(--color-teal);
  color:            var(--color-white);
  border-color:     var(--color-teal);
}

.mjc-btn--primary:hover {
  background-color: var(--color-teal-light);
  border-color:     var(--color-teal-light);
  box-shadow:       var(--shadow-teal);
  color:            var(--color-white);
}


/* =====================================================
   SECONDARY — Teal outlined
   ===================================================== */

.mjc-btn--secondary {
  background-color: transparent;
  color:            var(--color-teal);
  border-color:     var(--color-teal);
}

.mjc-btn--secondary:hover {
  background-color: var(--color-teal);
  color:            var(--color-white);
}


/* =====================================================
   GHOST — White outlined (use on dark/navy sections)
   ===================================================== */

.mjc-btn--ghost {
  background-color: transparent;
  color:            var(--color-white);
  border-color:     var(--color-white);
}

.mjc-btn--ghost:hover {
  background-color: var(--color-white);
  color:            var(--color-navy);
}


/* =====================================================
   WHATSAPP — Green filled
   ===================================================== */

.mjc-btn--whatsapp {
  background-color: var(--color-whatsapp);
  color:            var(--color-white);
  border-color:     var(--color-whatsapp);
  padding-left:     var(--space-5);
  padding-right:    var(--space-5);
}

.mjc-btn--whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  border-color:     var(--color-whatsapp-hover);
  color:            var(--color-white);
}


/* =====================================================
   SIZE MODIFIERS
   ===================================================== */

/* Large — hero CTAs */
.mjc-btn--lg {
  font-size: var(--text-body-lg);
  padding:   var(--space-4) var(--space-7);
}

/* Small — inline / card CTAs */
.mjc-btn--sm {
  font-size: var(--text-sm);
  padding:   var(--space-2) var(--space-4);
}