/* themes and colour palettes */

:root {
    --clrs-none: #00000000;
    --none: #00000000;

    /* pastel */
    --palette-pastel-blue: #82aaff;
    --palette-pastel-cyan: #89ddff;
    --palette-pastel-green: #c3e88d;
    --palette-pastel-magenta: #c792ea;
    --palette-pastel-red: #f07178;
    --palette-pastel-orange: #f78c6c;
    --palette-pastel-yellow: #ffcb6b;

    /* neon */
    --palette-neon-mint: #00ff90;
    --palette-neon-green: #3cff00;

    /* basic */
    --palette-basic-red: #ff0000;
    --palette-basic-orange: #ff5e00;
    --palette-basic-yellow: #ffdd00;
    --palette-basic-green: #00ff00;
    --palette-basic-blue: #008cff;
    --palette-basic-purple: #740dce;

    /* other */

    --palette-other-darkdef-green: #57f8b8;

    /* theme changeables */

    /* theme-specific colours */
    --theme-clrs-red: #f07178;
    --theme-clrs-orange: #fc6450;
    --theme-clrs-yellow: #ffb74d;
    --theme-clrs-green: #57f8b8;
    --theme-clrs-cyan: #90caf9;
    --theme-clrs-blue: #82aaff;
    --theme-clrs-purple: #ab9cdc;
    --theme-clrs-magenta: #c792ea;

    /* theme changeables */

    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2a2a2a;
    --theme-bg-highlight: #3a3a3a;
    --theme-bg-highlight-secondary: #00000088;
    --theme-bg-under: #000000bd;

    --theme-text-primary: #b0bec5;
    --theme-text-highlight: #fff;
    --theme-text-secondary: #8a969c;
    --theme-text-link: #c792ea;
    --theme-text-link-hover: #fc6450;

    --theme-border: #333;

    --theme-scrollbar: #ffb74d var(--theme-bg-primary) !important;

    --theme-accent-primary: #ffb74d;
    --theme-accent-secondary: #57f8b8;
    --theme-accent-tertiary: #90caf9;
    --theme-accent-four: #ab9cdc;
    --theme-accent-five: #f07178;
    --theme-accent-six: var(--theme-text-primary);

    --theme-special-hover: var(--theme-clrs-yellow);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: var(--theme-accent-primary);

    --theme-alert-note: var(--palette-pastel-blue);
    --theme-alert-tip: var(--palette-pastel-green);
    --theme-alert-important: var(--palette-pastel-magenta);
    --theme-alert-warning: var(--palette-pastel-orange);
    --theme-alert-caution: var(--palette-pastel-red);

    --theme-blockquoteborder: #90caf9;

    --theme-code: #ffb74d;
    --theme-code-bg: #3a3a3a;
    --theme-table-head: var(--theme-bg-highlight);
    --theme-table-even: #1f1f1f;

    --theme-mark-text: var(--palette-neon-green);
    --theme-mark-bg: #000;

    --theme-enable-: #57f8b8;
    --theme-disable-: #f07178;

    --theme-navbar-dropdown-hover: var(--theme-accent-secondary);
    --theme-navbar-address-hover: var(--theme-accent-secondary);
    --theme-navbar-address-hover-text: #fff;
    --theme-sidebar-parent: var(--theme-accent-tertiary);
    --theme-sidebar-active: var(--theme-accent-five);
    --theme-sidebar-hover: var(--theme-accent-four);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--theme-accent-secondary),
        0 0 20px var(--theme-accent-tertiary);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--theme-accent-secondary);

    --theme-glow-button: var(--palette-neon-green);

    --theme-select-glow: 0px 0px 15px var(--theme-special-hover);
}

[class^="theme-"],
[class*=" theme-"],
[class^="theme-"],
[class*=" theme-"],
[class^="theme-"] *,
[class*=" theme-"] *,
[class^="theme-"] *,
[class*=" theme-"] * {
    /* transition: 0.5s ease; */
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
    /* transition-duration: 0.5s;    */
}

::-moz-selection {
    color: var(--theme-user-select-txt);
    background: var(--theme-user-select-bg);
}

::selection {
    color: var(--theme-user-select-txt);
    background: var(--theme-user-select-bg);
}

