/* Design system variables */
/* ------------------------------------------------------------ 

Variables to define colors, fonts and various visual elements.
Layout use a 4px grid.

*/


/* Colors */
/* ------------------------------------------------------------ */
:root {
    /* Base colors */
    --blue:         #3eb0ef;
    --green:        #a4d037;
    --red:          #f05230;
    --yellow:       #fecd35;
    --white:        #ffffff;
    --grey:         #B8C2CC;
    --black:        #22292F;

    /* Variations */
    --blue-l3: color-mod(var(--blue) l(+15%));
    --blue-l2: color-mod(var(--blue) l(+10%));
    --blue-l1: color-mod(var(--blue) l(+5%));
    --blue-d1: color-mod(var(--blue) l(-5%));
    --blue-d2: color-mod(var(--blue) l(-10%));
    --blue-d3: color-mod(var(--blue) l(-15%));

    --green-l3: color-mod(var(--green) l(+15%));
    --green-l2: color-mod(var(--green) l(+10%));
    --green-l1: color-mod(var(--green) l(+5%));
    --green-d1: color-mod(var(--green) l(-5%));
    --green-d2: color-mod(var(--green) l(-10%));
    --green-d3: color-mod(var(--green) l(-15%));

    --yellow-l3: color-mod(var(--yellow) l(+15%));
    --yellow-l2: color-mod(var(--yellow) l(+10%));
    --yellow-l1: color-mod(var(--yellow) l(+5%));
    --yellow-d1: color-mod(var(--yellow) l(-5%));
    --yellow-d2: color-mod(var(--yellow) l(-10%));
    --yellow-d3: color-mod(var(--yellow) l(-13%));

    --red-l3: color-mod(var(--red) l(+15%));
    --red-l2: color-mod(var(--red) l(+10%));
    --red-l1: color-mod(var(--red) l(+5%));
    --red-d1: color-mod(var(--red) l(-5%));
    --red-d2: color-mod(var(--red) l(-10%));
    --red-d3: color-mod(var(--red) l(-15%));

    --grey-l3:#F8FAFC;
    --grey-l2:#F1F5F8;
    --grey-l1:#DAE1E7;
    --grey-d1:#8795A1;
    --grey-d2:#606F7B;
    --grey-d3:#3D4852;
}


/* Typography */
/* ------------------------------------------------------------ */

/* Fonts */
:root {
    --default-font: -apple-system, BlinkMacSystemFont,
                'avenir next', avenir,
                'helvetica neue', helvetica,
                ubuntu,
                roboto, noto,
                'segoe ui', arial,
                sans-serif;
}

/* Type scale */
:root {
    --text-2xs:     1.15rem;
    --text-xs:      1.3rem;
    --text-s:       1.4rem;
    --text-base:    1.5rem;
    --text-l:       1.8rem;
    --text-xl:      2.5rem;
    --text-2xl:     3.0rem;
    --text-3xl:     3.6rem;
    --text-4xl:     4.5rem;
}


/* Visual elements */
/* ------------------------------------------------------------ */

/* Borders */
:root {
    --border-radius-s:      2px;
    --border-radius-base:   4px;
    --border-radius-l:      8px;
    --border-radius-xl:     12px;
}

/* Shadows */
:root {
    --box-shadow-base: 0 0 1px rgba(0, 0, 0, .12), 0 16px 24px -12px rgba(0, 0, 0, .2); 
}

/* Animations */
:root {
    /* Speed (f: faster, s: slower) */
    --animation-speed-f1: 0.18s;
    --animation-speed-base: 0.25s;
    --animation-speed-s1: 0.45s;
}