/* ==========================================================================
   Paleta de marca — Latam Streaming
   Manual de marca, Felix Digital Group S.A.C., agosto 2026.
   ==========================================================================
   Único sitio donde viven los colores de la marca. Lo cargan la tienda, el
   panel del cliente y el panel de administrador, así que cambiar un color
   aquí lo cambia en todo el sitio.

   Dos reglas del manual que condicionan todo lo demás:

   1. El azul primario NO se usa como texto sobre fondo oscuro: da 3.86:1,
      por debajo del mínimo legible. Sobre oscuro el realce es el cian.
   2. Ámbar, verde y rojo no son decoración: dicen en qué estado está la
      suscripción del cliente.

   Sobre fondo claro el problema se invierte: el cian da 1.81:1 y el ámbar
   1.83:1 sobre blanco. Por eso existen las variantes "-texto", oscurecidas
   hasta pasar de 4.5:1 sin cambiar de tono. El número al lado de cada una es
   su contraste medido contra blanco y contra Humo, los dos fondos claros.
   ========================================================================== */

:root {
    --marca-azul:    #0B63F6; /* Azul Latam · primario */
    --marca-cian:    #22D3EE; /* Cian Señal · secundario, realce sobre oscuro */
    --marca-ambar:   #FFB020; /* Ámbar Renovación · por vencer */
    --marca-verde:   #22C55E; /* Verde Activo · activo y WhatsApp */
    --marca-rojo:    #FF4D5E; /* Rojo Vencido · vencido */
    --marca-tinta:   #060B1A; /* Tinta Noche · fondo */
    --marca-grafito: #101A33; /* Grafito · superficie */
    --marca-humo:    #F2F6FF; /* Humo · texto sobre oscuro */

    /* Para texto sobre fondo claro. */
    --marca-azul-texto:  #0A56D6; /* 6.33 / 5.85 */
    --marca-cian-texto:  #0B7A8F; /* 5.01 / 4.63 */
    --marca-verde-texto: #157F45; /* 5.06 / 4.67 */
    --marca-ambar-texto: #8A5900; /* 5.98 / 5.53 */
    --marca-rojo-texto:  #C01B2C; /* 6.11 / 5.65 */

    /* Azules del degradado de botones y billetera. Empiezan en el primario
       porque es el punto más claro y el que fija el contraste con el texto
       blanco (5.09); los otros dos sólo dan profundidad. */
    --marca-azul-medio:  #0A56D6;
    --marca-azul-hondo:  #0C46A8;

    /* Sobre los colores vivos de la marca el texto va en Tinta, no en blanco:
       blanco sobre cian da 1.81, sobre ámbar 1.83 y sobre verde 2.28. */
    --marca-sobre-vivo: var(--marca-tinta);
}

/* ==========================================================================
   Escala — el acabado sale de aquí
   ==========================================================================
   Un acabado cuidado no viene del color: viene de repetir SIEMPRE los mismos
   valores. Antes había 18 tamaños de letra y 24 espaciados distintos, muchos
   separados por un píxel: nadie los distingue, pero el ojo los lee como
   descuido.

   Toda medida nueva tiene que salir de estas escalas. Si algo "necesita"
   0.65rem, es que el diseño está mal, no la escala.
   ========================================================================== */

:root {
    /* Espaciado, base 4px. */
    --e-1: 0.25rem;   /*  4 */
    --e-2: 0.5rem;    /*  8 */
    --e-3: 0.75rem;   /* 12 */
    --e-4: 1rem;      /* 16 */
    --e-5: 1.5rem;    /* 24 */
    --e-6: 2rem;      /* 32 */
    --e-7: 3rem;      /* 48 */

    /* Tipografía: seis pasos y ni uno más. */
    --t-1: 0.75rem;    /* 12 */
    --t-2: 0.8125rem;  /* 13 */
    --t-3: 0.875rem;   /* 14 */
    --t-4: 1rem;       /* 16 */
    --t-5: 1.25rem;    /* 20 */
    --t-6: 1.5625rem;  /* 25 */

    /* Un septimo paso, solo para TITULARES de portada. No se usa en tablas ni
       en formularios: si aparece dos veces en una pantalla, deja de destacar
       y ya no sirve para lo que existe. */
    --t-7: 2.5rem;     /* 40 */

    /* Pesos: tres. El 700 y el 900 hacían que todo gritara. */
    --p-normal: 400;
    --p-medio:  500;
    --p-fuerte: 600;

    /* Un radio y un grosor de línea para toda la interfaz. */
    --radio: 3px;
    --linea: 1px;
}