.theme-dark_default {
    --theme-clrs-red: #f07178;
    --theme-clrs-orange: #fc6450;
    --theme-clrs-yellow: #ffb74d;
    --theme-clrs-green: #57f8b8;
    --theme-clrs-cyan: #90caf9;
    --theme-clrs-blue: #82aaff;
    --theme-clrs-purple: #ab9cdc;
    --theme-clrs-magenta: #c792ea;

    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2a2a2a;
    --theme-bg-highlight: #3a3a3a;
    --theme-bg-highlight-secondary: #00000088;
    --theme-bg-under: #000000bd;

    --theme-text-primary: #b0bec5;
    --theme-text-highlight: #fff;
    --theme-text-secondary: #8a969c;
    --theme-text-link: #c792ea;
    --theme-text-link-hover: #fc6450;

    --theme-border: #333;

    --theme-scrollbar: #ffb74d var(--theme-bg-primary) !important;

    --theme-accent-primary: #ffb74d;
    --theme-accent-secondary: #57f8b8;
    --theme-accent-tertiary: #90caf9;
    --theme-accent-four: #ab9cdc;
    --theme-accent-five: #f07178;
    --theme-accent-six: var(--theme-text-primary);

    --theme-special-hover: var(--theme-clrs-yellow);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: var(--theme-accent-primary);

    --theme-alert-note: var(--palette-pastel-blue);
    --theme-alert-tip: var(--palette-pastel-green);
    --theme-alert-important: var(--palette-pastel-magenta);
    --theme-alert-warning: var(--palette-pastel-orange);
    --theme-alert-caution: var(--palette-pastel-red);

    --theme-blockquoteborder: #90caf9;

    --theme-code: #ffb74d;
    --theme-code-bg: #3a3a3a;
    --theme-table-head: var(--theme-bg-highlight);
    --theme-table-even: #1f1f1f;

    --theme-mark-text: var(--palette-neon-green);
    --theme-mark-bg: #000;

    --theme-enable-: #57f8b8;
    --theme-disable-: #f07178;

    --theme-navbar-dropdown-hover: var(--theme-accent-secondary);
    --theme-navbar-address-hover: var(--theme-accent-secondary);
    --theme-navbar-address-hover-text: #fff;
    --theme-sidebar-parent: var(--theme-accent-tertiary);
    --theme-sidebar-active: var(--theme-accent-five);
    --theme-sidebar-hover: var(--theme-accent-four);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--theme-accent-secondary),
        0 0 20px var(--theme-accent-tertiary);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--theme-accent-secondary);

    --theme-glow-button: var(--palette-neon-green);
}

/* based off catpuccin latte */
.theme-light_default {
    --theme-clrs-ext-rosewater: #dc8a78;
    --theme-clrs-ext-flamingo: #dd7878;
    --theme-clrs-ext-pink: #ea76cb;
    --theme-clrs-ext-mauve: #8839ef;
    --theme-clrs-ext-red: #d20f39;
    --theme-clrs-ext-maroon: #e64553;
    --theme-clrs-ext-peach: #fe640b;
    --theme-clrs-ext-yellow: #df8e1d;
    --theme-clrs-ext-green: #40a02b;
    --theme-clrs-ext-teal: #179299;
    --theme-clrs-ext-sky: #04a5e5;
    --theme-clrs-ext-sapphire: #209fb5;
    --theme-clrs-ext-blue: #1e66f5;
    --theme-clrs-ext-lavender: #7287fd;

    --theme-clrs-red: #d20f39;
    --theme-clrs-orange: #fe640b; /* peach */
    --theme-clrs-yellow: #df8e1d;
    --theme-clrs-green: #40a02b;
    --theme-clrs-cyan: #04a5e5; /* sky */
    --theme-clrs-blue: #1e66f5;
    --theme-clrs-purple: #8839ef; /* mauve */
    --theme-clrs-magenta: #ea76cb; /* pink */

    /* --theme-bg-primary: #eff1f5;
    --theme-bg-secondary: #ccd0da; */
    --theme-bg-primary: #ccd0da;
    --theme-bg-secondary: #eff1f5;
    --theme-bg-highlight: #ffffff;
    /* --theme-bg-highlight: #acb0be; */
    --theme-bg-highlight-secondary: #acb0be;
    /* --theme-bg-highlight-secondary: #8c8fa1; */
    /* --theme-bg-under: #000000bd; */
    --theme-bg-under: #ffffffbd;

    --theme-text-primary: #4c4f69;
    --theme-text-highlight: var(--theme-clrs-ext-maroon);
    --theme-text-secondary: #6c6f85;
    --theme-text-link: var(--theme-clrs-ext-blue);
    --theme-text-link-hover: var(--theme-clrs-ext-peach);

    --theme-border: #6c6f85;
    --theme-scrollbar: #ea76cb var(--theme-bg-primary) !important;

    --theme-accent-primary: var(--theme-clrs-ext-sky);
    --theme-accent-secondary: var(--theme-clrs-ext-sapphire);
    --theme-accent-tertiary: var(--theme-clrs-ext-teal);
    --theme-accent-four: var(--theme-clrs-ext-lavender);
    --theme-accent-five: var(--theme-clrs-ext-teal);
    --theme-accent-six: var(--theme-text-primary);

    --theme-special-hover: var(--theme-clrs-red);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: var(--theme-clrs-ext-maroon);

    --theme-alert-note: #1e66f5;
    --theme-alert-tip: #40a02b;
    --theme-alert-important: #8839ef;
    --theme-alert-warning: #fe640b;
    --theme-alert-caution: #d20f39;

    --theme-blockquoteborder: var(--palette-pastel-blue);

    --theme-code: #dce0e8;
    --theme-code-bg: #7c7f93;
    --theme-table-head: #ccd0da;
    --theme-table-even: #e6e9ef;

    --theme-mark-text: var(--theme-text-primary);
    --theme-mark-bg: var(--palette-basic-orange);

    --theme-enable-: var(--theme-clrs-ext-green);
    --theme-disable-: var(--theme-clrs-ext-red);

    --theme-navbar-dropdown-hover: var(--theme-clrs-ext-peach);
    --theme-navbar-address-hover: var(--theme-clrs-ext-sky);
    --theme-navbar-address-hover-text: #000;
    --theme-sidebar-parent: var(--theme-clrs-ext-teal);
    --theme-sidebar-active: var(--theme-clrs-ext-red);
    --theme-sidebar-hover: var(--theme-clrs-ext-green);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--palette-basic-yellow),
        0 0 20px var(--palette-basic-blue);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--palette-basic-yellow);

    --theme-glow-button: var(--theme-clrs-ext-pink);
}

