/*==================================================
=            VARIABLES GLOBALES DEL SISTEMA        =
==================================================*/

/*
   Todos los colores, tamaños y espacios del sistema salen de aquí.
   Cambiar un valor en este archivo lo cambia en todas las pantallas.

   La paleta es sobria a propósito: esta es una herramienta de trabajo
   que se mira ocho horas al día, y el color se reserva para lo que
   tiene que saltar a la vista (una deuda, un movimiento anulado).
*/

:root{

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

    --color-primary: #2F4858;
    --color-primary-hover: #22333F;

    --color-secondary: #33658A;

    /* Verde: plata que entra, saldo a favor, todo en orden. */
    --color-success: #2E6F53;
    --color-success-light: #E4F0EA;

    /* Rojo: deuda. Es el color que más se busca en la pantalla. */
    --color-danger: #B03A2E;
    --color-danger-light: #FBE9E7;

    --color-warning: #B7791F;
    --color-warning-light: #FDF3DC;

    --color-info: #33658A;
    --color-info-light: #E7EFF6;

    --color-background: #F4F6F8;

    --color-surface: #FFFFFF;

    --color-surface-alt: #EDF1F4;

    --color-border: #D6DEE4;

    --color-text: #1C262E;

    --color-text-light: #64757F;

    --color-white: #FFFFFF;

    --color-overlay: rgba(0,0,0,.45);

    /*==================================
    =            TIPOGRAFÍAS           =
    ==================================*/

    --font-primary: "Public Sans", sans-serif;

    /* Los montos van en monoespaciada: así las cifras quedan alineadas
       una debajo de otra y se pueden comparar de un vistazo. */
    --font-mono: "IBM Plex Mono", monospace;

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

    --container-width: 1360px;

    --topbar-height: 68px;

    --sidebar-width: 268px;

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

    --space-xs: .25rem;

    --space-sm: .5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-2xl: 3rem;

    /*==================================
    =            BORDES                =
    ==================================*/

    --radius-sm: 5px;

    --radius-md: 8px;

    --radius-lg: 14px;

    --radius-round: 999px;

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

    --shadow-sm:
        0 1px 3px rgba(28,38,46,.07);

    --shadow-md:
        0 6px 18px rgba(28,38,46,.09);

    --shadow-lg:
        0 16px 40px rgba(28,38,46,.14);

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

    --transition-fast: .15s ease;

    --transition: .25s ease;

}