/* Color scheme */
:root {
    --color-bg: #fff;
    --color-text: #1a1a1a;
    --color-text-secondary: #555;
    --color-text-muted: #999;
    --color-border: #e0e0e0;
    --color-link: #1a1a1a;
    --color-footer: #999;
    --bg-invert: 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #111;
        --color-text: #e5e5e5;
        --color-text-secondary: #aaa;
        --color-text-muted: #666;
        --color-border: #2a2a2a;
        --color-link: #e5e5e5;
        --color-footer: #666;
        --bg-invert: 1;
    }
}

[data-theme="dark"] {
    --color-bg: #111;
    --color-text: #e5e5e5;
    --color-text-secondary: #aaa;
    --color-text-muted: #666;
    --color-border: #2a2a2a;
    --color-link: #e5e5e5;
    --color-footer: #666;
    --bg-invert: 1;
}

/* Theme toggle */
.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    margin-left: 16px;
}

.theme-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* Logo */
.logo-mark {
    height: 36px;
    width: auto;
}

.logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-light { display: none; }
    :root:not([data-theme="light"]) .logo-dark { display: block; }
}

[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }