/* =============================================================================
   DESIGN TOKENS --ui-*  ·  Proyecto: MODERNUX
   -----------------------------------------------------------------------------
   Define el vocabulario de tokens COMPARTIDO (--ui-*) que consumen los
   componentes: colores, sombras/elevaciones y border-radius.
   Acá se mapea cada rol del contrato a la paleta PROPIA de Modernux (--clr-*).
   El componente nunca toca --clr-*: solo pide --ui-*.

   Editar un color de Modernux = editar su --clr-* (en _framework.scss / _temas.scss)
   o ajustar el mapeo de abajo. Los componentes no se tocan.

   ⚠️ Declarado en `body` (no en :root): Modernux define dark-mode y los 4 temas
   en `body.modo_oscuro[data-tema="..."]`. Al resolverse en `body`, cada
   var(--clr-*) toma el valor claro / oscuro / del tema que corresponda. Un solo
   bloque cubre claro + oscuro + azul/negro/verde/púrpura.

   HÍBRIDO: roles semánticos (la mayoría) + escala neutra (--ui-neutral-*) como
   escape para grises utilitarios.

   ARQUITECTURA: este archivo es la CAPA DE MAPEO, SEPARADA del bundle de
   componentes. gulp lo publica a assets/css/min/ui_tokens.css y el panel lo
   linkea aparte. El bundle (ui_componentes.styles.min.css) queda PURO (solo usa
   los tokens --ui- y --dt-), portable: otro proyecto lo consume aportando su
   propio ui_tokens.css (mismo set de tokens, mapeado a SU paleta).
============================================================================== */

