/* =====================================================================
 * PALETA GLOBAL de apifacturalaya.com — FUENTE UNICA de color.
 *
 * La carga el layout, asi que TODA pantalla la tiene. No hay paletas por
 * modulo: el CSS de cada pantalla consume estas variables directamente.
 *
 * POR QUE ASI, Y NO COMO EL ERP
 * En el ERP cada modulo define su propia `paleta_modulo_css.volt` con sus
 * tokens locales, y el resultado es que hoy hay trece copias de casi los
 * mismos colores, con inventario desalineado (azul #2563EB donde el resto
 * usa indigo #6366F1, y verde esmeralda donde el resto usa verde). Cambiar
 * el color de marca alla significa tocar trece archivos y acordarse de los
 * trece. Aqui se cambia aqui.
 *
 * DE DONDE SALEN LOS VALORES
 * Son los mismos hex de gestionuser, Mi Perfil, compras y SystemPOS, que
 * vienen de la paleta por defecto de Tailwind: familia indigo para la marca,
 * slate para superficies y texto. No hay Tailwind cargado en ninguna parte
 * —la plantilla base es Bootstrap 3— y no hace falta: se usan los valores,
 * no el framework.
 *
 * CONTRATO
 * Los nombres --fyerp_paleta_* son los que ya consumen los componentes
 * compartidos (fl_confirm, fl_loading, fl_stat_card, fl_gauge_limite,
 * fl_info_tip, fl_imagen_avatar), copiados del ERP sin tocar una linea.
 * Renombrar un token aqui los rompe a todos.
 *
 * Los *_rgb existen para tintes con transparencia:
 *     rgba(var(--fyerp_paleta_accent_rgb), .12)
 * ===================================================================== */

:root {

    /* ── Marca — indigo ─────────────────────────────────────────────── */
    --fyerp_paleta_accent           : #6366F1;   /* indigo-500 */
    --fyerp_paleta_accent_rgb       : 99, 102, 241;
    --fyerp_paleta_accent_hover     : #4F46E5;   /* indigo-600 */
    --fyerp_paleta_accent_tint      : #EEF2FF;   /* indigo-50  */
    --fyerp_paleta_accent_borde     : #C7D2FE;   /* indigo-200 */

    /* ── Semantica de estado ────────────────────────────────────────── */
    --fyerp_paleta_exito            : #16A34A;   /* green-600  */
    --fyerp_paleta_exito_rgb        : 22, 163, 74;
    --fyerp_paleta_exito_tint       : #DCFCE7;   /* green-100  */

    --fyerp_paleta_advertencia      : #D97706;   /* amber-600  */
    --fyerp_paleta_advertencia_rgb  : 217, 119, 6;
    --fyerp_paleta_advertencia_tint : #FEF3C7;   /* amber-100  */

    --fyerp_paleta_critico          : #DC2626;   /* red-600    */
    --fyerp_paleta_critico_rgb      : 220, 38, 38;
    --fyerp_paleta_critico_tint     : #FEF2F2;   /* red-50     */

    /* ── Acentos secundarios ────────────────────────────────────────── */
    /* Los usan los componentes copiados; aqui sirven para distinguir de un
     * vistazo cosas que no son estado: ambiente de prueba, rol, origen. */
    --fyerp_paleta_violeta          : #7C3AED;   /* violet-600 */
    --fyerp_paleta_violeta_tint     : #F5F3FF;   /* violet-50  */
    --fyerp_paleta_teal             : #0D9488;   /* teal-600   */
    --fyerp_paleta_teal_tint        : #CCFBF1;   /* teal-100   */

    /* ── Superficies y texto — slate ────────────────────────────────── */
    --fyerp_paleta_surface          : #FFFFFF;
    --fyerp_paleta_surface_muted    : #F8FAFC;   /* slate-50   */
    --fyerp_paleta_surface_suave    : #F1F5F9;   /* slate-100  */
    --fyerp_paleta_border           : #E2E8F0;   /* slate-200  */
    --fyerp_paleta_border_fuerte    : #CBD5E1;   /* slate-300  */
    --fyerp_paleta_texto            : #0F172A;   /* slate-900  */
    --fyerp_paleta_texto_muted      : #64748B;   /* slate-500  */
    --fyerp_paleta_texto_tenue      : #94A3B8;   /* slate-400  */

    /* ── Forma, profundidad y movimiento ────────────────────────────── */
    --fyerp_paleta_radio            : 14px;
    --fyerp_paleta_radio_sm         : 10px;
    --fyerp_paleta_sombra           : 0 1px 3px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .06);
    --fyerp_paleta_sombra_drawer    : -24px 0 60px rgba(15, 23, 42, .18);
    --fyerp_paleta_transicion       : .22s cubic-bezier(.4, 0, .2, 1);
}