/* ==========================================================
   VARIABLES GLOBALS
========================================================== */

:root{

    /* ======================================================
       COLORS
    ====================================================== */


    --color-text: #1e293b;
    --color-text-clar: #64748b;

    --color-fons: #ffffff;
    --color-fons-alt: #f8fafc;

    --color-border: #dbe3ea;

    --color-exit: #22c55e;
    --color-alerta: #facc15;
    --color-error: #ef4444;
    

     --mgr-brand:#5B84A6;
     --mgr-brand-rgb: 91, 132, 166;

    --mgr-light:#F2F5F8;

    --mgr-dark:#1B2330;

    --mgr-text:#1B2330;

    --mgr-white:#FFFFFF;


    /* ======================================================
       TIPOGRAFIA
    ====================================================== */

    --font-principal: "Inter", sans-serif;
    --font-titols: "Montserrat", sans-serif;
    --font-codi: monospace;

    /* ======================================================
       MIDA TIPOGRAFIA
    ====================================================== */

    --text-xs: .75rem;
    --text-s: .875rem;
    --text-m: 1rem;
    --text-l: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 4rem;

    /* ======================================================
       PESOS
    ====================================================== */

    --pes-light:300;
    --pes-normal:400;
    --pes-medium:500;
    --pes-bold:700;

    /* ======================================================
       INTERLINEAT
    ====================================================== */

    --linia-curta:1.2;
    --linia-normal:1.5;
    --linia-llarga:1.8;

    /* ======================================================
       ESPAIATS
    ====================================================== */

    --espai-xxs:.25rem;
    --espai-xs:.5rem;
    --espai-s:1rem;
    --espai-m:2rem;
    --espai-l:4rem;
    --espai-xl:6rem;
    --espai-2xl:8rem;

    /* ======================================================
       CONTENIDORS
    ====================================================== */

    --ample-xs:640px;
    --ample-s:768px;
    --ample-m:1024px;
    --ample-l:1280px;
    --ample-xl:1440px;
    --ample-xxl:1600px;

    /* ======================================================
       RADIUS
    ====================================================== */

    --radi-xs:4px;
    --radi-s:8px;
    --radi-m:16px;
    --radi-l:24px;
    --radi-xl:40px;
    --radi-cercle:999px;

    /* ======================================================
       OMBRES
    ====================================================== */

    --ombra-s:0 2px 6px rgba(0,0,0,.08);
    --ombra-m:0 6px 18px rgba(0,0,0,.12);
    --ombra-l:0 15px 40px rgba(0,0,0,.18);

    /* ======================================================
       TRANSICIONS
    ====================================================== */

    --transicio-rapida:.15s ease;
    --transicio-normal:.3s ease;
    --transicio-lenta:.6s ease;

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

    --alcada-header:90px;

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

    --z-dropdown:100;
    --z-header:500;
    --z-modal:1000;
    --z-loader:9999;

}

body {
   background-color: var(--mgr-white);
}