/* ====== MiuOne — theme ====== */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--c-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--c-scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--c-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-scrollbar-thumb-hover);
}

:root {
    color-scheme: light;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --c-scrollbar-track: #eceef2;
    --c-scrollbar-thumb: #b8bcc4;
    --c-scrollbar-thumb-hover: #9ca3af;

    --c-bg: #f4f6fa;
    --c-bg-top: #fafbfc;
    --c-bg-bottom: #e9edf3;
    --c-bg-soft: #ffffff;
    --c-bg-elev: #ffffff;
    --c-bg-glass: rgba(255, 255, 255, 0.88);
    --c-surface-blur: 14px;
    --c-surface-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);

    --c-text: #111111;
    --c-text-mut: #6b7280;
    --c-text-soft: #9ca3af;
    --c-text-faint: #d1d5db;

    --c-border: rgba(15, 23, 42, 0.08);
    --c-border-soft: rgba(15, 23, 42, 0.05);
    --c-border-strong: rgba(15, 23, 42, 0.13);

    --c-primary: #111111;
    --c-primary-hover: #333333;
    --c-on-primary: #ffffff;

    --c-accent: #0094f6;
    --c-accent-soft: rgba(0, 148, 246, 0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --c-scrollbar-track: #14161c;
    --c-scrollbar-thumb: #3a3f4a;
    --c-scrollbar-thumb-hover: #525863;

    --c-bg: #06080e;
    --c-bg-top: #0a0d14;
    --c-bg-bottom: #04060c;
    --c-bg-soft: rgba(14, 18, 28, 0.6);
    --c-bg-elev: rgba(12, 16, 26, 0.92);
    --c-bg-glass: rgba(10, 14, 24, 0.9);
    --c-surface-blur: 16px;
    --c-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    --c-text: #ededed;
    --c-text-mut: #8d92a0;
    --c-text-soft: #6b6f7a;
    --c-text-faint: #494e58;

    --c-border: rgba(70, 130, 220, 0.12);
    --c-border-soft: rgba(50, 100, 180, 0.08);
    --c-border-strong: rgba(100, 165, 255, 0.22);

    --c-primary: #ffffff;
    --c-primary-hover: #dadada;
    --c-on-primary: #111111;

    --c-accent: #2ea7ff;
    --c-accent-soft: rgba(46, 167, 255, 0.1);
}

html, body {
    background: linear-gradient(180deg, var(--c-bg-top) 0%, var(--c-bg) 45%, var(--c-bg-bottom) 100%);
    background-attachment: fixed;
    color: var(--c-text);
}

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-elev);
    color: var(--c-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
    padding: 0;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-border-strong);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
}

.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }

:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

:root[data-theme="dark"] .nav-brand img {
    filter: invert(1) hue-rotate(180deg);
}