/* ===== DARK MODE =====
   The site's components use many hardcoded colors spread across a lot of
   stylesheets, so instead of re-theming every single file we flip the whole
   page with a color-inversion filter. Elements that are already dark
   (header bar, footer, top bar) or that must keep their real colors
   (images, video, icons, svg) are inverted a second time so they end up
   looking the same as before. */

html[data-theme="dark"] {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] img,
html[data-theme="dark"] picture,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] svg,
html[data-theme="dark"] canvas,
html[data-theme="dark"] .no-invert,
html[data-theme="dark"] .logo,
html[data-theme="dark"] .footer-brand-logo {
    filter: invert(1) hue-rotate(180deg);
}

/* These sections are already dark in the normal theme, so invert them back
   a second time to keep their original look instead of turning light. */
html[data-theme="dark"] .footer,
html[data-theme="dark"] .top-bar {
    filter: invert(1) hue-rotate(180deg);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 999px);
    border: 1.5px solid var(--border, #ddd);
    background: transparent;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: #111;
    color: #111;
}
.theme-toggle .theme-toggle-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: inline-flex; }