@charset "UTF-8";
/* https://onlineasciitools.com/convert-text-to-ascii-art (BIG) */
:root, ::backdrop {
    --EMborder : calc(var(--mini_EM) * var(--medium));
    --EMradius : calc(var(--EMborder) * 4);

    /* COLORS */
    --dark :      8   8   8;
    --light :   248 249 250;

    --black :     0   0   0;
    --white :   255 255 255;

    --system    : 102  51 153;
    --info      :   0 153 255;
    --success   :  18 154  79;
    --warning   : 255 140   0;
    --error     : 247  40  72;

    --mode-bgc : var(--light);
    --opac-bgc : var(--normal);

    --mode-color : var(--dark);
    --opac-color : var(--normal);


    /*
          _____ _____ ____________  _____
         / ____|_   _|___  /  ____|/ ____|
        | (___   | |    / /| |__  | (___
         \___ \  | |   / / |  __|  \___ \
         ____) |_| |_ / /__| |____ ____) |
        |_____/|_____/_____|______|_____/
     */
    --EM :              18px;
    --container :       calc(100% - 3em);
    --container-max :   60em;

    --gap : 1em;

    --level0 : 0;
    --level1 : var(--normal);
    --level2 : calc(var(--level1) * var(--big));
    --level3 : calc(var(--level2) * var(--big));
    --level4 : calc(var(--level3) * var(--big));

    /* ZOOM */
    --mini :    0.2500;
    --tiny :    0.4375;
    --small :   0.6250;
    --medium :  0.8125;
    --normal :  1.0000;
    --large :   1.2500;
    --big :     1.7500;
    --huge :    2.2500;
    --massive : 2.7500;

    /* TIME */
    --time :        1.5s;
    --mini_S :      calc(var(--time) * var(--mini));
    --tiny_S :      calc(var(--time) * var(--tiny));
    --small_S :     calc(var(--time) * var(--small));
    --medium_S :    calc(var(--time) * var(--medium));
    --normal_S :    calc(var(--time) * var(--normal));
    --large_S :     calc(var(--time) * var(--large));
    --big_S :       calc(var(--time) * var(--big));
    --huge_S :      calc(var(--time) * var(--huge));
    --massive_S :   calc(var(--time) * var(--massive));

    /* TEXT */
    --mini_EM :     calc(var(--EM) * var(--mini));
    --tiny_EM :     calc(var(--EM) * var(--tiny));
    --small_EM :    calc(var(--EM) * var(--small));
    --medium_EM :   calc(var(--EM) * var(--medium));
    --normal_EM :   calc(var(--EM) * var(--normal));
    --large_EM :    calc(var(--EM) * var(--large));
    --big_EM :      calc(var(--EM) * var(--big));
    --huge_EM :     calc(var(--EM) * var(--huge));
    --massive_EM :  calc(var(--EM) * var(--massive));

    --xs:320;
    --sm:480;
    --md:768;
    --lg:1024;

    --xs_PX:calc(var(--xs) * 1px);
    --sm_PX:calc(var(--sm) * 1px);
    --md_PX:calc(var(--md) * 1px);
    --lg_PX:calc(var(--lg) * 1px);
}

/**
 * @link https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme
 */
/* @media (prefers-color-scheme: dark) {
    :root, ::backdrop {
        --mode  : var(--dark);
        --color : var(--light);
    }
}

@media (prefers-color-scheme: light) {
    :root, ::backdrop {
        --mode  : var(--light);
        --color : var(--dark);
    }
} */

[debug]:not([debug="content"]), [debug]:not([debug="content"])::before, [debug]:not([debug="content"])::after,
[debug] *, [debug] *::before, [debug] *::after {
    --debug:0.5em;
    --debug-color : 128 0 128;

    outline:calc(var(--debug) * 0.2) dashed rgb(var(--debug-color) / 0.3);

    background-color: rgb(var(--debug-color) / 0.15);

    padding-top:var(--innT, var(--debug));
    padding-right:var(--innR, var(--debug));
    padding-bottom:var(--innB, var(--debug));
    padding-left:var(--innL, var(--debug));
}

[debug] > *, [debug] > *::before, [debug] > *::after { --debug-color : 0 103 128; }
[debug] > * > *, [debug] > * > *::before, [debug] > * > *::after { --debug-color : 37 128 0; }
[debug] > * > * > *, [debug] > * > * > *::before, [debug] > * > * > *::after { --debug-color : 128 115 0; }
[debug] > * > * > * > *, [debug] > * > * > * > *::before, [debug] > * > * > * > *::after { --debug-color : 128 33 0; }