.theme-light_alt {
    --theme-bg-primary: #fff;
    --theme-bg-secondary: #dcdcdc;
    --theme-bg-highlight: #f2f2f2;
    --theme-bg-highlight-secondary: #9e9e9e;
    --theme-bg-under: #ffffffbd;

    --theme-text-primary: #000;
    --theme-text-highlight: #000;
    --theme-text-secondary: #545454;
    --theme-text-link: var(--palette-basic-purple);
    --theme-text-link-hover: #fc6450;

    --theme-border: #939393;
    --theme-scrollbar: #ff6f30 var(--theme-bg-primary) !important;

    --theme-accent-primary: #008c74;
    --theme-accent-secondary: #ff6f30;
    --theme-accent-tertiary: #00b2a9;
    --theme-accent-four: #f9c74f;
    --theme-accent-five: var(--theme-text-primary);
    --theme-accent-six: var(--theme-text-primary);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: #ff6f30;

    --theme-alert-note: var(--palette-basic-blue);
    --theme-alert-tip: var(--palette-basic-green);
    --theme-alert-important: var(--palette-basic-purple);
    --theme-alert-warning: var(--palette-basic-orange);
    --theme-alert-caution: var(--palette-basic-red);

    --theme-blockquoteborder: var(--palette-pastel-blue);

    --theme-code: #ff007b;
    --theme-code-bg: #c5afaf;
    --theme-table-head: var(--theme-bg-highlight);
    --theme-table-even: #bfc0c4;

    --theme-mark-text: var(--theme-text-primary);
    --theme-mark-bg: var(--palette-basic-orange);

    --theme-enable-: var(--palette-basic-green);
    --theme-disable-: var(--palette-basic-red);

    --theme-navbar-dropdown-hover: var(--palette-basic-orange);
    --theme-navbar-address-hover: var(--palette-neon-mint);
    --theme-navbar-address-hover-text: #000;
    --theme-sidebar-parent: var(--theme-accent-tertiary);
    --theme-sidebar-active: var(--theme-accent-secondary);
    --theme-sidebar-hover: var(--theme-accent-tertiary);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--palette-basic-yellow),
        0 0 20px var(--palette-basic-blue);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--palette-basic-yellow);

    --theme-glow-button: #9e0059;
}

