:root {
    --color-bg: ;
    --color-bg-offset: ;
    --color-text: ;
    --color-text-offset: ;
    --color-border: ;
    --color-primary: ;
    --color-primary-offset: ;
    --color-secondary: ;
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-bg: ;
    --color-bg-offset: ;
    --color-text: ;
    --color-text-offset: ;
    --color-border: ;
    --color-primary: ;
    --color-primary-offset: ;
    --color-secondary: ;
    }
}


[data-theme='sakura-blossom'] {
    --color-bg: #fff0f5;
    --color-bg-offset: #ffe8f0;
    --color-text: #4f1c1c;
    --color-text-offset: #6b3c3c;
    --color-border: #ffe4e1;
    --color-primary: #fda4af;
    --color-primary-offset: #ffcad4;
    --color-secondary: #fcd5ce;
}

[data-theme='autumn-leaves'] {
    --color-bg: #fff3e0;
    --color-bg-offset: #f8e5c0;
    --color-text: #3a2e39;
    --color-text-offset: #5c443b;
    --color-border: #f5deb3;
    --color-primary: #ff7f50;
    --color-primary-offset: #ffa07a;
    --color-secondary: #ffd166;
}

[data-theme='winter-chill'] {
    --color-bg: #f1faee;
    --color-bg-offset: #e3f2f7;
    --color-text: #1d3557;
    --color-text-offset: #457b9d;
    --color-border: #cdeffd;
    --color-primary: #a8dadc;
    --color-primary-offset: #d4f1f9;
    --color-secondary: #457b9d;
}

[data-theme='halloween-night'] {
    --color-bg: #1c1c1c;
    --color-bg-offset: #2b2b2b;
    --color-text: #f8f8f2;
    --color-text-offset: #c0c0c0;
    --color-border: #4b0082;
    --color-primary: #ff7518;
    --color-primary-offset: #ffa94d;
    --color-secondary: #7d5fff;
}

[data-theme='fluorescent-office'] {
    --color-bg: #f0fff0;
    --color-bg-offset: #e6ffe6;
    --color-text: #0a0a0a;
    --color-text-offset: #404040;
    --color-border: #bfbfbf;
    --color-primary: #b8f5ff;
    --color-primary-offset: #d0faff;
    --color-secondary: #fbff00;
}

[data-theme='vaporwave-dream'] {
    --color-bg: #2d1b4f;
    --color-bg-offset: #3e2a67;
    --color-text: #fefefe;
    --color-text-offset: #d5d5d5;
    --color-border: #8f00ff;
    --color-primary: #ff71ce;
    --color-primary-offset: #fb88ff;
    --color-secondary: #01cdfe;
}

[data-theme='pixel-pop'] {
    --color-bg: #1c1c1c;
    --color-bg-offset: #2a2a2a;
    --color-text: #ffffff;
    --color-text-offset: #c0c0c0;
    --color-border: #3d3d3d;
    --color-primary: #ff3860;
    --color-primary-offset: #ff79c6;
    --color-secondary: #23d160;
}

[data-theme='jungle-haze'] {
    --color-bg: #e3fdfd;
    --color-bg-offset: #cbf1f5;
    --color-text: #172121;
    --color-text-offset: #3a4f41;
    --color-border: #a6e3e9;
    --color-primary: #2ec4b6;
    --color-primary-offset: #0fa3b1;
    --color-secondary: #cbf3f0;
}

[data-theme='retro-crt'] {
    --color-bg: #000000;
    --color-bg-offset: #111111;
    --color-text: #00ff00;
    --color-text-offset: #33ff33;
    --color-border: #003300;
    --color-primary: #00ff00;
    --color-primary-offset: #66ff66;
    --color-secondary: #ff00ff;
}

[data-theme='spacepunk'] {
    --color-bg: #10002b;
    --color-bg-offset: #240046;
    --color-text: #edf2f4;
    --color-text-offset: #dee2e6;
    --color-border: #7209b7;
    --color-primary: #f72585;
    --color-primary-offset: #ff4da6;
    --color-secondary: #3a0ca3;
}

