/*!
 * Shibuya OS — Tokens.css
 * 设计令牌基座：液态玻璃材质配方 + 明暗双主题 + 四色 accent + 平台 md-* 令牌桥接。
 * 加载顺序：平台 CSS(_.css/_material.css) 之后、其余 Shibuya CSS 之前。
 */

:root {
    /* ---- 字体 ---- */
    --sb-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
               "Segoe UI", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --sb-font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

    /* ---- 圆角 ---- */
    --sb-r-window: 14px;    /* 窗口 */
    --sb-r-panel: 16px;     /* 大面板/开始菜单 */
    --sb-r-card: 12px;      /* 卡片 */
    --sb-r-ctrl: 9px;       /* 按钮/输入框 */
    --sb-r-menu: 12px;      /* 菜单 */
    --sb-r-pill: 999px;

    /* ---- 动效 ---- */
    --sb-spring: cubic-bezier(.32, .72, .28, 1.06);
    --sb-ease: cubic-bezier(.4, 0, .2, 1);
    --sb-out: cubic-bezier(0, 0, .2, 1);
    --sb-t-fast: .14s;
    --sb-t: .24s;
    --sb-t-slow: .38s;

    /* ---- 玻璃（半径直接决定 GPU 合成成本，HiDPI 上尤甚，克制为上） ---- */
    --sb-blur: 16px;
    --sb-backdrop: blur(var(--sb-blur)) saturate(1.5);
    --sb-backdrop-heavy: blur(calc(var(--sb-blur) + 6px)) saturate(1.6);

    /* ---- 层级 ---- */
    --sb-z-desktop: 1;
    --sb-z-window: 100;      /* 100~899 窗口区间，由 JS 动态分配 */
    --sb-z-taskbar: 1000;
    --sb-z-flyout: 1100;
    --sb-z-menu: 1200;
    --sb-z-toast: 1300;
    --sb-z-boot: 2000;
}

/* ================= Accent（四色主题） ================= */
:root, :root[data-accent="blue"] {
    --sb-accent: #0a84ff;
    --sb-accent-strong: #0060df;
    --sb-accent-soft: rgba(10, 132, 255, .14);
    --sb-accent-rgb: 10, 132, 255;
    --sb-accent-2: #bf5af2;      /* 渐变副色 */
}
:root[data-accent="violet"] {
    --sb-accent: #a457f0;
    --sb-accent-strong: #8e30e6;
    --sb-accent-soft: rgba(164, 87, 240, .14);
    --sb-accent-rgb: 164, 87, 240;
    --sb-accent-2: #587bf0;
}
:root[data-accent="pink"] {
    --sb-accent: #ff375f;
    --sb-accent-strong: #e01e46;
    --sb-accent-soft: rgba(255, 55, 95, .13);
    --sb-accent-rgb: 255, 55, 95;
    --sb-accent-2: #ff9f0a;
}
:root[data-accent="teal"] {
    --sb-accent: #12a5b8;
    --sb-accent-strong: #0b7f92;
    --sb-accent-soft: rgba(18, 165, 184, .14);
    --sb-accent-rgb: 18, 165, 184;
    --sb-accent-2: #30d158;
}
:root[data-theme="dark"][data-accent="blue"], :root[data-theme="dark"] {
    --sb-accent-dark-boost: 1;
}
:root[data-theme="dark"] { --sb-accent-soft: rgba(var(--sb-accent-rgb), .22); }

/* ================= 白天 ================= */
:root, :root[data-theme="light"] {
    --sb-desktop-tint: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(190,210,255,.10) 100%);

    /* 文字 */
    --sb-text: #17233b;
    --sb-text-2: rgba(23, 35, 59, .66);
    --sb-text-3: rgba(23, 35, 59, .42);
    --sb-text-invert: #fff;
    --sb-link: var(--sb-accent-strong);

    /* 玻璃表面（窗口/任务栏/菜单三档透明度） */
    --sb-glass: rgba(255, 255, 255, .62);
    --sb-glass-heavy: rgba(250, 252, 255, .78);
    --sb-glass-menu: rgba(255, 255, 255, .74);
    --sb-glass-press: rgba(255, 255, 255, .5);
    --sb-glass-flat: rgba(250, 252, 255, .9);        /* 非活动窗口/降载态的近实色 */
    --sb-surface: rgba(255, 255, 255, .58);          /* 窗口内卡片 */
    --sb-surface-2: rgba(255, 255, 255, .82);
    --sb-surface-solid: #f7f9fe;
    --sb-field: rgba(255, 255, 255, .66);
    --sb-field-focus: rgba(255, 255, 255, .92);
    --sb-hover: rgba(20, 40, 90, .06);
    --sb-active: rgba(20, 40, 90, .1);
    --sb-divider: rgba(23, 35, 59, .1);
    --sb-outline: rgba(23, 35, 59, .16);

    /* 玻璃描边与高光（液态玻璃的灵魂） */
    --sb-edge: rgba(255, 255, 255, .62);
    --sb-edge-outer: rgba(120, 140, 180, .28);
    --sb-specular: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .38);
    --sb-specular-soft: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22);

    /* 阴影 */
    --sb-shadow-window: 0 18px 50px -12px rgba(20, 35, 70, .3), 0 4px 16px -6px rgba(20, 35, 70, .18);
    --sb-shadow-window-blur: 0 10px 30px -12px rgba(20, 35, 70, .18);
    --sb-shadow-menu: 0 14px 40px -10px rgba(20, 35, 70, .28), 0 2px 10px -4px rgba(20, 35, 70, .14);
    --sb-shadow-card: 0 2px 10px -3px rgba(20, 35, 70, .1), 0 10px 28px -14px rgba(20, 35, 70, .14);
    --sb-shadow-taskbar: 0 -6px 30px -12px rgba(20, 35, 70, .2);
    --sb-shadow-icon: drop-shadow(0 3px 6px rgba(20, 35, 70, .35));

    /* 桌面图标文字 */
    --sb-icon-label: #fff;
    --sb-icon-label-shadow: 0 1px 3px rgba(10, 18, 38, .8), 0 0 12px rgba(10, 18, 38, .45);

    /* 状态色 */
    --sb-ok: #1f9d4d;
    --sb-ok-soft: rgba(48, 180, 100, .14);
    --sb-warn: #c77800;
    --sb-warn-soft: rgba(255, 159, 10, .16);
    --sb-danger: #e5484d;
    --sb-danger-soft: rgba(229, 72, 77, .12);
    --sb-info: #0a84ff;
    --sb-info-soft: rgba(10, 132, 255, .12);

    color-scheme: light;
}

