/* ============================================================
   AERO工作台 · 全局设计令牌（Design Tokens）v1.1
   ============================================================
   用途：全站唯一的颜色 / 字体 / 圆角 / 阴影 / 间距来源。
   引入方式：每个页面（主站、todo、claim、tools/*）
   在自己样式表【之前】最先引入：

     <link rel="stylesheet" href="../assets/css/tokens.css">

   规则：
     1. 各模块样式表一律引用本文件的变量，禁止再写死色值；
     2. 换主题 / 出暗色版，只改这里即可全局生效；
     3. 变量命名语义化（--ok / --warn），不叫具体色名。
   ============================================================ */

:root {
    /* ---------- 品牌蓝色阶（主色） ----------
       全站原来有 6 种"蓝"，统一收敛为这一组（按亮度递减）：
       400=高亮  500=次亮/条形图  600=★主色(按钮/链接/选中)
       700=标题文字  800=主色hover  900=最深/渐变深端 */
    --brand-50:  #f4f9ff;   /* 最浅底：悬浮面板、提示底 */
    --brand-100: #e8f1fc;   /* 浅底：图标底、选中底、chip */
    --brand-200: #d3e3f3;   /* 边框（品牌向） */
    --brand-300: #7fb0e3;   /* 浅高亮 */
    --brand-400: #4a90d9;   /* 高亮 accent：图标、渐变浅端 */
    --brand-500: #3b82c4;   /* 次亮：条形图、次级选中、hover */
    /* 兼容别名（老代码用 --primary / --primary-light，统一映射到主色） */
    --primary:      var(--brand-600);
    --primary-light:var(--brand-400);
    --primary-dark: var(--brand-800);
    --brand-600: #1e5fa8;   /* ★主色：按钮、链接、选中态 */
    --brand-700: #2c5d95;   /* 标题文字蓝、渐变浅端 */
    --brand-800: #164a83;   /* 主色 hover / 深按钮 */
    --brand-900: #16385c;   /* 最深：弹窗头渐变深端、大标题 */

    /* ---------- 中性色 ---------- */
    --bg:      #eef1f5;     /* 内容区背景（全站唯一） */
    --card:    #ffffff;     /* 卡片背景 */
    --text-1:  #2c3e50;     /* 主文字 */
    --text-2:  #5c6b7f;     /* 次要文字 */
    --text-3:  #8a97a5;     /* 辅助/占位文字 */
    --line:    #e3e8ee;     /* 常规边框 */
    --line-soft: #f0f3f7;   /* 更浅分隔线 */

    /* ---------- 状态色（语义化） ---------- */
    --ok:        #27ae60;  --ok-bg:        #e7f6ef;
    --warn:      #e67e22;  --warn-bg:      #fdf0e6;
    --danger:    #d9534f;  --danger-bg:    #fdecec;
    --info:      #4a90d9;  --info-bg:      #e8f1fc;
    --purple:    #8e5cd9;  --purple-bg:    #f1ecf9;

    /* ---------- 奖牌色（榜单 TOP1/2/3） ---------- */
    --gold:   #fbbf24;  --gold-text:   #78350f;
    --silver: #cbd5e1;  --silver-text: #334155;
    --bronze: #fdba74;  --bronze-text: #7c2d12;

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

    /* ---------- 渐变 ---------- */
    --grad-brand: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    --grad-deep:  linear-gradient(135deg, #16283b 0%, #1e2c3d 55%, #24374d 100%);  /* 登录页 */
    --grad-head:  linear-gradient(135deg, var(--brand-700), var(--brand-900));      /* 弹窗头 */

    /* ---------- 圆角（统一 3 档） ---------- */
    --radius-sm:   8px;     /* 输入框、小按钮、标签 */
    --radius:      12px;    /* 卡片、面板 */
    --radius-lg:   16px;    /* 弹窗、登录卡 */
    --radius-full: 999px;   /* 胶囊、徽章、头像 */

    /* ---------- 阴影（收敛为 3 档） ---------- */
    --shadow-sm: 0 1px 3px rgba(24, 48, 80, .06);
    --shadow-md: 0 2px 12px rgba(24, 48, 80, .08);
    --shadow-lg: 0 12px 32px rgba(15, 42, 74, .16);
    --shadow-brand: 0 8px 20px rgba(74, 144, 217, .32);  /* 主按钮/Logo 光晕 */

    /* ---------- 间距（4 的倍数） ---------- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* ---------- 层级 ---------- */
    --z-topbar: 10;   --z-drawer: 50;   --z-modal: 1000;  --z-toast: 1100;

    /* ---------- 动效 ---------- */
    --tr-fast: .15s ease;
    --tr:      .18s ease;
    --tr-slow: .25s ease;
}

/* ---------- 可选：暗色主题占位（未来启用只改这里） ---------- */
@media (prefers-color-scheme: dark) {
    /* 预留：正式启用前先逐页验证对比度
    :root {
        --bg: #10161f;  --card: #182230;  --text-1: #e6edf5;
        --text-2: #9fb0c3;  --text-3: #6b7d92;  --line: #263447;
    } */
}