/* ===========================================================================
   tokens.css — el lenguaje de diseño de TiendaWeb y CitasWeb.
   ---------------------------------------------------------------------------
   ESTE ARCHIVO ES EL ESTANDAR. Una copia IDENTICA vive en CitasWeb; si se
   cambia aqui, se cambia alla. Mismo acuerdo que ya existe entre TemaTienda.cs
   y POSweb/Shared/TemaPos.cs.

   Quien lo lleva: TiendaWeb y CitasWeb, los dos productos que se le venden a
   emprendedores y que tienen vitrina publica. POSweb, SistemaRexpress,
   InternacionalWeb y los paneles internos se quedan con su diseno actual.

   Dos reglas de uso que no se negocian, porque son las que lo desarman:
     1. El naranja --cta es SOLO para la accion principal de la pantalla.
        Una por vista. Si hay dos naranjas, no hay ninguno.
     2. El color de la tienda NO pinta texto sobre blanco. Pinta barras,
        seleccion y boton secundario. Hay tiendas amarillas y rosadas, y ese
        texto no se lee.

   Toda medida, color, radio y tamano de letra de la vitrina y del panel sale
   de aqui. Ningun valor suelto en catalogo.css ni en panel.css.
   =========================================================================== */

:root {
    /* --- marca: la pone cada tienda en la pagina publica; en el panel es fija --- */
    --marca: #1D4ED8;

    /* Derivados del color de la tienda. La barra NUNCA usa el color crudo: una
       tienda amarilla dejaria el texto blanco ilegible.

       OJO: estos dos se resuelven DONDE SE DECLARAN, no donde se usan. Declarados aqui
       en :root se calculan contra el --marca de aqui, y cambiar --marca mas abajo (que es
       lo que hace cada tienda en su pagina) ya no los mueve: todas las tiendas terminaban
       con la misma barra azul. Por eso la vitrina vuelve a declararlos junto a su --marca
       (catalogo.css, regla ".tw, .cat-fondo"). Lo de aqui es solo el valor por defecto
       para el panel, que lleva paleta fija. */
    --marca-oscuro: color-mix(in srgb, var(--marca) 34%, #0A1020);
    --marca-suave: color-mix(in srgb, var(--marca) 10%, #fff);

    /* --- llamada a la accion --- */
    --cta: #F97316;
    --cta-fuerte: #EA580C;
    --cta-suave: #FFF3E8;

    /* --- tinta --- */
    --tinta: #0F172A;
    --tinta-2: #475569;
    --tinta-3: #8595AC;

    /* --- lineas y superficies --- */
    --linea: #E3E8EF;
    --linea-fuerte: #CBD5E1;
    --fondo: #F3F5F9;
    --superficie: #FFFFFF;

    /* --- estados --- */
    --exito: #15803D;
    --exito-suave: #E8F7EE;
    --alerta: #B45309;
    --alerta-suave: #FEF6E7;
    --error: #DC2626;
    --error-suave: #FDECEC;

    /* --- tipografia --- */
    --fuente: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --t-xs: 12px;
    --t-sm: 13px;
    --t-md: 14px;
    --t-lg: 16px;
    --t-xl: 19px;
    --t-2xl: 24px;
    --t-3xl: 30px;

    /* --- espacio --- */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;

    /* --- radios --- */
    --r1: 6px;
    --r2: 10px;
    --r3: 14px;

    /* --- sombras --- */
    --s1: 0 1px 2px rgba(15, 23, 42, .07);
    --s2: 0 2px 6px rgba(15, 23, 42, .08), 0 10px 26px rgba(15, 23, 42, .07);

    /* --- densidad --- */
    --alto-control: 38px;
    --alto-fila: 42px;
}

/* Respaldo para navegadores sin color-mix (Safari viejo, WebView de Android
   viejo): el azul del producto, que siempre tiene contraste contra el blanco.
   Sin esto, --marca-oscuro queda vacia y la barra sale transparente. */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    :root {
        --marca-oscuro: #0E1A3A;
        --marca-suave: #EFF4FF;
    }
}