/* tokens.css - 全站设计变量
   index / login / admin 三个页面共用，并且必须排在各页样式表之前加载。
   颜色、字体、圆角、阴影、动效、外壳尺寸都只在这里定义一次；
   style.css / login.css / admin.css / alert.css 只消费这些变量，不再各自写一份 :root。
   admin.html 不写 data-theme，所以后台始终是浅色；深色主题只作用于主站和登录页 */

:root {
    color-scheme: light;

    /* ---- 品牌色 ----
       取自 gk.ico 的等距立体 G：顶面亮青 → 正面钴蓝 → 侧面深钴。全站只用这一个色相，不混紫色 */
    --accent-primary: #2557f5;
    --accent-primary-hover: #1e47d9;
    --accent-primary-active: #1636b8;
    --accent-primary-light: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    --accent-cyan: #38b6ff;
    --accent-deep: #1b33c4;
    --accent-secondary: var(--accent-cyan);
    --primary-color: var(--accent-primary);
    --primary-18: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    /* 主按钮：三段渐变对应 logo 的三个面 */
    --accent-gradient: linear-gradient(160deg, color-mix(in srgb, var(--accent-cyan) 70%, var(--accent-primary)) 0%, var(--accent-primary) 46%, var(--accent-deep) 100%);

    /* ---- 状态色 ----
       浅色底上用深一档（600 色阶），文字和图标的对比度才够；深色主题在下面换回亮一档 */
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --accent-danger-hover: #b91c1c;
    --accent-danger-active: #991b1b;
    --success-text: #047857;
    --danger-text: #b91c1c;
    --accent-success-bg: rgba(16, 185, 129, 0.1);
    --accent-warning-bg: rgba(245, 158, 11, 0.1);
    --accent-warning-border: rgba(245, 158, 11, 0.18);
    --accent-danger-bg: rgba(239, 68, 68, 0.1);
    --accent-danger-bg-hover: rgba(239, 68, 68, 0.2);
    --success-12: rgba(16, 185, 129, 0.12);
    --success-18: rgba(16, 185, 129, 0.18);
    --warning-12: rgba(245, 158, 11, 0.12);
    --danger-12: rgba(239, 68, 68, 0.12);
    --danger-18: rgba(239, 68, 68, 0.18);
    --danger-90: rgba(239, 68, 68, 0.9);
    --danger-100: rgba(239, 68, 68, 1);

    /* ---- 中性色 ---- */
    --bg-primary: #f3f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8ecf3;
    --bg-hover: #eef1f7;
    --border-color: #dfe4ec;
    --border-strong: #cfd6e1;
    --text-primary: #0e1525;
    --text-secondary: #556075;
    --text-tertiary: #808a9c;
    --text-inverse: #ffffff;
    --button-disabled: #9fb3f0;
    --code-bg: #0d1220;
    --code-text: #d4dbe8;
    /* 角色球的眼睛是「镂空露出底色」的画法（引擎里读 var(--sand-bg-base, var(--disk, ...))），
       跟着页面底色走，深色主题下白球才会配上一对深色眼睛 */
    --disk: var(--bg-primary);

    /* ---- 半透明 ---- */
    --overlay-bg: rgba(6, 10, 20, 0.5);
    --overlay-bg-heavy: rgba(6, 10, 20, 0.68);
    --overlay-bg-deep: rgba(6, 10, 20, 0.86);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-60: rgba(0, 0, 0, 0.6);
    --shadow-dark-40: rgba(0, 0, 0, 0.4);
    --white-pure: #fff;
    --white-high: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-medium: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-low: rgba(255, 255, 255, 0.3);
    --white-low-medium: rgba(255, 255, 255, 0.3);
    --white-low-high: rgba(255, 255, 255, 0.2);
    --white-strip-thumb: rgba(255, 255, 255, 0.18);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-lower: rgba(255, 255, 255, 0.1);
    --white-code-header: rgba(255, 255, 255, 0.1);
    --white-ghost: rgba(255, 255, 255, 0.04);
    --white-faint: rgba(255, 255, 255, 0.02);

    /* ---- 背景氛围：极淡的蓝图网格 + 两团品牌色光晕 ---- */
    --grid-line: rgba(37, 87, 245, 0.05);
    --aurora-a: rgba(37, 87, 245, 0.1);
    --aurora-b: rgba(56, 182, 255, 0.08);
    --glass-bg: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    --glass-border: color-mix(in srgb, var(--accent-primary) 10%, var(--border-color));
    /* 骨架屏扫光：浅色主题用白光，深色主题只要一丝亮 */
    --shimmer: rgba(255, 255, 255, 0.55);

    /* ---- 字体 ---- */
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
    --font-md: 14px;
    --font-sm: 13px;
    --font-xs: 12px;

    /* ---- 圆角 ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* ---- 阴影：带一点冷色并分两层（贴地的实影 + 扩散的软影） ---- */
    --shadow-sm: 0 1px 2px rgba(14, 21, 37, 0.06);
    --shadow-md: 0 1px 2px rgba(14, 21, 37, 0.05), 0 6px 16px -4px rgba(14, 21, 37, 0.1);
    --shadow-lg: 0 2px 4px rgba(14, 21, 37, 0.04), 0 14px 32px -8px rgba(14, 21, 37, 0.16);
    --shadow-xl: 0 4px 8px rgba(14, 21, 37, 0.04), 0 28px 64px -16px rgba(14, 21, 37, 0.26);
    --shadow-card: 0 1px 2px rgba(14, 21, 37, 0.04), 0 10px 28px -16px rgba(14, 21, 37, 0.14);
    --shadow-primary-sm: 0 1px 2px rgba(14, 21, 37, 0.12), 0 4px 10px -2px color-mix(in srgb, var(--accent-primary) 45%, transparent);
    --shadow-primary-md: 0 1px 2px rgba(14, 21, 37, 0.12), 0 8px 18px -6px color-mix(in srgb, var(--accent-primary) 60%, transparent);
    --shadow-primary-lg: 0 2px 4px rgba(14, 21, 37, 0.1), 0 14px 28px -8px color-mix(in srgb, var(--accent-primary) 65%, transparent);
    --shadow-danger-sm: 0 2px 8px rgba(239, 68, 68, 0.3);
    --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);

    /* ---- 动效：ease-out 用于进入/状态变化，spring 用于按压回弹和弹层出现 ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --transition-fast: 0.16s var(--ease-out);
    --transition-normal: 0.28s var(--ease-out);
    --transition-slow: 0.42s var(--ease-out);

    /* ---- 主站外壳尺寸（style.css 的响应式段落会按断点改写其中几项） ---- */
    --rail-width: 76px;
    --topbar-height: 60px;
    --tabbar-height: 62px;
    --shell-gap: 12px;
    --session-width: 272px;
    --inspector-width: 392px;
    --card-padding: 24px;
    --space-md: 16px;
    /* 移动端浏览器的 100vh 按「地址栏收起」算，比实际可视区高；支持 dvh 的浏览器改用动态视口高度 */
    --vh-full: 100vh;
}

