/* =========================================
   2. Semantic Tokens (语义层)
   定义功能角色。换肤时只需覆盖此文件或通过 data-theme 覆盖变量。
   ========================================= */
:root {
    /* --- Brand & Accent --- */
    /* 主品牌色 (默认为蓝色系) */
    --color-brand-primary: var(--blue-500);
    --color-brand-highlight: var(--blue-400);
    --color-brand-dark: var(--blue-600);

    /* 强调/转化色 (默认为橙色系 - 用于购买/支付) */
    --color-accent: var(--orange-500);
    --color-accent-hover: var(--orange-600);
    --color-accent-light: var(--orange-400);

    /* --- Backgrounds --- */
    /* 页面背景 (深邃) */
    --bg-page: var(--slate-950);
    /* 玻璃面板背景 — 完整分级见下方 Glass Backgrounds 区块 */

    /* --- Borders --- */
    --border-glass-light: rgba(255, 255, 255, 0.08);
    --border-glass-highlight: rgba(255, 255, 255, 0.15);

    /* --- Text --- */
    --text-primary: var(--text-white);
    --text-secondary: var(--text-gray);
    --text-tertiary: var(--text-dark);

    /* 避免循环引用的"值别名"（供 mobile.css 等本地变量赋值用）*/
    --text-primary-val:   #F1F5F9;  /* Slate-100 */
    --text-secondary-val: #94A3B8;  /* Slate-400 */
    --text-tertiary-val:  #64748B;  /* Slate-500 */

    /* --- Feedback --- */
    --color-danger: var(--red-500);
    --color-success: var(--green-500);
    /* ── 2026-08-22 第四批：语义层补齐 ─────────────────────────────────────
       蓝图定「两个主色」= 品牌蓝 + 转化橙，故通用蓝一律收敛进品牌蓝，不新增第三种通用蓝。
       代理专区的青色属「特色」予以保留，但给它正式的语义名，不再散落硬编码。 */
    --color-danger-light:  var(--red-400);
    --color-success-light: var(--green-400);
    --color-warning:       var(--amber-500);


    /* --- Glass Backgrounds (Alpha 变体) ---
       换主题时在 theme-*.css 里覆盖这几行即可 */
    --bg-glass-subtle:  rgba(15, 23, 42, 0.40);  /* 极薄玻璃 */
    --bg-glass-panel:   rgba(30, 41, 59, 0.75);  /* 标准卡片 */
    --bg-glass-heavy:   rgba(15, 23, 42, 0.85);  /* 弹窗/Sheet */
    --bg-glass-sheet:   rgba(15, 23, 42, 0.95);  /* 底部抽屉 */

    /* --- Spinner --- */
    /* 荧光蓝 — 全站 spinner 颜色。改这一行即可全局生效 */
    --spinner-color: var(--blue-400);

    /* --- Effects --- */
    --glass-blur-md: 12px;
    --glass-blur-lg: 20px;

    /* Glows (Dynamic Alpha) */
    --color-brand-glow: color-mix(in srgb, var(--color-brand-primary), transparent 60%);
    --color-accent-glow: color-mix(in srgb, var(--color-accent), transparent 60%);

    /* =========================================
       Spacing Scale（间距）
       用法: padding: var(--space-md)
       ========================================= */
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 60px;

    /* =========================================
       Border Radius Scale（圆角）
       用法: border-radius: var(--radius-md)
       ========================================= */
    --radius-sm:   8px;   /* 输入框、小卡片 */
    --radius-md:   12px;  /* 标准卡片、弹窗内容块 */
    --radius-lg:   16px;  /* 主卡片、Sheet */
    --radius-xl:   20px;  /* 大卡片、主弹窗 */
    --radius-pill: 50px;  /* 胶囊按钮、标签 */

    /* 按钮专用（改这两行即可全局换按钮圆角）*/
    --radius-btn:      var(--radius-md);   /* 标准矩形按钮 */
    --radius-btn-pill: var(--radius-pill); /* 圆形/胶囊按钮 */

    /* =========================================
       Box Shadow Scale（阴影）
       用法: box-shadow: var(--shadow-md)
       ========================================= */
    --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.2);
    --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl:    0 20px 50px rgba(0, 0, 0, 0.35);

    /* 品牌发光阴影（用于主按钮 / 激活态）*/
    --shadow-brand: 0 4px 15px var(--color-brand-glow);
    --shadow-accent: 0 4px 15px var(--color-accent-glow);

    /* =========================================
       Typography Scale（字体大小）
       ========================================= */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   16px;
    --text-xl:   18px;
    --text-2xl:  20px;
    --text-3xl:  24px;

    /* =========================================
       Z-Index Scale（层级）
       ========================================= */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     1000;
    --z-toast:     2000;
    --z-tooltip:   3000;
}