/**
 * tokens.css —— 全站 Design Token 唯一数据源
 *
 * 架构说明：
 *   1. 本文件是全站颜色/间距/圆角/阴影/字体的【唯一数据源】。
 *   2. 所有页面 CSS 只允许消费本文件定义的变量，禁止硬编码颜色。
 *   3. 命名分两层：
 *      - 语义令牌（新）：--color-bg-page / --color-text-primary 等
 *      - 兼容别名（旧）：--bg-page / --text-body / --gold-a 等，指向语义令牌
 *      新代码用语义令牌，旧代码用别名，自动跟随主题切换。
 *   4. 主题切换由 themeSwitcher.js 通过 data-theme="dark|light" 驱动，
 *      本文件不负责切换逻辑，只提供两套变量值。
 *   5. 默认主题为 dark（header.php 中 localStorage 默认 'dark'），
 *      但 :root 仍声明浅色值作为系统兜底，[data-theme="dark"] 覆盖为深色。
 *
 * 生成方式：本文件为静态手写，不依赖数据库。
 * 后台 design_tokens 表的配置在 P1 阶段接入 DesignTokenBuilder 自动覆盖本文件。
 */

/* ================================================================
 * 一、浅色语义令牌（:root 默认，系统兜底）
 * ================================================================ */
:root {
    /* ---------- 品牌金阶（三阶金，全主题通用色值） ---------- */
    --color-gold-a: #B89040;          /* 金A 哑光古铜 - 资讯/场地/商城 */
    --color-gold-a-light: #C9A050;
    --color-gold-a-dark: #A07830;
    --color-gold-b: #E6C888;          /* 金B 香槟金 - 星视界/模特/达人/圈子/活动 */
    --color-gold-b-light: #F0D8A0;
    --color-gold-b-dark: #D4B070;
    --color-gold-c: #AA8638;          /* 金C 暗棕金 - 打卡/数字藏品/时间银行 */
    --color-gold-c-light: #BC9648;
    --color-gold-c-dark: #987028;

    /* 主品牌色（默认金A，可被后台覆盖） */
    --color-primary: #B89040;
    --color-primary-hover: #C9A050;
    --color-primary-active: #A07830;
    --color-primary-light: #C9A050;
    --color-primary-bg: rgba(184, 144, 64, 0.10);

    /* ---------- 中性色（浅色） ---------- */
    --color-bg-page: #FFFFFF;
    --color-bg-card: #F8F9FA;
    --color-bg-secondary: #F0F1F3;
    --color-bg-header: #12151C;
    --color-bg-footer: #12151C;
    --color-bg-hover: rgba(0, 0, 0, 0.05);
    --color-bg-mask: rgba(0, 0, 0, 0.45);

    --color-text-primary: #1D2939;
    --color-text-secondary: #475467;
    --color-text-muted: #98A2B3;
    --color-text-hint: #98A2B3;
    --color-text-nav: #F2F4F7;
    --color-text-on-primary: #FFFFFF;

    --color-border: #E4E7EC;
    --color-border-strong: #D0D5DD;
    --color-divider: #EEF0F2;

    /* ---------- 语义状态色 ---------- */
    --color-success: #67C23A;
    --color-warning: #E6A23C;
    --color-danger: #F56C6C;
    --color-info: #409EFF;

    /* ---------- 间距系统 ---------- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

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

    /* ---------- 阴影系统 ---------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(184, 144, 64, 0.25);

    /* ---------- 字体系统 ---------- */
    --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-family-serif: "Songti SC", "SimSun", "STSong", serif;
    --font-family-mono: "Menlo", "Consolas", "Courier New", monospace;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 40px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ---------- 过渡动画 ---------- */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;

    /* ================================================================
     * 兼容别名层（旧变量名 → 指向语义令牌）
     * 旧代码无需修改即可自动跟随主题
     * ================================================================ */

    /* 背景类 */
    --bg-page: var(--color-bg-page);
    --bg-card: var(--color-bg-card);
    --bg-modal: var(--color-bg-card);
    --bg-primary: var(--color-bg-secondary);
    --bg-secondary: var(--color-bg-card);
    --bg-header: var(--color-bg-header);
    --bg-footer: var(--color-bg-footer);
    --bg-hover: var(--color-bg-hover);
    --bg-hover-dark: var(--color-bg-hover);
    --bg-dark: var(--color-bg-page);

    /* 文字类 */
    --text-body: var(--color-text-primary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-hint: var(--color-text-hint);
    --text-nav: var(--color-text-nav);

    /* 边框类 */
    --border-default: var(--color-border);
    --border-light: var(--color-border);
    --border-color: var(--color-border);
    --border: var(--color-border);

    /* 品牌金 */
    --gold-a: var(--color-gold-a);
    --gold-a-light: var(--color-gold-a-light);
    --gold-a-dark: var(--color-gold-a-dark);
    --gold-b: var(--color-gold-b);
    --gold-b-light: var(--color-gold-b-light);
    --gold-b-dark: var(--color-gold-b-dark);
    --gold-c: var(--color-gold-c);
    --gold-c-light: var(--color-gold-c-light);
    --gold-c-dark: var(--color-gold-c-dark);

    /* 主色（public.css 旧名） */
    --primary-color: var(--color-primary);
    --primary-color-dark: var(--color-primary-active);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-active);
    --primary-light: var(--color-primary-light);

    /* 状态色 */
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);

    /* 白色（浅底=白，深底=主文字色，由 dark 覆盖） */
    --white: #FFFFFF;
}

