/* 砂狼白子（shiroko）：阿拜多斯学园的灰蓝／银白配色。
   只覆盖令牌与外观层面的组件微调，不改任何布局。

   素材（static/images/themes/shiroko/）：
   - chibi/*.webp       Q 版人物（wave/cheer/think/doze），以用户立绘为参考图生成 + 抠白底
   - hero-fade.webp     用户提供的立绘（16% 透明，贴右下角当整页装饰）
   - pattern.svg / pattern-dark.svg   雪花 + 光环 + 圆环点簇的平铺纹样
   来源、提示词与抠图参数见 docs/theme-shiroko.md。 */
html[data-theme-style="shiroko"] {
    --tb-bg: #edf2f8;
    --tb-surface: #ffffff;
    --tb-surface-2: #e5ecf5;
    --tb-surface-hover: #eaf1f9;
    --tb-navbar: #edf2f8;
    --tb-border: #d6e0ec;

    --tb-text: #222d3b;
    --tb-text-secondary: #51607a;
    --tb-text-muted: #8794a7;

    --tb-primary: #4a7fc1;
    --tb-primary-weak: rgba(74, 127, 193, 0.11);

    --tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 12px 28px -18px rgba(38, 56, 82, 0.24);
    --tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 18px 40px -20px rgba(38, 56, 82, 0.32);

    /* 整页底色用极浅的竖向渐变（纯 CSS）：比图片稳，不会有 cover 缩放差异 */
    --tb-page-image: linear-gradient(180deg, #f8fbfe 0%, #edf3f9 58%, #e2ecf6 100%);
    --tb-page-pattern: url("/static/images/themes/shiroko/pattern.svg");
    --tb-page-pattern-size: 320px 320px;

    /* 装饰层：左右各两个（上一下一），立绘在右下当背景水印。
       顶部用固定 92px 而不是百分比：顶栏高 80px，百分比会随视口高度浮动、把头顶压进顶栏。 */
    --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
        url("/static/images/themes/shiroko/chibi/sit.webp"),
        url("/static/images/themes/shiroko/chibi/wave.webp"),
        url("/static/images/themes/shiroko/chibi/cheer.webp"),
        none,
        none;
    --tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto, auto;
    --tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px,
        right 2% top 96px, left top, left top;
}

html[data-theme="dark"][data-theme-style="shiroko"] {
    --tb-bg: #141a22;
    --tb-surface: #1d2530;
    --tb-surface-2: #273140;
    --tb-surface-hover: rgba(111, 163, 224, 0.12);
    --tb-navbar: #141a22;
    --tb-border: #334052;

    --tb-text: #e3eaf4;
    --tb-text-secondary: #a6b4c8;
    --tb-text-muted: #77869b;

    --tb-primary: #6fa3e0;
    --tb-primary-weak: rgba(111, 163, 224, 0.16);

    --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58);
    --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);

    --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
    --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg");
    --tb-page-pattern-size: 320px 320px;

    /* 深色下浅色线稿会糊成灰块，装饰层整体关掉，只留底色与浅色图案 */
    --tb-deco: none, none, none, none, none, none;
    --tb-deco-size: auto, auto, auto, auto, auto, auto;
    --tb-deco-position: left top, left top, left top, left top, left top, left top;
}

/* 高屏才放中间两个：矮屏（1366×768 等）立绘从 348px 起，中间位会和它重叠。
   门槛按「真实视口」定：1080p 全屏的 innerHeight 约 950-990，所以写 920 而不是 1050。 */
@media (min-height: 920px) {
    html[data-theme-style="shiroko"] {
        --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
            url("/static/images/themes/shiroko/chibi/sit.webp"),
            url("/static/images/themes/shiroko/chibi/wave.webp"),
            url("/static/images/themes/shiroko/chibi/cheer.webp"),
            url("/static/images/themes/shiroko/chibi/think.webp"),
            url("/static/images/themes/shiroko/chibi/doze.webp");
        --tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto 126px, auto 126px;
        --tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px,
            right 2% top 96px, left 2.6% top 46%, right 2.6% top 46%;
    }
}

/* 窄屏：只保留立绘和一个坐姿，尺寸同步收小 */
@media (max-width: 640px) {
    html[data-theme-style="shiroko"] {
        --tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
            url("/static/images/themes/shiroko/chibi/sit.webp"), none, none, none, none;
        --tb-deco-size: auto 300px, auto 130px, auto, auto, auto, auto;
        --tb-deco-position: right 2% bottom 0, left 1% bottom 0, left top, left top, left top,
            left top;
        --tb-page-pattern-size: 240px 240px;
    }
}

/* 组件微调（仅外观） */

/* 顶栏融进页面底色后，UIkit 默认的 #999 在灰蓝底上偏淡，提到次要文字色 */
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
    color: var(--tb-text-secondary);
}
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a:hover {
    color: var(--tb-primary);
}