/* shiro dark mode - loaded after style.min.css (2026-08) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-paper: #17191d;
    --color-ink: #e4e1d9;
    --color-seal: #e05256;
    --color-soft-border: rgba(228, 225, 217, 0.09);
    --color-focus-ring: rgba(228, 225, 217, 0.22);
    --color-scrollbar-track: #202328;
    --color-scrollbar-thumb: rgba(228, 225, 217, 0.28);
    --color-scrollbar-thumb-hover: rgba(228, 225, 217, 0.42);
    --color-scrollbar-border: rgba(228, 225, 217, 0.14);

    /* slate palette -> dark-adapted (drives text/borders/cards) */
    --color-slate-50: #17191d;
    --color-slate-100: #1d2025;
    --color-slate-200: #262a30;
    --color-slate-300: #3a3f47;
    --color-slate-400: #8b8f98;
    --color-slate-500: #a8acb5;
    --color-slate-600: #c2c6cd;
    --color-slate-700: #d4d7dc;
    --color-slate-800: #e2e4e8;
    --color-slate-900: #eceef1;
    --color-slate-950: #f5f6f8;

    /* typography (prose) */
    --tw-prose-body: #d6d3cb;
    --tw-prose-headings: #eceef1;
    --tw-prose-links: #e05256;
    --tw-prose-bold: #eceef1;
    --tw-prose-counters: #8b8f98;
    --tw-prose-bullets: #8b8f98;
    --tw-prose-hr: #3a3f47;
    --tw-prose-quotes: #c2c6cd;
    --tw-prose-quote-borders: #3a3f47;
    --tw-prose-code: #eceef1;
    --tw-prose-pre-code: #e4e1d9;
    --tw-prose-pre-bg: #101216;
    --tw-prose-th-borders: #3a3f47;
    --tw-prose-td-borders: #262a30;
}

/* hardcoded gradients / borders */
[data-theme="dark"] .fog-bg {
    background: radial-gradient(1200px 500px at 50% -100px, rgba(23, 25, 29, 0.9), transparent 65%),
        radial-gradient(900px 400px at 90% 10%, rgba(23, 25, 29, 0.5), transparent 55%),
        linear-gradient(#15171b 0%, #121317 55%, #15171b 100%);
}

[data-theme="dark"] .section-divider {
    border-color: rgba(228, 225, 217, 0.1);
}

[data-theme="dark"] .menu-panel ul {
    background: #202328;
}

[data-theme="dark"] .paper {
    background-color: #17191d;
}

/* transition helper */
html.theme-anim,
html.theme-anim body,
html.theme-anim .paper {
    transition: background-color 0.3s var(--ease-soft, ease), color 0.3s var(--ease-soft, ease);
}