/* 支持 linear() 的浏览器换成真正的弹簧曲线（约 1.7% 过冲），按压/弹出更有「手感」 */
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    }
}

@supports (height: 100dvh) {
    :root {
        --vh-full: 100dvh;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
    --accent-primary: #4d7cff;
    --accent-primary-hover: #6a91ff;
    --accent-primary-active: #8fadff;
    --accent-primary-light: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    --accent-cyan: #5cc8ff;
    --accent-deep: #2440d8;

    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-danger-hover: #dc2626;
    --accent-danger-active: #b91c1c;
    --success-text: #6ee7b7;
    --danger-text: #fca5a5;
    --accent-success-bg: rgba(16, 185, 129, 0.12);
    --accent-danger-bg: rgba(239, 68, 68, 0.12);

    --bg-primary: #080b12;
    --bg-secondary: #0f141e;
    --bg-tertiary: #171e2b;
    --bg-hover: #1a2232;
    --border-color: #232c3d;
    --border-strong: #2c3648;
    --text-primary: #e8edf6;
    --text-secondary: #9aa6ba;
    --text-tertiary: #667186;
    --text-inverse: #0e1525;
    --button-disabled: #2c3c6e;
    --code-bg: #05080f;
    --overlay-bg: rgba(2, 4, 10, 0.62);

    --grid-line: rgba(120, 150, 255, 0.045);
    --aurora-a: rgba(77, 124, 255, 0.16);
    --aurora-b: rgba(56, 182, 255, 0.07);
    --glass-bg: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    --shimmer: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px -8px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.75);
    /* 深色下靠顶部一道 1px 亮边勾出面板的轮廓，比加重阴影更清楚 */
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
    --shadow-primary-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px color-mix(in srgb, var(--accent-primary) 45%, transparent);
    --shadow-primary-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -6px color-mix(in srgb, var(--accent-primary) 60%, transparent);
    --shadow-primary-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px -8px color-mix(in srgb, var(--accent-primary) 70%, transparent);
    --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}