/* ==========================================================================
   BUTTON — DIGART Studio
   Componente: Button

   Referencia documental:
     project/13-UI-DESIGN-SYSTEM.md (8.0 Arquitectura General de
     Componentes, 8.1 Botones, 5.4 Jerarquía tipográfica, Capítulo 6
     Sistema Cromático, Capítulo 9 Estados, Capítulo 10 Motion,
     Capítulo 12 Accesibilidad)

   Primer Componente oficial del Catálogo (8.0). A diferencia de los
   Patterns, este archivo no consume Layout de sección: un Componente es
   una unidad funcional autocontenida, reutilizable en cualquier Pattern,
   página interna o unidad de negocio futura, sin contenido narrativo
   fijo (8.0, "Arquitectura General de Componentes").

   Este archivo consume exclusivamente los Design Tokens (tokens.css). No
   declara valores independientes de color, tipografía, espaciado, borde,
   tiempo, easing ni punto de quiebre.

   Ejes oficiales de variantes (8.0): Jerarquía (primary, secondary,
   outline, ghost) y Escala (compact, large; sin modificador se aplica el
   tamaño base). Ningún otro eje de variante está autorizado en esta
   implementación.

   No incluye iconografía (Capítulo 7 aún sin implementar), ni el
   indicador visual definitivo del estado Loading: ambos quedan
   preparados únicamente como áreas de montaje. No incluye JavaScript de
   interacción (estructura del módulo únicamente) ni reglas Responsive
   específicas.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .button resuelve la unidad de acción interactiva base: tipografía de
   nivel jerárquico Button (5.4, exclusivo de este Componente), área de
   interacción cómoda mediante espaciado (12.3) y transición uniforme
   mediante el token compuesto ya definido para estados interactivos.
   El color de texto y de fondo se resuelve por completo en cada
   variante de Jerarquía (2); Root no declara un color propio.
   -------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  white-space: nowrap;
  border-style: var(--border-style-solid);
  border-width: var(--border-width-default);
  border-color: transparent;
  border-radius: var(--border-radius-sm);
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  transition: var(--motion-transition-default);
}

/* Retroalimentación de Active uniforme para cualquier variante (9.3,
   "un mismo estado produce el mismo significado y el mismo tratamiento
   en cualquier componente que lo consuma"). transform ya forma parte
   de --motion-transition-default; no se declara una transición propia. */
.button:active:not(:disabled) {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------
   2. Variants (Jerarquía)
   Cuatro variantes oficiales y cerradas (8.0). Cada una resuelve
   Default, Hover y Active mediante Design Tokens; Disabled se resuelve
   en la sección 4 de forma transversal a las cuatro.
   -------------------------------------------------------------------- */

/* Primary: máxima jerarquía de conversión (8.1, "el componente de mayor
   peso de conversión de la interfaz"). Refinamiento D-036: adopta el
   rojo institucional ya existente (--color-error) como color base,
   consolidando el acento cromático de la nueva Dirección de Arte. La
   misma lógica de escalera Default → Hover → Active se conserva
   derivando los pasos del propio Token mediante color-mix hacia la
   Escala de neutros inversa (mismo recurso ya aprobado en header.css),
   sin declarar ningún color independiente ni crear Tokens nuevos; los
   navegadores sin color-mix conservan el color base como degradación
   segura. El texto consume --color-text-inverse para garantizar el
   contraste sobre el nuevo fondo. */
.button--primary {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}

.button--primary:hover:not(:disabled) {
  background-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 88%, var(--color-background-inverse));
}

.button--primary:active:not(:disabled) {
  background-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 72%, var(--color-background-inverse));
}

/* Secondary: segunda jerarquía. Refinamiento D-036: abandona el dorado
   y deriva su color exclusivamente del rojo institucional (--color-error)
   en un tono más oscuro (color-mix hacia el fondo inverso, mismo recurso
   ya aprobado en header.css y en la variante Primary), comunicando la
   escalera Acción principal (rojo pleno) → Acción secundaria (rojo
   profundo) sin parecer un estado Disabled. Hover y Active profundizan
   con la misma lógica de escalera del componente; los navegadores sin
   color-mix conservan el rojo base como degradación segura. No se
   declara ningún color independiente ni se crean Tokens nuevos. */