/* ================================================================
 * 二、深色语义令牌覆盖 [data-theme="dark"]
 * 由 themeSwitcher.js 切换，太阳/月亮按钮完整保留
 * ================================================================ */
[data-theme="dark"] {
    /* ---------- 中性色（深色） ---------- */
    --color-bg-page: #0B0E13;
    --color-bg-card: #1E222B;
    --color-bg-secondary: #161A22;
    --color-bg-header: #07090C;
    --color-bg-footer: #07090C;
    --color-bg-hover: rgba(255, 255, 255, 0.05);
    --color-bg-mask: rgba(0, 0, 0, 0.60);

    --color-text-primary: #F2F4F7;
    --color-text-secondary: #D0D5DD;
    --color-text-muted: #98A2B3;
    --color-text-hint: #86909C;
    --color-text-nav: #E0E4EC;
    --color-text-on-primary: #1A1A1A;

    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.18);
    --color-divider: rgba(255, 255, 255, 0.06);

    /* 深色下金色降 10% 透明度，避免发闷 */
    --color-gold-a: rgba(184, 144, 64, 0.92);
    --color-gold-a-light: rgba(201, 160, 80, 0.92);
    --color-gold-a-dark: rgba(160, 120, 48, 0.92);
    --color-gold-b: rgba(230, 200, 136, 0.92);
    --color-gold-b-light: rgba(240, 216, 160, 0.92);
    --color-gold-b-dark: rgba(212, 176, 112, 0.92);
    --color-gold-c: rgba(170, 134, 56, 0.92);
    --color-gold-c-light: rgba(188, 150, 72, 0.92);
    --color-gold-c-dark: rgba(152, 112, 40, 0.92);

    --color-primary: rgba(184, 144, 64, 0.92);
    --color-primary-hover: rgba(201, 160, 80, 0.95);
    --color-primary-active: rgba(160, 120, 48, 0.95);
    --color-primary-light: rgba(201, 160, 80, 0.92);
    --color-primary-bg: rgba(184, 144, 64, 0.14);

    /* 阴影（深色加强） */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 24px rgba(230, 200, 136, 0.20);

    /* 白色在深色下指向主文字色 */
    --white: #F2F4F7;
}

/* ================================================================
 * 二-B、浅色语义令牌 [data-theme="light"]
 * 显式声明以覆盖 public.css 中同名的 [data-theme="light"] 旧值
 * 值与 :root 浅色默认一致
 * ================================================================ */
[data-theme="light"] {
    --color-bg-page: #FFFFFF;
    --color-bg-card: #F8F9FA;
    --color-bg-secondary: #F0F1F3;
    --color-bg-header: #12151C;
    --color-bg-footer: #12151C;
    --color-bg-hover: rgba(0, 0, 0, 0.05);
    --color-bg-mask: rgba(0, 0, 0, 0.45);
    --color-text-primary: #1D2939;
    --color-text-secondary: #475467;
    --color-text-muted: #98A2B3;
    --color-text-hint: #98A2B3;
    --color-text-nav: #F2F4F7;
    --color-text-on-primary: #FFFFFF;
    --color-border: #E4E7EC;
    --color-border-strong: #D0D5DD;
    --color-divider: #EEF0F2;
    --color-gold-a: #B89040;
    --color-gold-a-light: #C9A050;
    --color-gold-a-dark: #A07830;
    --color-gold-b: #E6C888;
    --color-gold-b-light: #F0D8A0;
    --color-gold-b-dark: #D4B070;
    --color-gold-c: #AA8638;
    --color-gold-c-light: #BC9648;
    --color-gold-c-dark: #987028;
    --color-primary: #B89040;
    --color-primary-hover: #C9A050;
    --color-primary-active: #A07830;
    --color-primary-light: #C9A050;
    --color-primary-bg: rgba(184, 144, 64, 0.10);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(184, 144, 64, 0.25);
    --white: #FFFFFF;

    /* 兼容别名 */
    --bg-page: var(--color-bg-page);
    --bg-card: var(--color-bg-card);
    --bg-modal: var(--color-bg-card);
    --bg-primary: var(--color-bg-secondary);
    --bg-secondary: var(--color-bg-card);
    --bg-header: var(--color-bg-header);
    --bg-footer: var(--color-bg-footer);
    --bg-hover: var(--color-bg-hover);
    --bg-hover-dark: var(--color-bg-hover);
    --bg-dark: var(--color-bg-page);
    --text-body: var(--color-text-primary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-hint: var(--color-text-hint);
    --text-nav: var(--color-text-nav);
    --border-default: var(--color-border);
    --border-light: var(--color-border);
    --border-color: var(--color-border);
    --border: var(--color-border);
    --gold-a: var(--color-gold-a);
    --gold-a-light: var(--color-gold-a-light);
    --gold-a-dark: var(--color-gold-a-dark);
    --gold-b: var(--color-gold-b);
    --gold-b-light: var(--color-gold-b-light);
    --gold-b-dark: var(--color-gold-b-dark);
    --gold-c: var(--color-gold-c);
    --gold-c-light: var(--color-gold-c-light);
    --gold-c-dark: var(--color-gold-c-dark);
    --primary-color: var(--color-primary);
    --primary-color-dark: var(--color-primary-active);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-active);
    --primary-light: var(--color-primary-light);
}

