/* Theme Variables - Nord Color Palette */
/* https://www.nordtheme.com/ */

:root {
    /* Nord Light (Snow Storm background) */
    --bg-color: #eceff4; /* nord6 */
    --bg-float: #e5e9f0; /* nord5 */
    --text-color: #2e3440; /* nord0 */
    --text-secondary: #4c566a; /* nord3 */
    --border-color: #d8dee9; /* nord4 */
    --code-bg: #e5e9f0; /* nord5 */
    --link-color: #5e81ac; /* nord10 */
    --content-width: 800px;

    /* Accent colors (Aurora + Frost) */
    --red: #bf616a; /* nord11 */
    --orange: #d08770; /* nord12 */
    --yellow: #ebcb8b; /* nord13 */
    --green: #a3be8c; /* nord14 */
    --cyan: #88c0d0; /* nord8 */
    --blue: #5e81ac; /* nord10 */
    --magenta: #b48ead; /* nord15 */
}

[data-theme="dark"] {
    /* Nord Dark (Polar Night background) */
    --bg-color: #2e3440; /* nord0 */
    --bg-float: #3b4252; /* nord1 */
    --text-color: #eceff4; /* nord6 */
    --text-secondary: #d8dee9; /* nord4 */
    --border-color: #4c566a; /* nord3 */
    --code-bg: #2e3440; /* nord1 */
    --link-color: #88c0d0; /* nord8 */

    /* Accent colors (Aurora + Frost) */
    --red: #bf616a; /* nord11 */
    --orange: #d08770; /* nord12 */
    --yellow: #ebcb8b; /* nord13 */
    --green: #a3be8c; /* nord14 */
    --cyan: #88c0d0; /* nord8 */
    --blue: #81a1c1; /* nord9 */
    --magenta: #b48ead; /* nord15 */
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #eceff4;
}

/* Icon buttons for theme toggle */
.icon-button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-color);
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background-color: var(--code-bg);
}

.icon-button img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%);
    opacity: 0.8;
}

[data-theme="dark"] .icon-button img {
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.9;
}

.theme-icon {
    display: none;
}

[data-theme="light"] .sun-icon,
[data-theme="dark"] .moon-icon {
    display: block;
}