/* ---------------------------------------------------------------------------- */
/* Common rules for all places (colors, sizes, default values, etc.) */

:root {

    /*
        NOTE: change this values according to global viewport size. It is used
        to update the font-size in smaller iframes, to avoid shrinking.
     */
    --screen-width: 1080;
    --screen-height: 1920;

    /*
    NOTE: define this to make all font units independent of current zoom/scale.
    */
    --font-size: 1.6;
    font-size: calc(var(--font-size) * 1vmin);

    --default-font: "Montserrat";
    /* FIXME: you need to uncomment this, but be prepared to adjust everything else... */
    /* font-family: var(--default-font); */

    --pix: round(nearest, calc(100vmin / var(--screen-width)), 1px);

    --radius-big:    round(nearest, 2.7rch, 1px);
    --radius-normal: round(nearest, 2.3rch, 1px);
    --radius-small:  round(nearest, 1.5rch, 1px);
    --radius-tiny:   round(nearest, 1rch, 1px);
    --line-w:        round(nearest, 0.4rch, 1px);
    --border-w:      round(nearest, 0.25rch, 1px);

    /* --radius-big:    calc(31 * var(--pix)); */
    /* --radius-normal: calc(26 * var(--pix)); */
    /* --radius-small:  calc(17 * var(--pix)); */
    /* --radius-tiny:   calc(11 * var(--pix)); */
    /* --line-w:        calc(5  * var(--pix)); */
    /* --border-w:      calc(3  * var(--pix)); */

    --top-dock-h: 6vmax;

    --gray-dark-1:  #16181b;
    --gray-dark-2:  #212529;
    --gray-dark-3:  #343a40;
    --gray-dark-4:  #495057;
    --gray-light-1: #adb5bd;
    --gray-light-2: #bcbcbd;
    --gray-light-3: #dbdcdc;

    --red-dark:     #780000;
    --red:          #c1121f;
    --orange:       #e2711d;
    --yellow:       #ffc43d;
    --green-dark:   #4f772d;
    --green:        #8ac926;
    --blue-dark:    #006494;
    --blue:         #00a6fb;

    --bg-color:     black;
    --fg-color:     white;
    --sh-color:     black;
}