/* ================================================================
 * 三、系统主题跟随（用户未手动切换时）
 * ================================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-page: #0B0E13;
        --color-bg-card: #1E222B;
        --color-bg-secondary: #161A22;
        --color-bg-header: #07090C;
        --color-bg-footer: #07090C;
        --color-bg-hover: rgba(255, 255, 255, 0.05);
        --color-bg-mask: rgba(0, 0, 0, 0.60);
        --color-text-primary: #F2F4F7;
        --color-text-secondary: #D0D5DD;
        --color-text-muted: #98A2B3;
        --color-text-hint: #86909C;
        --color-text-nav: #E0E4EC;
        --color-text-on-primary: #1A1A1A;
        --color-border: rgba(255, 255, 255, 0.10);
        --color-border-strong: rgba(255, 255, 255, 0.18);
        --color-divider: rgba(255, 255, 255, 0.06);
        --color-gold-a: rgba(184, 144, 64, 0.92);
        --color-gold-b: rgba(230, 200, 136, 0.92);
        --color-gold-c: rgba(170, 134, 56, 0.92);
        --color-primary: rgba(184, 144, 64, 0.92);
        --color-primary-hover: rgba(201, 160, 80, 0.95);
        --color-primary-active: rgba(160, 120, 48, 0.95);
        --color-primary-light: rgba(201, 160, 80, 0.92);
        --color-primary-bg: rgba(184, 144, 64, 0.14);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
        --shadow-glow: 0 0 24px rgba(230, 200, 136, 0.20);
        --white: #F2F4F7;
    }
}

/* ================================================================
 * 四、模块金阶注入（通过 data-module 属性自动切换主色）
 * 用法：<body data-module="news"> 或 <section data-module="mall">
 * 金A: news/venue/mall  金B: starview/model/talent/circle/activity
 * 金C: checkin/dc/timebank
 * ================================================================ */
[data-module="news"],
[data-module="venue"],
[data-module="mall"] {
    --color-primary: var(--color-gold-a);
    --color-primary-hover: var(--color-gold-a-light);
    --color-primary-active: var(--color-gold-a-dark);
    --color-primary-light: var(--color-gold-a-light);
    --primary-color: var(--color-gold-a);
    --primary-color-dark: var(--color-gold-a-dark);
    --primary: var(--color-gold-a);
    --primary-dark: var(--color-gold-a-dark);
    --primary-light: var(--color-gold-a-light);
}

[data-module="starview"],
[data-module="model"],
[data-module="talent"],
[data-module="circle"],
[data-module="activity"] {
    --color-primary: var(--color-gold-b);
    --color-primary-hover: var(--color-gold-b-light);
    --color-primary-active: var(--color-gold-b-dark);
    --color-primary-light: var(--color-gold-b-light);
    --primary-color: var(--color-gold-b);
    --primary-color-dark: var(--color-gold-b-dark);
    --primary: var(--color-gold-b);
    --primary-dark: var(--color-gold-b-dark);
    --primary-light: var(--color-gold-b-light);
}

[data-module="checkin"],
[data-module="dc"],
[data-module="timebank"] {
    --color-primary: var(--color-gold-c);
    --color-primary-hover: var(--color-gold-c-light);
    --color-primary-active: var(--color-gold-c-dark);
    --color-primary-light: var(--color-gold-c-light);
    --primary-color: var(--color-gold-c);
    --primary-color-dark: var(--color-gold-c-dark);
    --primary: var(--color-gold-c);
    --primary-dark: var(--color-gold-c-dark);
    --primary-light: var(--color-gold-c-light);
}