/* ==========================================================
   EMFORSOL
   VARIABLES.CSS
   ----------------------------------------------------------
   Variables globales del sistema
   Versión: 1.0.0
   ========================================================== */

:root{

    /* ======================================================
       COLORES CORPORATIVOS
    ====================================================== */

    --color-primario:#6FAF2D;
    --color-primario-hover:#81C53A;
    --color-primario-activo:#5C9625;

    --color-secundario:#2E2E2E;

    --color-fondo:#171717;
    --color-fondo-secundario:#202020;

    --color-card:#252525;
    --color-card-hover:#303030;

    --color-borde:#3A3A3A;

    --color-texto:#F5F5F5;
    --color-texto-secundario:#B5B5B5;

    --color-error:#C0392B;
    --color-warning:#E67E22;
    --color-success:#27AE60;
    --color-info:#3498DB;

    /* ======================================================
       TIPOGRAFÍA
    ====================================================== */

    --fuente-principal:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    --peso-light:300;
    --peso-normal:400;
    --peso-medium:500;
    --peso-semibold:600;
    --peso-bold:700;

    /* ======================================================
       TAMAÑOS TEXTO
    ====================================================== */

    --texto-xs:12px;
    --texto-sm:14px;
    --texto-md:16px;
    --texto-lg:20px;
    --texto-xl:26px;
    --texto-xxl:34px;

    /* ======================================================
       ESPACIADOS
    ====================================================== */

    --espacio-1:4px;
    --espacio-2:8px;
    --espacio-3:12px;
    --espacio-4:16px;
    --espacio-5:20px;
    --espacio-6:24px;
    --espacio-7:32px;
    --espacio-8:40px;
    --espacio-9:48px;
    --espacio-10:64px;

    /* ======================================================
       TARJETAS
    ====================================================== */

    --card-ancho:360px;
    --card-alto:250px;

    --card-radio:22px;

    --card-padding:28px;

    /* ======================================================
       BOTONES
    ====================================================== */

    --boton-alto:52px;

    --boton-radio:14px;

    /* ======================================================
       INPUTS
    ====================================================== */

    --input-alto:52px;

    --input-radio:12px;

    /* ======================================================
       SOMBRAS
    ====================================================== */

    --sombra-card:
        0 8px 25px rgba(0,0,0,.30);

    --sombra-card-hover:
        0 18px 45px rgba(0,0,0,.45);

    /* ======================================================
       TRANSICIONES
    ====================================================== */

    --transicion-rapida:.15s ease;

    --transicion:.25s ease;

    --transicion-lenta:.40s ease;

    /* ======================================================
       CONTENEDOR
    ====================================================== */

    --contenido-maximo:1500px;

    /* ======================================================
       HEADER
    ====================================================== */

    --header-altura:90px;

    /* ======================================================
       FOOTER
    ====================================================== */

    --footer-altura:60px;

    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-dropdown:100;

    --z-modal:500;

    --z-loader:900;

    --z-toast:1000;

}