/* =========================================================================
   Tokens de diseño — ÚNICO sitio donde se escribe un color, un radio o una
   sombra. El resto del CSS (estilos.css, ec-components.css, hojas de vista)
   referencia estas variables; ningún otro fichero propio declara un #rrggbb.
   Lo vigila UnitestEconomitza/StyleTokensGuardTests.
   =========================================================================
   Dos niveles:
   - Marca (--eco-*): los cuatro colores del manual de Morillas (dic-2025) y
     unos pocos derivados del azul. No se añaden colores aquí sin decisión de
     marca.
   - Semánticos (--ec-*): lo que consume el resto del CSS. Un botón no es
     "azul", es una acción; una celda no es "amarilla", está pendiente. Si
     cambia la marca se tocan los --eco-*; si cambia una decisión de diseño
     ("las acciones secundarias van rellenas") se toca el --ec-* y cambia
     toda la aplicación.
   ========================================================================= */

:root {
    /* ---- Marca ---------------------------------------------------------- */
    --eco-blue:  #0069FF;   /* Pantone 300 C: debe predominar */
    --eco-black: #000000;
    --eco-gray:  #DAD9D6;   /* Pantone Cool Gray 1U */
    --eco-white: #FFFFFF;

    /* Derivados del azul (no corporativos, pero coherentes con él) */
    --eco-blue-700: #0052cc;   /* hover y activo (acción secundaria, contorno) */
    /* SI-2467: hover del botón de acción PRINCIPAL (relleno azul, texto blanco):
       el mismo azul pero más claro/brillante, no más oscuro como el de arriba,
       a petición de Joaquim. Contraste con blanco 4.31:1 (por debajo del 4.5:1
       de AA para texto normal; se acepta el trade-off por ser un estado hover
       transitorio y una decisión de marca explícita, no un descuido). */
    --eco-blue-400: #0F72FF;
    /* SI-2467: cabecera de tabla, a medio camino entre el azul pálido (blue-100) y el
       corporativo: más presencia sin perder el texto oscuro (contraste ≈ 7.8:1). */
    --eco-blue-300: #6da9ff;
    --eco-blue-200: #cfe0ff;   /* bordes de acción secundaria */
    --eco-blue-100: #dbe9ff;   /* separadores suaves */
    --eco-blue-050: #f0f6ff;   /* fondos de hover, filas resaltadas */

    /* Neutros de apoyo */
    --eco-gray-700: #5b6673;   /* texto secundario */
    --eco-gray-200: #e4e7ea;   /* líneas horizontales de rejilla, entre gray-100 y el gris de marca */
    --eco-gray-100: #eef1f5;   /* superficies alternas */
    --eco-gray-050: #fafbfd;   /* filas alternas */

    /* ---- Semánticos: acción --------------------------------------------- */
    --ec-action:            var(--eco-blue);
    --ec-action-hover:      var(--eco-blue-700);
    --ec-action-hover-primary: var(--eco-blue-400);
    --ec-action-text:       var(--eco-white);
    --ec-action-soft-bg:    var(--eco-white);
    --ec-action-soft-border: var(--eco-blue-200);
    --ec-action-soft-hover: var(--eco-blue-050);

    /* ---- Semánticos: superficie y texto --------------------------------- */
    --ec-surface:           var(--eco-white);
    --ec-surface-alt:       var(--eco-gray-100);
    /* SI-2467: cabecera de tabla (Telerik y demás terceros); --eco-blue-100 ya
       estaba reservado para esto en el comentario de arriba, pero ec-components.css
       pintaba con --ec-surface-alt (gris) en vez de con él. */
    --ec-table-header-bg:   var(--eco-blue-300);
    --ec-table-header-line: var(--eco-blue);     /* separadores entre cabeceras */
    /* Capa fija de selección obligatoria (almacén) y filas seleccionables. */
    --ec-overlay-backdrop:  rgba(0, 0, 0, 0.55);
    --ec-shadow-modal:      0 12px 40px rgba(0, 0, 0, 0.25);
    --ec-surface-selectable-hover: var(--eco-blue-100);
    /* Formato base de tabla: rejilla interior sutil (horizontal algo más marcada que la
       vertical) y altura mínima de fila de dos líneas de texto. */
    --ec-table-line:        var(--eco-gray-200);
    --ec-table-line-faint:  var(--eco-gray-100);
    --ec-table-row-min:     2.75rem;
    --ec-surface-stripe:    var(--eco-gray-050);
    --ec-surface-highlight: var(--eco-blue-050);
    --ec-border:            var(--eco-gray);
    --ec-border-strong:     var(--eco-blue-100);
    --ec-text:              var(--eco-black);
    --ec-text-muted:        var(--eco-gray-700);
    --ec-text-on-action:    var(--eco-white);
    --ec-link:              var(--eco-blue);
    /* Filas de elementos desactivados (SI-2486): texto y enlace atenuados. */
    --ec-inactive-text:     #8b93a1;
    --ec-inactive-link:     #7fa6e6;

    /* ---- Semánticos: estados. Comunican, no decoran: por eso salen de la
            paleta de marca. Tonos contenidos; sustituyen a los chillones
            (#ffe900, #80ff00, #0cc, #f90) que llevaban las celdas inline. -- */
    --ec-state-pending:     #fff4cc;
    --ec-state-pending-text: #7a5c00;
    --ec-state-done:        var(--eco-blue-050);
    --ec-state-done-text:   var(--eco-blue-700);
    --ec-state-danger:      #b42318;
    --ec-state-danger-bg:   #fdecea;
    --ec-state-warning:     #b54708;
    --ec-state-warning-bg:  #fff1e5;

    /* ---- Semánticos: grupos de columnas en grids de recepción/regularización.
            Distinguen bloques de columnas (pedido, formato y precio de venta,
            unidad de medida, totales); tintes muy claros en lugar de los
            #FF0 / #0CC / #F90 / #0EE que llevaban las celdas inline. ------- */
    --ec-col-order:   #fff8e1;   /* cantidades e importes del pedido */
    --ec-col-format:  #e7f6f5;   /* formato y precio de venta */
    --ec-col-unit:    #fff1e6;   /* unidad de medida */
    --ec-col-total:   #eaf3ff;   /* totales y reserva */

    /* ---- Forma ---------------------------------------------------------- */
    --ec-radius:            0.625rem;   /* pill / esquinas redondeadas del manual */
    --ec-radius-sm:         0.375rem;
    --ec-shadow:            0 1px 2px rgba(0, 0, 0, 0.06);
    --ec-focus-ring:        0 0 0 2px var(--eco-blue-200);
    --ec-control-height:    2rem;
}