/* ============================================================
   CAPA 2 — TOKENS SEMÁNTICOS DE INTERFAZ
   Replica el ROL que cada color cumple en un CRM denso (estructura
   tipo HubSpot), apuntando siempre a los tokens de marca de brand.css.

   Regla: los componentes usan var(--ui-*) — nunca un hex ni una fuente
   literal, y nunca var(--brand-*) directamente.
   ============================================================ */
:root {
  /* --- cromo de navegación (barra superior y lateral) ---
     Desviación consciente del patrón genérico: el manual FK define la
     combinación oficial «blanco sobre azul profundo» para navegación, y esa
     identidad ya está aprobada. Por eso el cromo NO es gris neutro. */
  --ui-chrome-bg:      var(--brand-primary);
  --ui-chrome-text:    #ffffff;
  --ui-chrome-dim:     color-mix(in srgb, #fff 74%, var(--brand-primary)); /* inactivo */
  --ui-chrome-hover:   rgba(255, 255, 255, .07);
  --ui-chrome-active:  rgba(255, 255, 255, .12);
  --ui-chrome-marker:  var(--brand-accent);        /* barra del ítem activo */

  /* --- superficies --- */
  --ui-canvas:         var(--brand-neutral-050);   /* fondo del contenido */
  --ui-surface:        #ffffff;                    /* tarjetas y tablas */
  --ui-border:         var(--brand-neutral-200);   /* divisores y bordes de tarjeta */
  --ui-field-border:   var(--brand-neutral-400);   /* contorno de CONTROLES (3:1) */
  --ui-divider:        color-mix(in srgb, var(--brand-neutral-200) 60%, #fff);
  --ui-row-hover:      color-mix(in srgb, var(--brand-primary) 5%, #fff);
  --ui-row-selected:   color-mix(in srgb, var(--brand-primary) 9%, #fff);

  /* --- texto --- */
  --ui-text:           var(--brand-neutral-900);
  --ui-text-secondary: var(--brand-neutral-500);
  /* TRES GRISES NO SON UNA JERARQUÍA SI EL TERCERO NO SE PUEDE LEER. El valor viejo
     resolvía a #837f76 = 3,99:1 sobre blanco, bajo el mínimo AA de 4,5 — y lo consumía
     `.mdm`, que es la segunda línea de celda de media app. Se mantiene el nombre porque
     lo usan varias hojas, pero apunta al secundario, que sí cumple (5,39:1). */
  --ui-text-muted:     var(--brand-neutral-500);

  /* --- acción ---
     El primario cumple contraste sobrado sobre blanco (azul muy oscuro), así
     que sirve para texto y enlaces. El acento cian NO: solo relleno y foco;
     como texto se usa su variante oscurecida. */
  --ui-link:           var(--brand-secondary);
  --ui-link-hover:     var(--brand-primary);
  --ui-btn-primary:    var(--brand-accent);        /* CTA en cian, por manual */
  --ui-btn-primary-tx: var(--brand-primary);       /* texto sobre el cian */
  /* EL HOVER ACLARA, NO OSCURECE (20-ago-2026). Oscurecer el cian dejaba el texto
     azul en 3,69:1 —bajo el mínimo AA— y por eso el código viejo compensaba pasando
     el texto a blanco a mitad de interacción: el botón cambiaba de color al pasar el
     ratón. Aclarando, el mismo texto azul sube a 5,02:1 y el botón deja de parpadear. */
  --ui-btn-primary-hv: color-mix(in srgb, var(--brand-accent) 93%, #fff);
  /* El cian relleno da 2,55:1 contra el fondo crema: el botón no tiene borde propio y
     su silueta se pierde. Un contorno del cian oscurecido lo dibuja sin tocar el relleno. */
  --ui-btn-primary-bd: var(--brand-accent-text);
  --ui-btn-ghost-bd:   var(--brand-neutral-400);
  /* EL ANILLO DE FOCO ERA DEL MISMO COLOR QUE EL RELLENO DEL CTA: cian sobre cian,
     1,00:1 — invisible justo en el botón más usado. El azul profundo da 13,52:1 sobre
     blanco, y el desplazamiento lo saca del relleno para que se vea siempre. */
  --ui-focus-ring:     var(--brand-primary);
  --ui-focus-ring-inv: #ffffff;                    /* sobre la barra lateral azul */
  --ui-focus-w:        2px;
  --ui-focus-offset:   2px;
  --ui-info-bg:        var(--brand-primary-light);
  --ui-accent-text:    var(--brand-accent-text);

  /* --- estados (fondo al ~12 %, texto al 100 % del color oscurecido) --- */
  --ui-success:        var(--brand-success);   --ui-success-bg: var(--brand-success-bg);
  --ui-warning:        var(--brand-warning);   --ui-warning-bg: var(--brand-warning-bg);
  --ui-danger:         var(--brand-danger);    --ui-danger-bg:  var(--brand-danger-bg);

  /* --- tipografía: escala e interlineados de CRM denso ---
     La familia sale del manual; la escala NO se negocia: es la que da la
     densidad de trabajo. */
  --ui-font-heading: var(--brand-font-display);
  --ui-font-body:    var(--brand-font-body);
  /* REPARTO DE OFICIOS (manual 2.4 y 8.4). Axiforma manda arriba, donde su
     geometría se luce y el texto es corto; Arial Nova manda de 15 px hacia
     abajo, que es donde vive el 90 % de un CRM y donde una geométrica cansa.
     Axiforma va SIEMPRE en 400: es su único peso real, y pedir 700 con
     `font-synthesis: none` lo dejaría igual pero mintiendo en el código. */
  --ui-h1:      var(--brand-weight-display) 26px/34px var(--ui-font-heading);
  --ui-h2:      var(--brand-weight-display) 19px/26px var(--ui-font-heading);
  --ui-card-title: var(--brand-weight-medium) 15px/20px var(--ui-font-body);
  --ui-body:    400 14px/20px var(--ui-font-body);
  --ui-label:   400 12px/16px var(--ui-font-body);
  --ui-meta:    400 12px/16px var(--ui-font-body);
  --ui-button:  var(--brand-weight-medium) 14px/20px var(--ui-font-body);
  /* Interletraje: el manual pide de -10 a -20 unidades en titulares grandes
     de Axiforma (8.4). En em son -0,01 y -0,02. Debajo de 19 px no se toca:
     apretar texto pequeño lo vuelve ilegible, que es lo contrario del oficio. */
  --ui-track-h1:  -.02em;
  --ui-track-h2:  -.01em;
  /* Cifras alineadas en columna: en una tabla de plata, los dígitos tienen que
     caer uno debajo del otro o la columna se lee torcida. */
  --ui-num: tabular-nums;

  /* --- forma y elevación (estructura, independiente de la marca) --- */
  --ui-radius-card:  16px;
  --ui-radius-input: 8px;
  --ui-radius-pill:  9999px;
  --ui-shadow-card:  0 1px 8px rgba(0, 0, 0, .08);
  --ui-shadow-pop:   0 4px 16px rgba(0, 0, 0, .16);

  /* --- espaciado en escala de 4 --- */
  --ui-sp-1: 4px;  --ui-sp-2: 8px;  --ui-sp-3: 12px;
  --ui-sp-4: 16px; --ui-sp-5: 20px; --ui-sp-6: 24px; --ui-sp-8: 32px;
  /* DÓNDE SE COMPRA LA RESPIRACIÓN. El manual pide 60-70 % de aire (principio 1) y esta
     app se usa ocho horas al día para leer listas: en 1366×768 quedan ~400 px útiles
     para filas, así que subir la altura de fila cuesta filas visibles. El aire se compra
     en el relleno del panel y en la separación entre paneles, que no cuestan ninguna. */
  --ui-pad-card:  var(--ui-sp-5);
  --ui-gap-card:  var(--ui-sp-4);
  /* Ancho de lectura: el manual pide 65-75 caracteres por línea (8.4). */
  --ui-medida:    68ch;

  /* --- alturas --- */
  --ui-row-h:     46px;   /* fila de tabla: 44-48 */
  --ui-control-h: 34px;   /* control: 32-36 */
}

/* ------------------------------------------------------------------
   ÚNICA excepción a «aquí no se escriben colores»: los navegadores que no
   entienden color-mix() necesitan el resultado ya calculado. Son exactamente
   las mezclas de arriba, resueltas a mano; si cambia un token de marca, hay
   que recalcularlas (la prueba de diseño lo recuerda).
   ------------------------------------------------------------------ */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --ui-chrome-dim:   #bfcaee;   /* = #fff 74% + primario */
    --ui-divider:      #f1ede3;   /* = neutral-200 60% + blanco */
    --ui-row-hover:    #f2f4fa;   /* = primario 5% + blanco */
    --ui-row-selected: #e9edf7;   /* = primario 9% + blanco */
    /* --ui-text-muted ya no se mezcla: apunta al secundario, que sí cumple AA. */
    --ui-btn-primary-hv: #12a9e2; /* = acento 93% + blanco (el hover ACLARA) */
  }
}