/* ==========================================================================
   设计系统 - 全站共享令牌 (Single Source of Truth)
   ----------------------------------------------------------------------------
   生成：Day 2 清理（提取自 app/View/User/Theme/Cartoon/Index/Index.html 行 46-72）
   目标：
     1) 解决历史问题：var(--primary-red) 在 Index.html 外的 20+ 个页面没有定义，
        导致颜色回落为继承色（通常黑/灰）。现在此文件被 Common/Header.html 前置
        加载后，所有内部页面都能拿到正确的令牌值。
     2) 修正语义：原 --primary-red 变量名实际指向蓝色 #2563EB（B2B 主色）。
        这里同时提供语义正确的别名 --primary-blue，值完全一致，后续迁移可以
        按页面推进，不影响视觉。
   维护规则：
     - 新增 token 一律写在这里，不要回到页面 <style> 内联 :root。
     - 如需修改色值，必须先在 UI 设计 review 确认（这里是单一来源，改动影响全站）。
   ========================================================================== */

:root {
    /* ---- 主色（B2B 现代蓝） ---- */
    --primary-blue:       #2563EB;
    --primary-blue-dark:  #1d4ed8;
    --primary-blue-light: #3b82f6;

    /* ---- 兼容别名：原 --primary-red* 值与主色蓝完全一致，仅名称遗留 ----
       保留的目的：让 User/*.html、Common/Nav.html、Common/SecurityNav.html 等
       20+ 个已经在消费 var(--primary-red) 的页面零改动生效。
       后续 Day 3+ 会按页面逐个替换为 --primary-blue，然后在这里删除。 */
    --primary-red:        var(--primary-blue);
    --primary-red-dark:   var(--primary-blue-dark);
    --primary-red-hover:  var(--primary-blue-dark);

    /* ---- 辅助强调色 ---- */
    --accent-orange:      #f97316;
    --accent-orange-dark: #ea580c;
    --accent-orange-light:#fb923c;

    /* ---- 价格专用（真实红，用于价格、折扣等金融语境） ---- */
    --price-red:          #dc2626;

    /* ---- 中性背景 ---- */
    --primary-white:      #FFFFFF;
    --bg-page:            #f4f6f8;
    --bg-container:       #FFFFFF;
    --bg-light:           #f4f6f8;
    --bg-dark:            #1e293b;
    --bg-white:           #FFFFFF;
    --bg-gray:            #f1f5f9;

    /* ---- 文本层级 ---- */
    --text-dark:          #1a1a2e;
    --text-medium:        #64748b;
    --text-gray:          #94a3b8;
    --text-light:         #f8fafc;

    /* ---- 描边 ---- */
    --border-light:       #e2e8f0;
    --border-gray:        #cbd5e1;

    /* ---- 阴影 ---- */
    --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-header:      0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg:          0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
}