:root {
    color-scheme: dark;
}

html {
    background: #0d0d0d;
    transition: filter 0.35s ease, background-color 0.35s ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(240, 237, 230, 0.18);
    border-radius: 999px;
    background: rgba(240, 237, 230, 0.04);
    color: #F0EDE6;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease,
        background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(240, 237, 230, 0.4);
    background: rgba(240, 237, 230, 0.08);
}

.theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.theme-toggle__glyph {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    transform: translateY(-1px);
}

.theme-toggle__text {
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.theme-toggle--mobile {
    width: auto;
    min-width: 170px;
    height: 42px;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .theme-toggle--mobile {
        display: none !important;
    }
}

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

html[data-theme="light"] img,
html[data-theme="light"] picture,
html[data-theme="light"] video,
html[data-theme="light"] iframe,
html[data-theme="light"] canvas {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="light"] .portrait-img {
    filter: invert(1) hue-rotate(180deg) grayscale(1)
        brightness(1.22) contrast(0.92);
}

html[data-theme="light"] .portrait-img:hover {
    filter: invert(1) hue-rotate(180deg) grayscale(0.15)
        brightness(1.14) contrast(0.96);
}