/* Solarized Theme - Light and Dark modes */

:root {
    /* Solarized base colors */
    --sol-base03: #002b36;  /* darkest background */
    --sol-base02: #073642;  /* dark background highlights */
    --sol-base01: #586e75;  /* dark secondary content */
    --sol-base00: #657b83;  /* dark body text */
    --sol-base0: #839496;   /* light body text */
    --sol-base1: #93a1a1;   /* light secondary content */
    --sol-base2: #eee8d5;   /* light background highlights */
    --sol-base3: #fdf6e3;   /* lightest background */

    /* Solarized accent colors */
    --sol-yellow: #b58900;
    --sol-orange: #cb4b16;
    --sol-red: #dc322f;
    --sol-magenta: #d33682;
    --sol-violet: #6c71c4;
    --sol-blue: #268bd2;
    --sol-cyan: #2aa198;
    --sol-green: #859900;

    /* Accent colors don't need to be different between light and dark mode – that's the beauty of the Solarized palette! */
    --link-color: var(--sol-blue);
    --link-hover-color: var(--sol-cyan);
}

/* Light mode - default and explicit override */
:root,
.light-mode {
    --bg-color: var(--sol-base3);
    --bg-color-alt: var(--sol-base2);
    --text-color: var(--sol-base00);
    --text-color-secondary: var(--sol-base01);
    --text-color-muted: var(--sol-base1);
    --border-color: var(--sol-base2);
    --border-color-light: var(--sol-base2);
    --code-bg: var(--sol-base2);
    --pre-bg: var(--sol-base2);

    --frame-top-bottom: var(--sol-base01);
    --frame-sides: var(--sol-base02);
    --frame-passe-partout: #fff;

    /* Navigation colors */
    --nav-bg-color: var(--sol-base2);
    --nav-text-color: var(--sol-base01);
    --nav-hover-bg-color: var(--sol-base3);
}

/* Dark mode - auto based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --bg-color: var(--sol-base03);
        --bg-color-alt: var(--sol-base02);
        --text-color: var(--sol-base0);
        --text-color-secondary: var(--sol-base1);
        --text-color-muted: var(--sol-base01);
        --border-color: var(--sol-base02);
        --border-color-light: var(--sol-base02);
        --code-bg: var(--sol-base02);
        --pre-bg: var(--sol-base02);

        --frame-top-bottom: var(--sol-base00);
        --frame-sides: var(--sol-base0);
        --frame-passe-partout: var(--sol-base03);

        /* Navigation colors */
        --nav-bg-color: var(--sol-base02);
        --nav-text-color: var(--sol-base1);
        --nav-hover-bg-color: var(--sol-base03);
    }
}

/* Manual dark mode - overrides auto mode and light mode
   We need to repeat the definitions here, CSS doesn't have a way to prevent this repetition. */
.dark-mode {
    --bg-color: var(--sol-base03);
    --bg-color-alt: var(--sol-base02);
    --text-color: var(--sol-base0);
    --text-color-secondary: var(--sol-base1);
    --text-color-muted: var(--sol-base01);
    --border-color: var(--sol-base02);
    --border-color-light: var(--sol-base02);
    --code-bg: var(--sol-base02);
    --pre-bg: var(--sol-base02);

    --frame-top-bottom: var(--sol-base00);
    --frame-sides: var(--sol-base0);
    --frame-passe-partout: var(--sol-base03);

    /* Navigation colors */
    --nav-bg-color: var(--sol-base02);
    --nav-text-color: var(--sol-base1);
    --nav-hover-bg-color: var(--sol-base03);
}

/* Apply theme colors */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

/* Subtitle and secondary text */
.subtitle {
    color: var(--text-color-secondary);
}

.post-date {
    color: var(--text-color-muted);
}

footer {
    color: var(--text-color-muted);
    border-top-color: var(--border-color-light);
}

/* Links */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

nav a {
    color: var(--text-color-secondary);
}

nav a:hover {
    color: var(--text-color);
}

article h3 a {
    color: var(--text-color);
}

article h3 a:hover {
    color: var(--link-color);
}

/* Code blocks */
code {
    background-color: var(--code-bg);
    color: var(--text-color);
}

pre {
    background-color: var(--pre-bg);
    border-color: var(--border-color);
}

/* Blockquotes */
blockquote {
    color: var(--text-color-secondary);
    border-left-color: var(--border-color);
}

/* Borders */
header {
    border-bottom-color: var(--border-color);
}

article {
    border-bottom-color: var(--border-color-light);
}

/* Theme toggle button colors */
.theme-toggle {
    color: var(--text-color-secondary);
    border-color: var(--border-color);
}

.theme-toggle:hover {
    color: var(--text-color);
    background-color: var(--bg-color-alt);
    border-color: var(--text-color-secondary);
}