/* 渲染龙工具大全（pages/shaderlist.html）深色模式
   本页是 Bootstrap 5 + 少量自定义样式（外加一套静态化的 Bulma 按钮/卡片规则），
   所以这里：
   1) 在 prefers-color-scheme: dark 下启用 Bootstrap 5.3 的暗色主题变量；
   2) 把 cards.css 静态写死的 Bulma 卡片变量换成夜间取值；
   3) 补上本页写死的黑字、白卡、粉按钮、亮粉渐变块。
   亮色模式不受任何影响（全部规则都在 media query 内）。 */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bs-body-color: #d5d9e0;
        --bs-body-color-rgb: 213, 217, 224;
        --bs-body-bg: #14161a;
        --bs-body-bg-rgb: 20, 22, 26;
        --bs-emphasis-color: #f2f4f7;
        --bs-emphasis-color-rgb: 242, 244, 247;
        --bs-secondary-color: rgba(213, 217, 224, 0.72);
        --bs-secondary-color-rgb: 213, 217, 224;
        --bs-secondary-bg: #1d2126;
        --bs-secondary-bg-rgb: 29, 33, 38;
        --bs-tertiary-color: rgba(213, 217, 224, 0.55);
        --bs-tertiary-color-rgb: 213, 217, 224;
        --bs-tertiary-bg: #23272d;
        --bs-tertiary-bg-rgb: 35, 39, 45;
        --bs-border-color: rgba(255, 255, 255, 0.14);
        --bs-border-color-translucent: rgba(255, 255, 255, 0.14);
        --bs-link-color: #ff6b8a;
        --bs-link-hover-color: #ff8ea4;
        --bs-link-color-rgb: 255, 107, 138;
        --bs-link-hover-color-rgb: 255, 142, 164;
    }

    body {
        background-color: #14161a;
        color: #d5d9e0;
    }

    /* 顶部导航条 */
    #top-bar {
        color: #f2f4f7 !important;
        background-color: rgba(24, 27, 32, 0.72);
        backdrop-filter: blur(30px) saturate(160%);
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    #navbar-title,
    #pdtp h3 {
        color: #f2f4f7 !important;
    }

    .text-black {
        color: #f2f4f7 !important;
    }

    .text-black-50 {
        color: #a3abb5 !important;
    }

    .text-pink {
        color: #ff7d9c !important;
    }

    /* cards.css 把 Bulma 卡片变量静态化成了浅色值，这里在 .card 上重设 */
    .card {
        --bulma-scheme-h: 221;
        --bulma-scheme-s: 14%;
        --bulma-scheme-main: #1c1f25;
        --bulma-scheme-main-bis: #202329;
        --bulma-text: #d5d9e0;
        --bulma-text-strong: #f2f4f7;
        --bulma-text-weak: #9aa1ab;
        --bulma-border: rgba(255, 255, 255, 0.14);
        --bulma-card-color: #d5d9e0;
        --bulma-card-background-color: #1c1f25;
        --bulma-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
        background-color: #1c1f25;
        color: #d5d9e0;
    }

    .card .title {
        color: #f2f4f7 !important;
    }

    /* Bootstrap 的边框卡片：暗色下靠边框分层，阴影在深底上没有意义 */
    .row.g-0.border,
    .border.rounded-4 {
        background-color: transparent;
        box-shadow: none !important;
    }

    /* 首屏那块亮粉渐变（内联 style）在夜间是全页最亮的地方，
       白字压在上面只有 2.6:1，夜间压成暗色一档 */
    [style*="linear-gradient"] {
        background: linear-gradient(120deg, #8a2f52 0, #6b4a5b 110%) !important;
    }

    /* 「主页」按钮 / 各种玫红按钮：原色是 70% 亮度的亮粉，夜间换成深玫红 */
    .button.is-danger,
    .button.has-background-danger,
    .has-background-danger {
        --bulma-button-h: 348deg;
        --bulma-button-s: 72%;
        --bulma-button-l: 46%;
        --bulma-button-background-l: 46%;
        --bulma-button-border-l: 46%;
        background-color: #c22a4a !important;
        border-color: #c22a4a !important;
        color: #ffffff !important;
    }

    .button.is-danger:hover,
    .button.has-background-danger:hover,
    .has-background-danger:hover {
        background-color: #d63a5c !important;
        border-color: #d63a5c !important;
        color: #ffffff !important;
    }

    .button.is-outlined {
        --bulma-button-s: 90%;
        --bulma-button-l: 66%;
        background-color: transparent !important;
        color: #ff8299 !important;
        border-color: #ff8299 !important;
    }

    .btn-pink {
        background-color: #c22a4a !important;
        color: #ffffff !important;
        border: none;
    }

    #footer {
        color: #9ba3ad;
    }
}