/* ================= 黑夜（涩谷之夜） ================= */
:root[data-theme="dark"] {
    --sb-desktop-tint: linear-gradient(180deg, rgba(8, 12, 26, .06) 0%, rgba(8, 12, 26, .34) 100%);

    --sb-text: #eef2fb;
    --sb-text-2: rgba(238, 242, 251, .64);
    --sb-text-3: rgba(238, 242, 251, .4);
    --sb-text-invert: #10182c;
    --sb-link: #79b8ff;

    --sb-glass: rgba(24, 30, 50, .58);
    --sb-glass-heavy: rgba(20, 26, 44, .76);
    --sb-glass-menu: rgba(30, 37, 60, .72);
    --sb-glass-press: rgba(18, 24, 42, .52);
    --sb-glass-flat: rgba(24, 30, 50, .93);
    --sb-surface: rgba(255, 255, 255, .05);
    --sb-surface-2: rgba(255, 255, 255, .09);
    --sb-surface-solid: #171e33;
    --sb-field: rgba(255, 255, 255, .07);
    --sb-field-focus: rgba(255, 255, 255, .12);
    --sb-hover: rgba(255, 255, 255, .07);
    --sb-active: rgba(255, 255, 255, .12);
    --sb-divider: rgba(238, 242, 251, .1);
    --sb-outline: rgba(238, 242, 251, .18);

    --sb-edge: rgba(255, 255, 255, .16);
    --sb-edge-outer: rgba(0, 0, 0, .5);
    --sb-specular: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08);
    --sb-specular-soft: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05);

    --sb-shadow-window: 0 24px 60px -14px rgba(0, 0, 0, .66), 0 6px 20px -8px rgba(0, 0, 0, .5);
    --sb-shadow-window-blur: 0 12px 34px -14px rgba(0, 0, 0, .5);
    --sb-shadow-menu: 0 16px 44px -10px rgba(0, 0, 0, .6), 0 3px 12px -4px rgba(0, 0, 0, .44);
    --sb-shadow-card: 0 2px 12px -4px rgba(0, 0, 0, .34), 0 12px 30px -16px rgba(0, 0, 0, .4);
    --sb-shadow-taskbar: 0 -8px 34px -12px rgba(0, 0, 0, .55);
    --sb-shadow-icon: drop-shadow(0 3px 8px rgba(0, 0, 0, .6));

    --sb-icon-label: #f2f5ff;
    --sb-icon-label-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .55);

    --sb-ok: #32d074;
    --sb-ok-soft: rgba(50, 208, 116, .16);
    --sb-warn: #ffb340;
    --sb-warn-soft: rgba(255, 179, 64, .15);
    --sb-danger: #ff6369;
    --sb-danger-soft: rgba(255, 99, 105, .16);
    --sb-info: #6cb8ff;
    --sb-info-soft: rgba(108, 184, 255, .14);

    color-scheme: dark;
}

/* ================= 平台 md-* 令牌桥接 =================
   bootstrap-table / layer / layui / toastr 等平台组件由 md-components.css
   按 --md-* 渲染；此处把它们对齐到涩谷的玻璃语言（覆盖 _material.css，需后加载）。 */