[data-theme='tokyo-night'] {
    --color-bg: #1a1b26;
    --color-bg-offset: #2f3549;
    --color-text: #c0caf5;
    --color-text-offset: #a9b1d6;
    --color-border: #1a1b26;
    --color-primary: #82aaff;
    --color-primary-offset: #7dcfff;
    --color-secondary: #ff9e64;
}

[data-theme='gruvbox-dark'] {
    --color-bg: #282828;
    --color-bg-offset: #1d2021;
    --color-text: #ebdbb2;
    --color-text-offset: #a89984;
    --color-border: #3c3836;
    --color-primary: #fabd2f;
    --color-primary-offset: #fe8019;
    --color-secondary: #83a598;
}

[data-theme='synthwave84'] {
    --color-bg: #2a2139;
    --color-bg-offset: #3b2c4a;
    --color-text: #f5f5f5;
    --color-text-offset: #ffd700;
    --color-border: #663399;
    --color-primary: #f92aad;
    --color-primary-offset: #fb94ff;
    --color-secondary: #04d9ff;
}

[data-theme='void-mage'] {
    --color-bg: #1d0633;
    --color-bg-offset: #2e1065;
    --color-text: #f3f0ff;
    --color-text-offset: #d0bfff;
    --color-border: #3c096c;
    --color-primary: #9d4edd;
    --color-primary-offset: #c77dff;
    --color-secondary: #5a189a;
}

[data-theme='hyrule-nights'] {
    --color-bg: #0b132b;
    --color-bg-offset: #1c2541;
    --color-text: #ffffff;
    --color-text-offset: #a5a58d;
    --color-border: #003f5c;
    --color-primary: #ffd700;
    --color-primary-offset: #ffe066;
    --color-secondary: #4caf50;
}

[data-theme='neo'] {
    --color-bg: #0c0c1e;
    --color-bg-offset: #1a1a2f;
    --color-text: #e0e0e0;
    --color-text-offset: #aaaaaa;
    --color-border: #303030;
    --color-primary: #ff007c;
    --color-primary-offset: #ff4da6;
    --color-secondary: #00ffe7;
}

[data-theme='lotus'] {
    --color-bg: #2a2a40;
    --color-bg-offset: #393960;
    --color-text: #ffffff;
    --color-text-offset: #bbbbbb;
    --color-border: #654ea3;
    --color-primary: #da70d6;
    --color-primary-offset: #e495e8;
    --color-secondary: #4db8ff;
}

[data-theme='peach'] {
    --color-bg: #fffaf0;
    --color-bg-offset: #fff0e6;
    --color-text: #4f4f4f;
    --color-text-offset: #888888;
    --color-border: #ffe0e0;
    --color-primary: #ffb7b2;
    --color-primary-offset: #ff9999;
    --color-secondary: #a0c4ff;
}

[data-theme='crystal'] {
    --color-bg: #caf0f8;
    --color-bg-offset: #a9d6e5;
    --color-text: #03045e;
    --color-text-offset: #0077b6;
    --color-border: #ade8f4;
    --color-primary: #90e0ef;
    --color-primary-offset: #72d3df;
    --color-secondary: #48cae4;
}

[data-theme='midnight'] {
    --color-bg: #1a1a2e;
    --color-bg-offset: #202030;
    --color-text: #ffffff;
    --color-text-offset: #a0a0a0;
    --color-border: #282c34;
    --color-primary: #0ef6cc;
    --color-primary-offset: #11a37f;
    --color-secondary: #3d348b;
}

[data-theme='arcade'] {
    --color-bg: #240046;
    --color-bg-offset: #3c096c;
    --color-text: #fff1e6;
    --color-text-offset: #ffd6ff;
    --color-border: #ffb3c1;
    --color-primary: #f72585;
    --color-primary-offset: #ff4da6;
    --color-secondary: #b5179e;
}

