/* ================================================================
   KikoPop — Buttons
   Variants: primary, accent, outline, ghost
   Sizes: sm, default, lg
   ================================================================ */

.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-sp-2);
  font-family: var(--kp-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 12px 28px;
  border-radius: var(--kp-radius);
  border: 2px solid transparent;
  transition: all var(--kp-ease);
  white-space: nowrap;
  cursor: pointer;
}
.kp-btn:hover { transform: translateY(-2px); }
.kp-btn:active { transform: translateY(0); }
.kp-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ── Primary (Coral) ── */
.kp-btn-primary {
  background: linear-gradient(135deg, var(--kp-color-primary), var(--kp-color-primary-lt));
  color: var(--kp-text-inv);
  box-shadow: var(--kp-shadow-pri);
}
.kp-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(255,107,107,0.45);
  background: linear-gradient(135deg, var(--kp-color-primary-dk), var(--kp-color-primary));
}

/* ── Accent (Turquoise) ── */
.kp-btn-accent {
  background: linear-gradient(135deg, var(--kp-color-accent), var(--kp-color-accent-lt));
  color: var(--kp-text-inv);
  box-shadow: var(--kp-shadow-acc);
}
.kp-btn-accent:hover {
  box-shadow: 0 6px 28px rgba(78,205,196,0.45);
  background: linear-gradient(135deg, var(--kp-color-accent-dk), var(--kp-color-accent));
}

/* ── Outline ── */
.kp-btn-outline {
  background: transparent;
  border-color: var(--kp-border);
  color: var(--kp-text);
}
.kp-btn-outline:hover {
  border-color: var(--kp-color-primary);
  color: var(--kp-color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,107,0.1);
}

/* ── Ghost ── */
.kp-btn-ghost {
  background: transparent;
  color: var(--kp-text-2);
}
.kp-btn-ghost:hover {
  background: var(--kp-surface-2);
  color: var(--kp-text);
}

/* ── Sizes ── */
.kp-btn-sm { font-size: 0.8125rem; padding: 8px 18px; border-radius: var(--kp-radius-sm); }
.kp-btn-lg { font-size: 1.0625rem; padding: 16px 36px; border-radius: var(--kp-radius-lg); }

/* ── Button Group ── */
.kp-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-sp-3);
}

@media (max-width: 480px) {
  .kp-btn-lg { width: 100%; }
  .kp-btn-group { flex-direction: column; }
}