/* ==========================================================
   EQUILIBRIO TOTAL
   SISTEMA VISUAL BASE
========================================================== */


:root {

    /* ======================================================
       COLORES OFICIALES
    ====================================================== */

    --eth-petroleo: #3F7A89;
    --eth-petroleo-dark: #326773;
    --eth-petroleo-soft: #EAF2F4;

    --eth-oliva: #A7BA8D;
    --eth-oliva-dark: #73845E;
    --eth-oliva-soft: #F0F4EB;

    --eth-marfil: #F4EDE3;
    --eth-marfil-soft: #FBF8F4;

    --eth-perla: #DADADA;

    --eth-azul: #1F3A5F;
    --eth-azul-soft: #EAF0F7;

    --eth-carbon: #1E1E1E;

    /* ── colores PARA GRAFICAS ────────────────────────────────────────────
       No son los de marca y es a proposito. --eth-petroleo se ve bien en
       botones y encabezados, pero como color de dato reprueba el piso de
       croma: al lado de otro color se lee como gris. Estos dos si pasan las
       seis pruebas -banda de luminosidad, croma, separacion para daltonismo
       (deltaE 18.2 protan), piso de vision normal (22.9) y contraste contra
       el fondo-. Si alguien los "corrige" de vuelta al petroleo de marca,
       la grafica deja de ser legible para quien no distingue rojo y verde. */
    --eth-serie-a: #0088A8;   /* lo que ya esta agendado */
    --eth-serie-b: #B5761A;   /* lo que se espera que llegue */

    --eth-white: #FFFFFF;


    /* ======================================================
       COLORES DE INTERFAZ
    ====================================================== */

    --eth-background: #F5F7F6;

    --eth-text: #1E1E1E;

    --eth-text-secondary: #6E797C;

    --eth-text-light: #929B9E;

    --eth-border: #E2E7E6;


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

    --shadow-xs:
        0 2px 8px
        rgba(31, 58, 95, 0.04);

    --shadow-sm:
        0 8px 24px
        rgba(31, 58, 95, 0.06);

    --shadow-md:
        0 18px 45px
        rgba(31, 58, 95, 0.09);

    --shadow-lg:
        0 30px 80px
        rgba(31, 58, 95, 0.12);


    /* ======================================================
       RADIOS
    ====================================================== */

    --radius-xs: 8px;

    --radius-sm: 12px;

    --radius-md: 18px;

    --radius-lg: 26px;

    --radius-xl: 32px;


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

    --transition:
        180ms ease;

}


/* ==========================================================
   RESET
========================================================== */


* {

    box-sizing: border-box;

}


html {

    margin: 0;

    padding: 0;

}


body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    color: var(--eth-text);

    background: var(--eth-background);

    font-family:
        "Montserrat",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;

}


button,
input,
select,
textarea {

    font: inherit;

}


a {

    color: inherit;

}


svg {

    display: block;

}


::selection {

    color: var(--eth-white);

    background: var(--eth-petroleo);

}