/**
 * Button Components — v3.2
 *
 * CSS global de botões usando Design Tokens v3.2.
 *
 * Mudanças v3.0 → v3.2:
 *   - --text-base/sm/lg/xl   → --font-size-base/sm/lg/xl  (v3.2 naming)
 *   - --space-xs/sm          → --space-2/4                 (v3.2 scale)
 *   - --radius-pill          → --radius-full               (v3.2 naming)
 *   - rgba hardcoded no dark mode → via color-mix com token (sem hardcode)
 *   - rgba(255,255,255,0.2) no hero CTA → var(--color-border-subtle)
 *   - Removido @media prefers-color-scheme: dark — dark mode é por seção (data-bg)
 *
 * REGRAS:
 *   - Este arquivo define TODOS os estilos de botão
 *   - Seções NÃO estilizam botões — apenas posicionam
 *   - Todos os valores vêm de tokens (--btn-*, --color-*, --space-*, etc.)
 *
 * @package FocofyFactory
 * @version 3.3
 * v3.2 → v3.3: line-height: 1.2 → var(--lh-tight); max-width: 600px → 767px
 */

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;

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

  padding: var(--btn-padding-y) var(--btn-padding-x);
  min-height: 44px;

  font-family: var(--font-body, inherit);
  font-size: var(--font-size-base);
  font-weight: var(--btn-font-weight);
  line-height: var(--lh-tight);  /* 1.25 — mais próximo de 1.2 */
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid transparent;

  transition:
    background-color var(--transition-fast) ease,
    border-color     var(--transition-fast) ease,
    color            var(--transition-fast) ease,
    transform        var(--transition-fast) ease,
    box-shadow       var(--transition-fast) ease;

  user-select: none;
  -webkit-user-select: none;
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus { outline: none; }

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-size)
    color-mix(in srgb, var(--focus-ring-color) calc(var(--focus-ring-opacity) * 100%), transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTS
   ══════════════════════════════════════════════════════════════════════════ */

.btn--primary {
  background:   var(--btn-primary-bg);
  color:        var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  box-shadow:   var(--btn-shadow);
}

.btn--primary:hover,
.btn--primary:focus {
  background:   var(--btn-primary-hover-bg);
  color:        var(--btn-primary-hover-text, var(--btn-primary-text));
  border-color: var(--btn-primary-hover-border, var(--btn-primary-border));
  transform:    translateY(-2px);
  box-shadow:
    var(--btn-shadow),
    0 8px 16px color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
}

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

/* Secondary / Outline */
.btn--secondary,
.btn--outline {
  background:   var(--btn-secondary-bg);
  color:        var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn--secondary:hover,
.btn--secondary:focus,
.btn--outline:hover,
.btn--outline:focus {
  background:   var(--btn-secondary-hover-bg);
  color:        var(--btn-secondary-hover-text, var(--btn-secondary-text));
  border-color: var(--btn-secondary-hover-border, var(--btn-secondary-border));
}

/* Ghost */
.btn--ghost,
.btn--text {
  background:   var(--btn-ghost-bg);
  color:        var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
  box-shadow:   none;
}

.btn--ghost:hover,
.btn--ghost:focus,
.btn--text:hover,
.btn--text:focus {
  background: var(--btn-ghost-hover-bg);
  color:      var(--btn-ghost-hover-text, var(--btn-ghost-text));
}

/* Accent */
.btn--accent {
  background:   var(--btn-accent-bg);
  color:        var(--btn-accent-text);
  border-color: var(--btn-accent-border);
  box-shadow:   var(--btn-shadow);
}

.btn--accent:hover,
.btn--accent:focus {
  background: var(--btn-accent-hover-bg);
  color:      var(--btn-accent-hover-text, var(--btn-accent-text));
  transform:  translateY(-2px);
}

/* Link */
.btn--link {
  background:            transparent;
  color:                 var(--color-link);
  border-color:          transparent;
  padding:               0;
  min-height:            auto;
  box-shadow:            none;
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.btn--link:hover,
.btn--link:focus {
  color:           var(--color-link-hover);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIZES
   ══════════════════════════════════════════════════════════════════════════ */

.btn--sm {
  padding:    calc(var(--btn-padding-y) * 0.75) calc(var(--btn-padding-x) * 0.75);
  font-size:  var(--font-size-sm);
  min-height: 36px;
}

.btn--lg {
  padding:    calc(var(--btn-padding-y) * 1.25) calc(var(--btn-padding-x) * 1.5);
  font-size:  var(--font-size-lg);
  min-height: 52px;
}

.btn--xl {
  padding:    calc(var(--btn-padding-y) * 1.5) calc(var(--btn-padding-x) * 2);
  font-size:  var(--font-size-xl);
  min-height: 60px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODIFIERS
   ══════════════════════════════════════════════════════════════════════════ */

.btn--block,
.btn--full  { width: 100%; }

.btn--icon  { padding: var(--btn-padding-y); aspect-ratio: 1; }

.btn--pill  { border-radius: var(--radius-full); }

.btn__icon            { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.btn__icon--left      { margin-right: var(--space-2); }
.btn__icon--right     { margin-left:  var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   LOADING STATE
   ══════════════════════════════════════════════════════════════════════════ */

.btn.is-loading {
  position:       relative;
  color:          transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content:            '';
  position:           absolute;
  top:                50%;
  left:               50%;
  width:              1.25em;
  height:             1.25em;
  margin:             -0.625em 0 0 -0.625em;
  border:             2px solid currentColor;
  border-right-color: transparent;
  border-radius:      50%;
  animation:          btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON GROUP
   ══════════════════════════════════════════════════════════════════════════ */

.btn-group { display: inline-flex; gap: 0; }

.btn-group .btn               { border-radius: 0; }
.btn-group .btn:first-child   { border-top-left-radius: var(--btn-radius); border-bottom-left-radius: var(--btn-radius); }
.btn-group .btn:last-child    { border-top-right-radius: var(--btn-radius); border-bottom-right-radius: var(--btn-radius); }
.btn-group .btn:not(:first-child) { margin-left: calc(var(--btn-border-width) * -1); }

/* ══════════════════════════════════════════════════════════════════════════
   CTA CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.cta-group,
.section__ctas,
.focofy-hero__ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

.cta-group--center, .section__ctas--center { justify-content: center; }
.cta-group--right,  .section__ctas--right  { justify-content: flex-end; }

@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .cta-group--stack .btn,
  .section__ctas--stack .btn {
    flex-direction: column;
    width: 100%;
  }

  .btn { padding: calc(var(--btn-padding-y) * 1.1) calc(var(--btn-padding-x) * 1.1); }
  .btn--mobile-full { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO CTA
   v3.2: rgba hardcoded → var(--color-border-subtle)
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-hero__ctas .btn--primary {
  border-color: var(--color-border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMAÇÃO DE PULSO
   ══════════════════════════════════════════════════════════════════════════ */

.btn--pulse { animation: btn-pulse 3s ease-in-out infinite; }

.btn--pulse:hover,
.btn--pulse:focus { animation-play-state: paused; }

@keyframes btn-pulse {
  0%, 100% {
    transform:  scale(1);
    box-shadow: var(--btn-shadow);
  }
  50% {
    transform:  scale(1.02);
    box-shadow:
      var(--btn-shadow),
      0 12px 28px color-mix(in srgb, var(--btn-primary-bg) 40%, transparent);
  }
}