body {
	/* ── Superficies ─────────────────────────────────────────── */
	--ui-bg:            var(--clr-bg);
	--ui-surface:       var(--card-bg-color);
	--ui-surface-2:     var(--card-inner-bg-color);
	--ui-hover:         var(--clr-grey-200);
	--ui-active:        var(--clr-grey-300);

	/* ── Bordes ──────────────────────────────────────────────── */
	--ui-border:        var(--card-inner-border-color);
	--ui-border-strong: var(--border-border-color);

	/* ── Campos de formulario (input/select/textarea) ────────── */
	--ui-field-border:       var(--form-border-color);
	--ui-field-border-hover: var(--primary);
	--ui-field-border-focus: var(--form-border-color-focus);

	/* ── Texto ───────────────────────────────────────────────── */
	--ui-text:          var(--clr-text);
	--ui-text-muted:    var(--clr-grey-500);
	--ui-text-faint:    var(--clr-grey-400);
	--ui-on-accent:     var(--white);

	/* ── Marca ───────────────────────────────────────────────── */
	--ui-primary:        var(--primary);
	--ui-primary-hover:  var(--primary-hover);
	--ui-primary-strong: var(--clr-primary-800);
	--ui-primary-soft:   var(--clr-primary-100);
	--ui-on-primary:     var(--primary-color);

	/* Addon "acento" (input-group .ui-input-group--acento): botón soft (dropdown)
	   + botón sólido ("+"/acción). Valores por MODO, tomados de la paleta --clr-*
	   (definida desde _variables.scss). En claro el soft es un tinte claro; en dark
	   (override más abajo) pasa a un tinte OSCURO del primario con texto claro, y el
	   sólido a un tono más brillante — para verse como la referencia sin quedar como
	   un chip celeste brillante sobre la card oscura. Se separan de --ui-primary-soft
	   para NO afectar otros consumidores de ese token (form-info, alertas). */
	--ui-accent-soft-bg:        var(--clr-primary-100);
	--ui-accent-soft-fg:        var(--clr-primary-800);
	--ui-accent-solid-bg:       var(--clr-primary-600);
	--ui-accent-solid-bg-hover: var(--clr-primary-800);

	/* Tinta oscura constante para texto sobre rellenos claros (badge/alert
	   warning, info, etc.). NO se invierte en dark a propósito. */
	--ui-ink:            #16181d;

	/* ── Estados ─────────────────────────────────────────────── */
	/* base = color sólido (badges) · -strong = texto/borde · -soft = fondo tenue */
	--ui-danger:         var(--clr-danger);
	--ui-danger-strong:  var(--clr-danger-800);
	--ui-danger-soft:    var(--clr-danger-100);

	--ui-success:        var(--clr-success);
	--ui-success-strong: var(--clr-success-800);
	--ui-success-soft:   var(--clr-success-100);

	--ui-warning:        var(--clr-warning);
	--ui-warning-strong: var(--clr-warning-800);
	--ui-warning-soft:   var(--clr-warning-100);

	--ui-info:           var(--clr-info);
	--ui-info-strong:    var(--clr-primary-800);
	--ui-info-soft:      var(--clr-primary-100);

	--ui-gold:           var(--clr-gold);
	--ui-gold-strong:    var(--clr-gold-800);
	--ui-gold-soft:      var(--clr-gold-100);

	/* ── Escala neutra (escape hatch utilitario) ─────────────── */
	/* Mapea 1:1 a la escala de grises de Modernux (ya se invierte en dark). */
	--ui-neutral-50:  var(--clr-grey-50);
	--ui-neutral-100: var(--clr-grey-100);
	--ui-neutral-200: var(--clr-grey-200);
	--ui-neutral-300: var(--clr-grey-300);
	--ui-neutral-400: var(--clr-grey-400);
	--ui-neutral-500: var(--clr-grey-500);
	--ui-neutral-600: var(--clr-grey-600);
	--ui-neutral-700: var(--clr-grey-700);
	--ui-neutral-800: var(--clr-grey-800);
	--ui-neutral-900: var(--clr-grey-900);

	/* ── Elevaciones / sombras ───────────────────────────────────
	   Mapeadas a --elevation-* (definido en _framework.scss :root y
	   sobreescrito en body.modo_oscuro con opacidades para fondo oscuro).
	   Usar var(--ui-shadow-N) en lugar de $elevation-N en componentes. */
	--ui-shadow-1: var(--elevation-1);
	--ui-shadow-2: var(--elevation-2);
	--ui-shadow-3: var(--elevation-3);
	--ui-shadow-4: var(--elevation-4);
	--ui-shadow-5: var(--elevation-5);

	/* ── Border radius ───────────────────────────────────────────
	   Mapeados a --border-radius-* (emitidos en _framework.scss :root).
	   Sin variante dark-mode: el radio no cambia con el tema.
	   Usar var(--ui-radius-X) en componentes en lugar de $border-radius-X.
	   Un proyecto consumidor puede overridear los --border-radius-* para
	   adaptar la curva global sin tocar los componentes. */
	--ui-radius-1:          var(--border-radius-level-1);
	--ui-radius-2:          var(--border-radius-level-2);
	--ui-radius-3:          var(--border-radius-level-3);
	--ui-radius-card:       var(--border-radius-card);
	--ui-radius-card-inner: var(--border-radius-card-inner);
	--ui-radius-input:      var(--border-radius-input);
	--ui-radius-bubble:     var(--border-radius-bubble);
	--ui-radius-btn:        var(--border-radius-botones);
	--ui-radius-min:        var(--border-radius-minimo);

	/* ── Espaciado / gaps ────────────────────────────────────────
	   Escala ÚNICA de espaciado para gap/padding/margin entre elementos
	   (botoneras, toolbars, chips, leyendas…). Un solo dial global:
	   cambiar un valor acá reajusta todos los componentes que consuman
	   var(--ui-space-N), sin tocar el HTML ni el SCSS de cada componente.
	   En px (no rem) a propósito: no reescala con el toggle de font-size y
	   acompaña a los controles de tamaño fijo (botón = 32px).
	   Un consumidor (gestioo…) puede redefinir estos valores para ajustar
	   el ritmo global sin tocar los componentes. */
	--ui-space-1: 4px;
	--ui-space-2: 8px;
	--ui-space-3: 12px;
	--ui-space-4: 16px;
	--ui-space-5: 24px;
	--ui-space-6: 32px;

	/* ── DataTable (sub-contrato --dt-*) ─────────────────────────
	   Grises afinados por tema del datatable; sin equivalente exacto en los
	   roles --ui-*. Solo lo consume el componente datatable. */
	--dt-row-bg:        var(--clr-datatable-bg);
	--dt-row-bg-hover:  var(--clr-datatable-bg-hover);
	--dt-row-border:    var(--card-inner-border-color);
	--dt-text:          var(--clr-text);
	--dt-head-text:     var(--clr-grey-500);
	--dt-accent:        var(--primary);
	--dt-pag-bg:        var(--clr-datatable-bg);
	--dt-btn-bg:        var(--clr-datatable-btn);
	--dt-btn-bg-hover:  var(--clr-datatable-btn-hover);
	--dt-disabled-text: var(--clr-grey-400);
}

/* =============================================================================
   OVERRIDES DE MODO OSCURO (para tokens que NO surgen de la inversión de grises)
   -----------------------------------------------------------------------------
   Las escalas de color --clr-{primary,danger,success,warning}-* son FIJAS (no se
   invierten en dark, solo los grises). Por eso un token que mapea a un paso claro
   de esas escalas (ej. --ui-primary-soft = --clr-primary-100) seguiría claro en
   dark. Acá redefinimos SOLO los tokens del addon "acento" para que en dark tomen
   pasos oscuros/brillantes de la paleta y matcheen la referencia. No tocamos
   --ui-primary-soft/-strong para no alterar form-info/alertas.
============================================================================== */
body.modo_oscuro {
	--ui-accent-soft-bg:        var(--clr-primary-900);
	--ui-accent-soft-fg:        var(--clr-primary-100);
	--ui-accent-solid-bg:       var(--clr-primary-500);
	--ui-accent-solid-bg-hover: var(--clr-primary-600);
}