/* ============================================================
   halves — legacy button/link controls
   ============================================================
   Sistema de botón/enlace pre-component-library: clases .btn/
   .btn-primary/.btn-secondary + resets globales de elemento
   (button/a). Separado de tokens.css el 2026-07-06.

   Para quién es esto: consumidores SIN una librería de componentes
   propia (hoy: el tema WordPress, halves-plugins/connectors/wordpress/
   halves-theme). Requiere tokens.css cargado antes (usa sus variables
   --accent-color/--radius-sm/--space-2/etc.).

   halves-io YA NO importa este fichero: adoptó universal-ui, cuyos
   componentes (Button, ApplicationMenu, Modal, Toast...) van envueltos
   en @layer ui-components. Los resets de aquí no tienen capa, así que
   por la regla de CSS Cascade Layers ("lo no encapado siempre gana")
   anulaban silenciosamente el background/border/padding/color de esos
   componentes reales, sin importar especificidad. Ver
   halves-io/frontend/src/components/AppShellMenu.vue y el handoff de
   la migración a universal-ui (commits 3682d8c/fa81f40) para el
   diagnóstico completo.
   ============================================================ */

/* ============================================================
   BUTTONS
   Base classes compartidas. Aplicar directamente o mapear desde
   clases de plataforma (.wp-block-button__link, etc.).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:disabled,
button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-1px); }

/* Primary — solid accent, no gradient. Color adapts to surface for AA contrast. */
.btn-primary {
  background: var(--accent-color);
  color: var(--bg-color);
  border-color: transparent;
}
.btn-primary:not(:disabled):hover {
  background: var(--accent-strong);
  opacity: 1;
}

/* Secondary — ghost with accent border */
.btn-secondary {
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.btn-secondary:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}


/* ============================================================
   ELEMENT RESETS (button/a)
   ============================================================ */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.6; }
a { color: var(--accent-color); text-decoration: none; }
a:hover { color: var(--accent-strong); }