:root {
    --color-bg: #ffffff;
    --color-bg-offset: #f7f7f9;
    --color-text: #373a3c;
    --color-text-offset: #818a91;
    --color-border: #eceeef;
    --color-primary: #ff335f;
    --color-primary-offset: #ff1447;
    --color-secondary: #43a9a3;
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-bg: #0e141b;
    --color-bg-offset: #252526;
    --color-text: #ffffff;
    --color-text-offset: #818a91;
    --color-border: #2d2d2d;
    --color-primary: #ff5277;
    --color-primary-offset: #ff2957;
    --color-secondary: #43a9a3;
    }
}


[data-theme='default'] {
    --color-bg: #ffffff;
    --color-bg-offset: #f7f7f9;
    --color-text: #373a3c;
    --color-text-offset: #818a91;
    --color-border: #eceeef;
    --color-primary: #ff335f;
    --color-primary-offset: #ff1447;
    --color-secondary: #43a9a3;
}

[data-theme='dark'] {
    --color-bg: #0e141b;
    --color-bg-offset: #252526;
    --color-text: #ffffff;
    --color-text-offset: #818a91;
    --color-border: #2d2d2d;
    --color-primary: #ff5277;
    --color-primary-offset: #ff2957;
    --color-secondary: #43a9a3;
}

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

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

[data-theme='gruvbox'] {
    --color-bg: #ebdbb2;
    --color-bg-offset: #d5c4a1;
    --color-text: #282828;
    --color-text-offset: #928374;
    --color-border: #282828;
    --color-primary: #fabd2f;
    --color-primary-offset: #fabd2f;
    --color-secondary: #fe8019;
}

[data-theme='onedark'] {
    --color-bg: #282c34;
    --color-bg-offset: ;
    --color-text: #abb2bf;
    --color-text-offset: ;
    --color-border: #282c34;
    --color-primary: #61afef;
    --color-primary-offset: ;
    --color-secondary: #98c379;
}

[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='hackernews'] {
    --color-bg: #F6F6EF;
    --color-bg-offset: #F8F8EC;
    --color-text: #000000;
    --color-text-offset: #828282;
    --color-border: #FF6600;
    --color-primary: #FF6600;
    --color-primary-offset: #F56200;
    --color-secondary: #FF6600;
}


/* 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";
}