[data-theme='frozen'] {
    --color-bg: #edf6f9;
    --color-bg-offset: #d8f3dc;
    --color-text: #003049;
    --color-text-offset: #5c677d;
    --color-border: #e0fbfc;
    --color-primary: #a2d2ff;
    --color-primary-offset: #74c0fc;
    --color-secondary: #bde0fe;
}

[data-theme='choco'] {
    --color-bg: #55423d;
    --color-bg-offset: #41312E;
    --color-text: #fffffe;
    --color-text-offset: #ffc0ad;
    --color-border: #271c19;
    --color-primary: #f3ab87;
    --color-primary-offset: #ffc0ad;
    --color-secondary: #e78fb3;
}

[data-theme='velvet'] {
    --color-bg: #240046;
    --color-bg-offset: #3c096c;
    --color-text: #ffffff;
    --color-text-offset: #cccccc;
    --color-border: #a05edb;
    --color-primary: #c77dff;
    --color-primary-offset: #e0aaff;
    --color-secondary: #7b2cbf;
}

[data-theme='lobster'] {
    --color-bg: #fcddd4;
    --color-bg-offset: #ffb9ad;
    --color-text: #4b1313;
    --color-text-offset: #146caa;
    --color-border: #f1797c;
    --color-primary: #b62b2b;
    --color-primary-offset: #FF0030;
    --color-secondary: #fb9f13;
}

[data-theme='mint'] {
    --color-bg: #e0f7fa;
    --color-bg-offset: #ccf2f4;
    --color-text: #003049;
    --color-text-offset: #446675;
    --color-border: #caffbf;
    --color-primary: #a3f7bf;
    --color-primary-offset: #76d7a0;
    --color-secondary: #42c2ff;
}

[data-theme='monokai'] {
    --color-bg: #272822;
    --color-bg-offset: #3e3d32;
    --color-text: #f8f8f2;
    --color-text-offset: #a6e22e;
    --color-border: #75715e;
    --color-primary: #f92672;
    --color-primary-offset: #fd5a9e;
    --color-secondary: #66d9ef;
}

[data-theme='dracula'] {
    --color-bg: #282a36;
    --color-bg-offset: #383a59;
    --color-text: #f8f8f2;
    --color-text-offset: #6272a4;
    --color-border: #44475a;
    --color-primary: #ff79c6;
    --color-primary-offset: #bd93f9;
    --color-secondary: #8be9fd;
}

[data-theme='nightowl'] {
    --color-bg: #011627;
    --color-bg-offset: #102a43;
    --color-text: #d6deeb;
    --color-text-offset: #7e97ab;
    --color-border: #1d3b53;
    --color-primary: #82aaff;
    --color-primary-offset: #5f7e97;
    --color-secondary: #c792ea;
}

[data-theme='github'] {
    --color-bg: #0d1117;
    --color-bg-offset: #161b22;
    --color-text: #c9d1d9;
    --color-text-offset: #8b949e;
    --color-border: #30363d;
    --color-primary: #58a6ff;
    --color-primary-offset: #79c0ff;
    --color-secondary: #3fb950;
}

[data-theme='solarized'] {
    --color-bg: #002b36;
    --color-bg-offset: #073642;
    --color-text: #839496;
    --color-text-offset: #586e75;
    --color-border: #073642;
    --color-primary: #268bd2;
    --color-primary-offset: #6c71c4;
    --color-secondary: #2aa198;
}

[data-theme='onedark'] {
    --color-bg: #282c34;
    --color-bg-offset: #21252b;
    --color-text: #abb2bf;
    --color-text-offset: #5c6370;
    --color-border: #3e4451;
    --color-primary: #e06c75;
    --color-primary-offset: #be5046;
    --color-secondary: #61afef;
}

