:root {
    color-scheme: light dark;

    --oircle-font:
            "Roboto",
            Arial,
            sans-serif;

    --oircle-pop: cubic-bezier(.614, -1.553, 0, 2.313);
    --oircle-smooth: cubic-bezier(.2, .8, .2, 1);

    --oircle-bg: #ffffff;
    --oircle-bg-soft: #f3f3f3;
    --oircle-surface: rgba(0, 0, 0, 0.055);
    --oircle-surface-strong: rgba(0, 0, 0, 0.09);
    --oircle-border: rgba(0, 0, 0, 0.12);

    --oircle-text: #050505;
    --oircle-muted: rgba(0, 0, 0, 0.62);

    --oircle-glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
    --oircle-glass-shadow-strong: 0 30px 100px rgba(0, 0, 0, 0.18);

    --oircle-tile-highlight: rgba(0, 0, 0, 0.08);
    --oircle-control-bg: rgba(255, 255, 255, 0.72);
    --oircle-control-text: #050505;

    --oircle-default-gry: #464646;
        --deepblueleft: #164eeb;
        --deepblueright: #1581ea;
        --oircle-notification: #0076ff26;
        --oircle-binding-blue: #495661;
        --oircle-grim-gry: #a0a0a0;
        --white: white;
        --hover-element-dynamic: #c0c0c080;
        --oircle-organic-orange: #ff7000;
        --element-dynamic: #e9e9e980;
        --white-smoke: #f3f3f3;
        --oircle-bold-blue: #1aa0e0;
        --oircle-vista-violet: #d41367;
        --black: #000;
        --dismiss-element: #e01a1a;
        --oircle-piercing-purple: #41226c;
        --oircle-yielding-yellow: #fdcc2e;
                         --neo-dark: #d1d9e6;
    --active-green: #0ba100;
    --oircle-music: #0c1125;
    --frost-blue: #1881dd26;
    --frost-red: #dd181826;
    --frost-green: #18dd3c26;
    --oircle-grimy-green: #98bf32;
}

@media (prefers-color-scheme: dark) {
    :root {
        --oircle-bg: #000000;
        --oircle-bg-soft: #1a1a1a;
        --oircle-surface: rgba(255, 255, 255, 0.07);
        --oircle-surface-strong: rgba(255, 255, 255, 0.12);
        --oircle-border: rgba(255, 255, 255, 0.14);

        --oircle-text: #ffffff;
        --oircle-muted: rgba(255, 255, 255, 0.68);

        --oircle-glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
        --oircle-glass-shadow-strong: 0 30px 100px rgba(0, 0, 0, 0.42);

        --oircle-tile-highlight: rgba(255, 255, 255, 0.18);
        --oircle-control-bg: rgba(0, 0, 0, 0.32);
        --oircle-control-text: #ffffff;
    }
}

:root {
    --oircle-glass-readable-bg: rgba(255, 255, 255, 0.68);
    --oircle-glass-readable-border: rgba(0, 0, 0, 0.08);
    --oircle-glass-readable-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);

    --oircle-text-shadow-soft: 0 1px 2px rgba(255, 255, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root {
        --oircle-glass-readable-bg: rgba(0, 0, 0, 0.36);
        --oircle-glass-readable-border: rgba(255, 255, 255, 0.12);
        --oircle-glass-readable-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);

        --oircle-text-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45);
    }
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--oircle-font);
}

* {
    font-family: var(--oircle-font) !important;
}

@font-face {
    font-family: "Roboto";
    src: url("/design/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/design/fonts/roboto/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}