:root {
    
    --font: 'DM Sans', 'Segoe UI', sans-serif;

    --text-opaque: #fff;
    --text-dim: rgba(255, 255, 255, 0.6);
    --text-color: rgba(255, 255, 255, 0.9);

    --accent-color: #0099cc;

    --body-color: #111;

    --page-color: #292929;
    --flatbox-color: #252525;

    --workspace-color: #181818;
    --menu-color: #222222;
    --panel-color: #282828;
    --group-color: #292929;
    --title-color: #1e1e1e;

    --component-border: rgba(255, 255, 255, 0.5);
    --component-dim: rgba(255, 255, 255, 0.05);

    --component-shade: rgba(0, 0, 0, 0.1);

    --component-color: #3a3a3a;
    --component-highlight: #444444;

    --slider-color: #3e3e3e;

    --normal-opacity: 0.6;
    --hover-opacity: 1;

    --accent-negative: #ffffff0d;

    --splitter-size: 8px;
    --splitter-small-size: 4px;
    --splitter-background: url(/img/misc/bg-hash.svg) 0 0;

    --square-bg: url(/img/misc/square-bg.png); /*dont use for canvas due to flicker when zoom */

    --scrollbar-color: #ffffff20;
    --scrollbar-color-hover: #ffffff30;

    --invert-bg:#fefefe;
    --invert-text:#000;
}

:root.iron {
    --text-opaque: #fff;
    --text-dim: rgba(255, 255, 255, 0.6);
    --text-color: rgba(255, 255, 255, 0.9);

    --body-color: #333;
    --page-color: #484848;
    --flatbox-color: #313131;

    --workspace-color: #282828;
    --menu-color: #3d3d3d;
    --panel-color: #4c4c4c;
    --group-color: #484848;
    --title-color: #434343;

    --component-color: #555555;
    --component-highlight: #595959;

    --component-border: rgba(255, 255, 255, 0.5);
    --component-dim: rgba(255, 255, 255, 0.1);

    --component-shade: rgba(0, 0, 0, 0.1);

    --slider-color: #868686;

    --normal-opacity: 0.7;
    --hover-opacity: 1;

    --accent-negative: #6b6b6b;

    --splitter-size: 5px;
    --splitter-small-size: 4px;
    --splitter-background: rgba(255, 255, 255, 0.04);

    --square-bg: url(/img/misc/square-bg-mid.png);

    --invert-bg:#fefefe;
    --invert-text:#000;
}

:root.steel {
    --text-opaque: #000;
    --text-dim: rgba(0, 0, 0, 0.7);
    --text-color: rgba(0, 0, 0, 0.95);

    --body-color: #e9e9e9;
    --page-color: #d3d3d3;
    --flatbox-color: #d3d3d3;

    --workspace-color: #666666;
    --menu-color: #bdbdbd;
    --panel-color: #d3d3d3;
    --title-color: #c9c9c9;
    --group-color: #00000008;

    --component-border: rgba(0, 0, 0, 0.3);
    --component-dim: rgba(0, 0, 0, 0.06);

    --component-shade: #00000008;

    --component-color: #c2c2c2;
    --component-highlight: #b3b3b3;

    --slider-color: #666666;

    --normal-opacity: 0.6;
    --hover-opacity: 1;

    --accent-negative: #d7d7d7;

    --splitter-size: 3px;
    --splitter-small-size: 2px;
    --splitter-background: rgba(255, 255, 255, 0.3);

    --square-bg: url(/img/misc/square-bg-bright.png);

    --scrollbar-color: #00000030;
    --scrollbar-color-hover: #00000050;

    --invert-bg:#444;
    --invert-text:#fff;
}

:root.light {
    --text-opaque: #000;
    --text-dim: rgba(0, 0, 0, 0.7);
    --text-color: #1e1e1e;

    --body-color: #fafafa;
    --page-color: #f2f2f2;
    --flatbox-color: #f5f5f5;

    --workspace-color: #c8c8c8;
    --menu-color: #e4e4e4;
    --panel-color: #eeeeee;
    --group-color: #f2f2f2;
    --title-color: #e0e0e0;

    --component-border: rgba(0, 0, 0, 0.3);
    --component-dim: rgba(0, 0, 0, 0.066);
    --component-shade: rgba(0, 0, 0, 0.04);

    --component-color: #dcdcdc;
    --component-highlight: #d0d0d0;

    --slider-color: #939393;

    --normal-opacity: 0.6;
    --hover-opacity: 1;

    --accent-negative: #d8d8d8;

    --splitter-size: 3px;
    --splitter-small-size: 2px;
    --splitter-background: rgba(0, 0, 0, 0.06);

    --square-bg: url(/img/misc/square-bg-light.png);

    --scrollbar-color: #00000030;
    --scrollbar-color-hover: #00000050;

    --invert-bg:#444;
    --invert-text:#fff;
}

:root.steel .ic,
:root.light .ic {
    filter: invert(1);
}

:root.ash { --accent-color: #383e42; }
:root.brown { --accent-color: #715649; }
:root.coral { --accent-color: #f3764c; }
:root.pink { --accent-color: #f17686; }
:root.rose { --accent-color: #fe5151; }
:root.red { --accent-color: #ba2b46; }
:root.plum { --accent-color: #5a354f; }
:root.maroon { --accent-color: #a82068; }
:root.purple { --accent-color: #7d4199; }
:root.lavender { --accent-color: #6d5dd2; }
:root.denim { --accent-color: #496171; }
:root.blue { --accent-color: #0099cc; }
:root.teal { --accent-color: #00a5a5; }
:root.green { --accent-color: #48b07b; }
:root.lime { --accent-color: #95c20f; }
:root.mustard { --accent-color: #cd9c00; }

/* Special theme for partner  */
:root.posori { --accent-color: #E91933; }