:root[data-theme="dark"] {
    color-scheme: dark;
    color: #e4e4e7;
    background: #050505;

    --color-ink: #f4f4f5;
    --color-muted: #a1a1aa;
    --color-border: #292929;
    --color-accent: #c2410c;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #050505;
}

html[data-theme="dark"] .site-header {
    background: rgb(5 5 5 / 92%);
}

html[data-theme="dark"] .theme-toggle {
    border-color: #3f3f46;
    background: #27272a;
    color: #f4f4f5;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: #3f3f46;
    color: #ffffff;
}

html[data-theme="dark"] .theme-toggle-thumb {
    background: #18181b;
    transform: translateX(1.375rem);
}

html[data-theme="dark"] .theme-toggle-thumb .icon-moon {
    color: #e4e4e7;
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="dark"] .theme-toggle-thumb .icon-sun {
    opacity: 0;
    transform: rotate(35deg) scale(0.7);
}

html[data-theme="dark"] .language-menu summary {
    border-color: #292929;
    background: #0d0d0d;
    color: #d4d4d8;
}

html[data-theme="dark"] .language-menu summary:hover {
    background: #171717;
    color: #fafafa;
}

html[data-theme="dark"] .language-options {
    border-color: #292929;
    background: #0d0d0d;
    box-shadow: 0 8px 20px rgb(0 0 0 / 24%);
}

html[data-theme="dark"] .language-options button {
    color: #d4d4d8;
}

html[data-theme="dark"] .language-options button:hover,
html[data-theme="dark"] .language-options button[aria-pressed="true"] {
    background: #171717;
    color: #fafafa;
}

html[data-theme="dark"] .social-link:not(.social-link--featured) {
    border-color: #292929;
    background: #0d0d0d;
}

html[data-theme="dark"] a.social-link:not(.social-link--featured):hover,
html[data-theme="dark"] button.social-link--copy:hover {
    border-color: #525252;
    background: #171717;
}

html[data-theme="dark"] .social-link--featured::before {
    background: rgb(255 255 255 / 24%);
}

html[data-theme="dark"] .social-link--featured,
html[data-theme="dark"] .social-link--featured .link-arrow {
    color: #000000;
}

html[data-theme="dark"] a.social-link--featured:hover::before {
    background: rgb(255 255 255 / 32%);
}

html[data-theme="dark"] .page-footer {
    color: #737373;
}