[data-theme='cobalt2'] {
    --color-bg: #002240;
    --color-bg-offset: #003366;
    --color-text: #ffffff;
    --color-text-offset: #4fdbff;
    --color-border: #193549;
    --color-primary: #ffc600;
    --color-primary-offset: #ffee80;
    --color-secondary: #ff628c;
}

[data-theme='material-darker'] {
    --color-bg: #1e1e2f;
    --color-bg-offset: #2c2c3c;
    --color-text: #eeeeee;
    --color-text-offset: #a6accd;
    --color-border: #2e3440;
    --color-primary: #c792ea;
    --color-primary-offset: #f07178;
    --color-secondary: #89ddff;
}

[data-theme='palenight'] {
    --color-bg: #292d3e;
    --color-bg-offset: #1c1f2b;
    --color-text: #a6accd;
    --color-text-offset: #89ddff;
    --color-border: #292d3e;
    --color-primary: #f78c6c;
    --color-primary-offset: #ffcb6b;
    --color-secondary: #c792ea;
}

[data-theme='ayu-dark'] {
    --color-bg: #0f1419;
    --color-bg-offset: #1f262d;
    --color-text: #cbccc6;
    --color-text-offset: #707a84;
    --color-border: #191f26;
    --color-primary: #ffcc66;
    --color-primary-offset: #ffd580;
    --color-secondary: #5ccfe6;
}

[data-theme='forest'] {
    --color-bg: #1f3d2e;
    --color-bg-offset: #2c4b3a;
    --color-text: #f0fff0;
    --color-text-offset: #cceccc;
    --color-border: #3b7a57;
    --color-primary: #2e8b57;
    --color-primary-offset: #3cb371;
    --color-secondary: #8fbc8f;
}

[data-theme='plasma'] {
    --color-bg: #100020;
    --color-bg-offset: #2e003e;
    --color-text: #ffffff;
    --color-text-offset: #d3bfff;
    --color-border: #56006b;
    --color-primary: #e600ff;
    --color-primary-offset: #ff3eff;
    --color-secondary: #00d4ff;
}

[data-theme='sakura'] {
    --color-bg: #fff0f5;
    --color-bg-offset: #ffe2ed;
    --color-text: #3e3e3e;
    --color-text-offset: #5a5a5a;
    --color-border: #ffe5ec;
    --color-primary: #ffb7c5;
    --color-primary-offset: #ff8fa3;
    --color-secondary: #ffc8dd;
}

[data-theme='sandstorm'] {
    --color-bg: #fffaf0;
    --color-bg-offset: #fbeed9;
    --color-text: #4e342e;
    --color-text-offset: #6d4c41;
    --color-border: #c8ad7f;
    --color-primary: #e0ac69;
    --color-primary-offset: #ffcc80;
    --color-secondary: #f4d06f;
}


/* Rainbow Road Theme Extra Styles */

[data-theme='rainbow'] body {
    background-image: url("/assets/images/stars.gif");
    text-shadow: 0 0 2px;
}
[data-theme='rainbow'] .header__verification {
    animation: rainbow 1s linear infinite;
}

/* Lobster Theme Extra Styles */

[data-theme='lobster'] {
    --font-family-display: "Lobster", cursive;
    cursor: url("/assets/images/lobster-cursor.png"), auto;
}

[data-theme='lobster'] a,
[data-theme='lobster'] button {
    cursor: url("/assets/images/lobster-cursor-hover.png"), auto;
}

/* HN Theme Extra Styles */

[data-theme='hackernews'] {
    --font-size-root: 80%;
    --content-max-width: 50rem;
    --font-family-base: Verdana, Geneva, sans-serif;
    --font-family-display: Verdana, Geneva, sans-serif;
}

[data-theme='hackernews'] .featuredpost__title::after,
[data-theme='hackernews'] .postlist__link::after,
[data-theme='hackernews'] .post__title::after,
[data-theme='hackernews'] .otherposts__title::after {
    content: " considered harmful";
}