/* =========================================================================
   buttons.css — Sistema de botones
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }

.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* Primary: accion principal */
.btn--primary {
  background: var(--t-primary);
  color: #fff;
  border-color: var(--t-primary);
}
.btn--primary:hover { background: var(--t-primary-2); border-color: var(--t-primary-2); }

/* Ghost: accion secundaria */
.btn--ghost {
  background: transparent;
  color: var(--t-text);
  border-color: var(--t-line-2);
}
.btn--ghost:hover { background: var(--t-panel); border-color: var(--t-text-3); }

/* Accent: alternativa visual */
.btn--accent {
  background: var(--t-accent);
  color: var(--t-bg);
  border-color: var(--t-accent);
}
.btn--accent:hover { background: var(--t-accent-2); }

/* Tamaños especificos */
.btn--cta { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-base); font-weight: 700; }

/* Focus state */
.btn:focus-visible {
  outline: 2px solid var(--t-primary);
  outline-offset: 2px;
}