:root[data-theme="light"] {
    --md-font: var(--sb-font);
    --md-radius: var(--sb-r-ctrl);
    --md-radius-lg: var(--sb-r-card);
    --md-primary: var(--sb-accent);
    --md-primary-hover: var(--sb-accent-strong);
    --md-primary-container: rgba(var(--sb-accent-rgb), .12);
    --md-primary-rgb: var(--sb-accent-rgb);
    --md-bg: transparent;
    --md-surface: var(--sb-surface-2);
    --md-surface-2: #ffffff;
    --md-on-surface: var(--sb-text);
    --md-on-surface-med: var(--sb-text-2);
    --md-on-surface-dis: var(--sb-text-3);
    --md-divider: var(--sb-divider);
    --md-outline: var(--sb-outline);
    --md-hover-overlay: var(--sb-hover);
    --md-selected-overlay: var(--sb-accent-soft);
    --md-focus-ring: rgba(var(--sb-accent-rgb), .4);
    --md-success: var(--sb-ok);
    --md-warning: var(--sb-warn);
    --md-error: var(--sb-danger);
    --md-info: var(--sb-info);
}
:root[data-theme="dark"] {
    --md-font: var(--sb-font);
    --md-radius: var(--sb-r-ctrl);
    --md-radius-lg: var(--sb-r-card);
    --md-primary: #7cb8ff;
    --md-primary-hover: #a3ceff;
    --md-primary-container: rgba(var(--sb-accent-rgb), .26);
    --md-primary-rgb: var(--sb-accent-rgb);
    --md-bg: transparent;
    --md-surface: #1d2540;
    --md-surface-2: #232c4a;
    --md-on-surface: var(--sb-text);
    --md-on-surface-med: var(--sb-text-2);
    --md-on-surface-dis: var(--sb-text-3);
    --md-divider: var(--sb-divider);
    --md-outline: var(--sb-outline);
    --md-hover-overlay: var(--sb-hover);
    --md-selected-overlay: var(--sb-accent-soft);
    --md-focus-ring: rgba(var(--sb-accent-rgb), .45);
    --md-success: var(--sb-ok);
    --md-warning: var(--sb-warn);
    --md-error: var(--sb-danger);
    --md-info: var(--sb-info);
}

/* ================= 基础重置 ================= */
html.sb-root {
    font-family: var(--sb-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html.sb-root body {
    margin: 0;
    font-family: var(--sb-font);
    color: var(--sb-text);
    overscroll-behavior: none;
}
html.sb-root ::selection { background: rgba(var(--sb-accent-rgb), .28); }
html.sb-root :focus { outline: none; }
html.sb-root :focus-visible {
    outline: 2px solid rgba(var(--sb-accent-rgb), .8);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 输入类控件自带焦点环（边框+光晕），再套一层全局描边会变成难看的双圈 */
html.sb-root input:focus-visible,
html.sb-root textarea:focus-visible,
html.sb-root select:focus-visible { outline: none; }

/* 玻璃滚动条 */
html.sb-root ::-webkit-scrollbar { width: 10px; height: 10px; }
html.sb-root ::-webkit-scrollbar-track { background: transparent; }
html.sb-root ::-webkit-scrollbar-thumb {
    background: rgba(127, 137, 168, .38);
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}
html.sb-root ::-webkit-scrollbar-thumb:hover { background-color: rgba(127, 137, 168, .62); background-clip: padding-box; }
html.sb-root ::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    html.sb-root *, html.sb-root *::before, html.sb-root *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ================= 性能模式 =================
   backdrop 模糊是全主题最大的 GPU 开销：只要页面上有任何持续动画
   （插件的音乐可视化、桌宠等），每一帧都要把模糊面重算一遍，高刷屏更甚。
   三种情况一刀切关掉它：
     [data-sb-glass="off"] 用户/站点主动关闭
     [data-sb-idle="1"]    桌面空闲(无操作)自动降载，有操作立即恢复
   表面转近实色，观感依旧干净，合成成本骤降。 */
:root[data-sb-glass="off"] *,
:root[data-sb-glass="off"] *::before,
:root[data-sb-glass="off"] *::after,
:root[data-sb-glass="off"] ::backdrop,
:root[data-sb-idle="1"] *,
:root[data-sb-idle="1"] *::before,
:root[data-sb-idle="1"] *::after,
:root[data-sb-idle="1"] ::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
:root[data-sb-glass="off"], :root[data-sb-idle="1"] {
    --sb-glass: rgba(255, 255, 255, .93);
    --sb-glass-heavy: rgba(252, 253, 255, .96);
    --sb-glass-menu: rgba(255, 255, 255, .97);
    --sb-glass-press: rgba(248, 250, 254, .9);
}
:root[data-sb-glass="off"][data-theme="dark"],
:root[data-sb-idle="1"][data-theme="dark"] {
    --sb-glass: rgba(26, 32, 52, .95);
    --sb-glass-heavy: rgba(22, 28, 46, .97);
    --sb-glass-menu: rgba(30, 37, 60, .97);
    --sb-glass-press: rgba(20, 26, 44, .93);
}
/* 空闲恢复时给个短过渡，避免突兀跳变 */
:root .sb-window, :root .sb-taskbar { transition-property: background-color, box-shadow, border-radius, opacity; }