.theme-matrix {
    --theme-bg-primary: #09100a;
    --theme-bg-secondary: #0f1a12;
    --theme-bg-highlight: #283c2a;
    --theme-bg-highlight-secondary: #00000088;
    --theme-bg-under: #000000bd;

    --theme-text-primary: var(--palette-neon-green);
    --theme-text-highlight: var(--palette-neon-green);
    --theme-text-secondary: var(--palette-pastel-green);
    --theme-text-link: var(--palette-neon-green);
    --theme-text-link-hover: var(--palette-neon-green);

    --theme-border: var(--palette-neon-green);
    --theme-scrollbar: var(--palette-neon-green) var(--theme-bg-primary) !important;

    --theme-accent-primary: var(--palette-neon-green);
    --theme-accent-secondary: var(--palette-neon-green);
    --theme-accent-tertiary: var(--palette-neon-green);
    --theme-accent-four: var(--palette-neon-green);
    --theme-accent-five: var(--palette-neon-green);
    --theme-accent-six: var(--palette-neon-green);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: var(--palette-neon-green);

    --theme-alert-note: var(--palette-pastel-blue);
    --theme-alert-tip: var(--palette-pastel-green);
    --theme-alert-important: var(--palette-pastel-magenta);
    --theme-alert-warning: var(--palette-pastel-orange);
    --theme-alert-caution: var(--palette-pastel-red);

    --theme-blockquoteborder: var(--palette-pastel-green);

    --theme-code: var(--palette-neon-green);
    --theme-code-bg: #2a2a2a;
    --theme-table-head: var(--theme-bg-highlight);
    --theme-table-even: #1b261a;

    --theme-mark-text: var(--palette-neon-green);
    --theme-mark-bg: #000;

    --theme-enable-: var(--palette-neon-green);
    --theme-disable-: var(--palette-basic-red);

    --theme-navbar-dropdown-hover: var(--palette-neon-green);
    --theme-navbar-address-hover: var(--palette-neon-green);
    --theme-navbar-address-hover-text: var(--palette-neon-green);
    --theme-sidebar-parent: var(--palette-neon-green);
    --theme-sidebar-active: var(--palette-neon-green);
    --theme-sidebar-hover: var(--palette-neon-green);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--palette-neon-green),
        0 0 20px var(--palette-neon-green);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--palette-neon-green);

    --theme-glow-button: var(--palette-neon-green);
}

/* based off material ocean high contrast */
.theme-dark_alt {
    --theme-bg-primary: #090b10;
    --theme-bg-secondary: #0f111a;
    --theme-bg-highlight: #282c3c;
    --theme-bg-highlight-secondary: #00000088;
    --theme-bg-under: #000000bd;

    --theme-text-primary: #b2ccd6;
    --theme-text-highlight: #fff;
    --theme-text-secondary: #505a5e;
    --theme-text-link: var(--palette-pastel-magenta);
    --theme-text-link-hover: #fc6450;

    --theme-border: #1e212d;
    --theme-scrollbar: var(--palette-pastel-yellow) var(--theme-bg-primary) !important;

    --theme-accent-primary: var(--palette-pastel-yellow);
    --theme-accent-secondary: var(--palette-pastel-green);
    --theme-accent-tertiary: var(--palette-pastel-cyan);
    --theme-accent-four: var(--palette-pastel-magenta);
    --theme-accent-five: var(--theme-text-primary);
    --theme-accent-six: var(--theme-text-primary);

    --theme-user-select-txt: var(--theme-bg-primary);
    --theme-user-select-bg: var(--palette-pastel-yellow);

    --theme-alert-note: var(--palette-pastel-blue);
    --theme-alert-tip: var(--palette-pastel-green);
    --theme-alert-important: var(--palette-pastel-magenta);
    --theme-alert-warning: var(--palette-pastel-orange);
    --theme-alert-caution: var(--palette-pastel-red);

    --theme-blockquoteborder: var(--palette-pastel-blue);

    --theme-code: var(--palette-pastel-yellow);
    --theme-code-bg: #2a2a2a;
    --theme-table-head: var(--theme-bg-highlight);
    --theme-table-even: #1a1d26;

    --theme-mark-text: var(--palette-pastel-yellow);
    --theme-mark-bg: #000;

    --theme-enable-: var(--palette-pastel-green);
    --theme-disable-: var(--palette-pastel-red);

    --theme-navbar-dropdown-hover: var(--palette-pastel-green);
    --theme-navbar-address-hover: var(--palette-neon-mint);
    --theme-navbar-address-hover-text: #fff;
    --theme-sidebar-parent: var(--theme-accent-tertiary);
    --theme-sidebar-active: var(--palette-pastel-red);
    --theme-sidebar-hover: var(--theme-accent-secondary);

    --theme-glow-text:
        0 0 20px #fff, 0 0 40px var(--palette-basic-yellow),
        0 0 20px var(--palette-basic-blue);
    --theme-glow: 0 0 5px #fff, 0 0 40px var(--palette-basic-yellow);

    --theme-glow-button: var(--palette-neon-mint);
}