.button--secondary {
  background-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 60%, var(--color-background-inverse));
  color: var(--color-text-inverse);
}

.button--secondary:hover:not(:disabled) {
  background-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 48%, var(--color-background-inverse));
}

.button--secondary:active:not(:disabled) {
  background-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 38%, var(--color-background-inverse));
}

/* Outline: tercera jerarquía, sin relleno propio; el borde transmite el
   límite de la acción y la superficie se sugiere únicamente en Hover y
   Active mediante los tokens de Superficie. */
.button--outline {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.button--outline:hover:not(:disabled) {
  background-color: var(--color-surface-subtle);
}

.button--outline:active:not(:disabled) {
  background-color: var(--color-surface-default);
}

/* Ghost: cuarta y menor jerarquía; ni relleno ni borde propios en
   reposo, mismo tratamiento de superficie que Outline en Hover/Active
   para mantener la misma retroalimentación en toda la escalera. */
.button--ghost {
  background-color: transparent;
  color: var(--color-text-primary);
}

.button--ghost:hover:not(:disabled) {
  background-color: var(--color-surface-subtle);
}

.button--ghost:active:not(:disabled) {
  background-color: var(--color-surface-default);
}

/* --------------------------------------------------------------------
   3. Escala
   Dos modificadores oficiales y cerrados (8.0); sin modificador se
   aplica el tamaño base ya definido en Root. La tipografía permanece
   constante en cualquier Escala (8.1, "Todo texto contenido en un
   Botón utiliza exclusivamente el nivel jerárquico tipográfico
   Button"); únicamente el área de interacción cambia mediante
   espaciado.
   -------------------------------------------------------------------- */
.button--compact {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
}

.button--large {
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------
   4. States
   Disabled se resuelve de forma transversal a las cuatro variantes de
   Jerarquía (9.1, "el estado transversal Disabled... suspende la
   aplicación de los estados de interacción"): ninguna variante calcula
   su propio Disabled. Loading queda preparado únicamente como
   estructura (Blueprint/Mockup no exigen su implementación visual
   todavía); no se activa ningún indicador gráfico ni animación propia.
   -------------------------------------------------------------------- */
/* Refinamiento D-036: el fondo Disabled abandona el token dorado
   (--color-interactive-disabled) y consume el token rojo atenuado ya
   existente (--color-error-subtle), eliminando por completo el dorado
   del sistema de botones sin crear Tokens nuevos. */
.button:disabled {
  background-color: var(--color-error-subtle);
  border-color: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.button--outline:disabled,
.button--ghost:disabled {
  background-color: transparent;
  border-color: var(--color-border-subtle);
}

.button--loading {
  cursor: wait;
  opacity: 0.7;
  pointer-events: none;
}

/* Área de montaje del indicador de carga. Sin animación, icono ni forma
   propia: el recurso visual definitivo del estado Loading queda fuera
   del alcance de esta implementación. */
.button__loader {
  display: none;
}

.button--loading .button__loader {
  display: inline-flex;
}

/* --------------------------------------------------------------------
   5. Accesibilidad
   Focus consume exclusivamente el token oficial Focus (6.9), idéntico
   en las cuatro variantes de Jerarquía y en ambas Escalas (12.3,
   "no existen soluciones de foco independientes por componente").
   :focus-visible reserva el anillo de foco a la navegación por teclado,
   sin mostrarlo ante una activación por puntero. Refinamiento D-036: el
   anillo abandona el token dorado (--color-interactive-focus) y consume
   el rojo institucional (--color-error), único acento cromático del
   sistema de botones; sigue siendo idéntico en todas las variantes y
   Escalas, y el offset lo separa del fondo del propio botón.
   -------------------------------------------------------------------- */
.button:focus-visible {
  outline: var(--border-width-thick) var(--border-style-solid) var(--color-error);
  outline-offset: var(--space-1);
}

/* --------------------------------------------------------------------
   6. Responsive
   Sección reservada del Sistema Responsive (Cap. 11); sin reglas
   específicas todavía.
   -------------------------------------------------------------------- */