/* ============================================================
 * assets/tokens.css —— 设计令牌（单一来源）
 * 从 glass.css 抽取，供「只想要色值变量、不加载整套组件样式」的
 * 独立页面（如 /oil/* 使用自己的模板头）引入，保证全站配色同源。
 * 主站页面仍以 glass.css 为准；两者变量定义一致。
 * ============================================================ */
:root {
    /* 品牌主色：保留原紫蓝家族，但改为"可读实心色" */
    --tz-primary: #4f5fd7;
    --tz-primary-rgb: 79, 95, 215;   /* 供 rgba(var(--tz-primary-rgb), α) 使用 */
    --tz-primary-hover: #4150c6;
    --tz-primary-active: #3743ad;
    --tz-primary-text: #414dbe;          /* 用于描边/文字（在浅底上可读） */
    --tz-primary-soft: rgba(79, 95, 215, 0.09);
    --tz-primary-soft-2: rgba(79, 95, 215, 0.16);
    --tz-primary-border: rgba(79, 95, 215, 0.30);

    /* 主色渐变（白字对比度 ≈ 4.7:1，达标） */
    --tz-gradient-primary: linear-gradient(135deg, #4f5dd0 0%, #6b5ccc 100%);
    --tz-gradient-primary-hover: linear-gradient(135deg, #4452c4 0%, #5f51c0 100%);
    --tz-gradient-primary-active: linear-gradient(135deg, #3a47b4 0%, #5449b2 100%);

    /* 品牌渐变（logo / 大数字，保持原有浓紫，避免破坏品牌识别） */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* 语义色（全部改为可读版本） */
    --tz-success: #14724e;
    --tz-success-hover: #10613f;
    --tz-success-soft: rgba(28, 138, 96, 0.10);
    --tz-success-border: rgba(28, 138, 96, 0.30);
    --tz-success-text: #16724f;

    --tz-danger: #c33c35;
    --tz-danger-hover: #ab3129;
    --tz-danger-soft: rgba(195, 60, 53, 0.09);
    --tz-danger-border: rgba(195, 60, 53, 0.28);
    --tz-danger-text: #b0352e;

    --tz-warning: #a5610b;
    --tz-warning-hover: #8d520a;
    --tz-warning-soft: rgba(201, 138, 40, 0.13);
    --tz-warning-border: rgba(165, 97, 11, 0.30);
    --tz-warning-text: #8f5609;

    --tz-info: #16758c;
    --tz-info-hover: #12647a;
    --tz-info-soft: rgba(22, 117, 140, 0.10);
    --tz-info-border: rgba(22, 117, 140, 0.28);
    --tz-info-text: #14657a;

    --tz-neutral: #556070;
    --tz-neutral-soft: #eef0f4;
    --tz-neutral-border: rgba(17, 24, 39, 0.14);

    /* 表面与文字 */
    --tz-bg: #f1f3f9;
    --tz-surface: #ffffff;
    --tz-surface-2: #f6f7fb;
    --tz-surface-3: #eceff6;
    --tz-border: rgba(17, 24, 39, 0.10);
    --tz-border-2: rgba(17, 24, 39, 0.16);
    --tz-text: #111827;
    --tz-text-2: #4b5563;
    --tz-text-3: #8a93a3;

    /* 圆角 */
    --tz-r-xs: 6px;
    --tz-r-sm: 8px;
    --tz-r: 10px;
    --tz-r-lg: 14px;
    --tz-r-xl: 20px;
    --tz-r-pill: 999px;

    /* 阴影 */
    --tz-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --tz-shadow-2: 0 4px 14px rgba(16, 24, 40, 0.07);
    --tz-shadow-3: 0 12px 30px rgba(16, 24, 40, 0.11);
    --tz-focus: 0 0 0 3px rgba(79, 95, 215, 0.26);
    --tz-focus-danger: 0 0 0 3px rgba(195, 60, 53, 0.24);

    /* 软色对（浅底 + 同色深字）：徽章 / 提示 / 软按钮共用。
       用「基色低透明度叠白」做浅底、「*-text」做深字 → 主题只需覆盖基色，整组自动跟随。 */
    --tz-primary-bg-soft: rgba(79, 95, 215, 0.12);
    --tz-primary-fg-soft: var(--tz-primary-text);
    --tz-success-bg-soft: rgba(28, 138, 96, 0.13);
    --tz-success-fg-soft: var(--tz-success-text);
    --tz-warning-bg-soft: rgba(201, 138, 40, 0.16);
    --tz-warning-fg-soft: var(--tz-warning-text);
    --tz-danger-bg-soft:  rgba(195, 60, 53, 0.11);
    --tz-danger-fg-soft:  var(--tz-danger-text);
    --tz-info-bg-soft:    rgba(22, 117, 140, 0.12);
    --tz-info-fg-soft:    var(--tz-info-text);
    --tz-neutral-bg-soft: var(--tz-neutral-soft);
    --tz-neutral-fg-soft: var(--tz-text-2);

    /* 深色（btn-dark 系列） */
    --tz-dark: #232b39;
    --tz-dark-hover: #161d28;

    /* 材质：卡片圆角与阴影强度，主题可微调（小清新用更圆更柔） */
    --tz-card-r: var(--tz-r-lg);
    --tz-card-shadow: var(--tz-shadow-1);
    --tz-card-accent: none;      /* 卡片顶部的强调条，默认无 */

    /* 兼容 v1 遗留变量名 */
    --tz-blue: #5563db;
    --tz-indigo: #5563db;
    --tz-purple: #7666d3;
    --tz-glass-bg: rgba(255, 255, 255, 0.6);
    --tz-glass-border: rgba(255, 255, 255, 0.7);
}

/* ---- 主题覆盖（与 glass.css 同步）---- */
/* ---------- 主题 1：版本1 · 科技感紫蓝（显式声明，便于后台对照） ---------- */
[data-theme="default"] {
    --tz-card-r: var(--tz-r-lg);
    --tz-card-shadow: var(--tz-shadow-2);
}

/* ---------- 主题 2：薄荷清风 ---------- */
[data-theme="mint"] {
    --tz-primary: #0e7f65;
    --tz-primary-rgb: 14, 127, 101;
    --tz-primary-hover: #0c7059;
    --tz-primary-active: #0a6350;
    --tz-primary-text: #0a6b53;
    --tz-primary-soft: rgba(14, 127, 101, 0.09);
    --tz-primary-soft-2: rgba(14, 127, 101, 0.17);
    --tz-primary-border: rgba(14, 127, 101, 0.30);
    --tz-primary-bg-soft: rgba(14, 127, 101, 0.13);
    --tz-gradient-primary: linear-gradient(135deg, #0c7059 0%, #0f8468 100%);
    --tz-gradient-primary-hover: linear-gradient(135deg, #0a6350 0%, #0d775d 100%);
    --tz-gradient-primary-active: linear-gradient(135deg, #085744 0%, #0b6a53 100%);
    /* logo / 大数字用：亮青绿渐变 */
    --primary-gradient: linear-gradient(135deg, #0e8f6f 0%, #17ac86 100%);

    --tz-success: #106b4a;
    --tz-success-hover: #0d5c3f;
    --tz-success-text: #0f6b4b;
    --tz-success-soft: rgba(16, 107, 74, 0.10);
    --tz-success-border: rgba(16, 107, 74, 0.28);
    --tz-success-bg-soft: rgba(23, 172, 134, 0.15);

    --tz-danger: #b8434d;
    --tz-danger-hover: #a33a43;
    --tz-danger-text: #a63d47;
    --tz-danger-soft: rgba(184, 67, 77, 0.09);
    --tz-danger-border: rgba(184, 67, 77, 0.26);
    --tz-danger-bg-soft: rgba(184, 67, 77, 0.12);

    --tz-warning: #9c6410;
    --tz-warning-hover: #85550d;
    --tz-warning-text: #8a5a0f;
    --tz-warning-soft: rgba(196, 141, 45, 0.14);
    --tz-warning-border: rgba(156, 100, 16, 0.28);
    --tz-warning-bg-soft: rgba(196, 141, 45, 0.17);

    --tz-info: #0f6d80;
    --tz-info-hover: #0c5d6e;
    --tz-info-text: #0e6375;
    --tz-info-soft: rgba(15, 109, 128, 0.10);
    --tz-info-border: rgba(15, 109, 128, 0.26);
    --tz-info-bg-soft: rgba(15, 109, 128, 0.13);

    --tz-neutral: #4e635c;
    --tz-neutral-soft: #e9f1ee;
    --tz-neutral-border: rgba(8, 58, 45, 0.14);

    --tz-bg: #f2f8f6;
    --tz-surface: #ffffff;
    --tz-surface-2: #f4faf8;
    --tz-surface-3: #e9f4f0;
    --tz-border: rgba(8, 58, 45, 0.10);
    --tz-border-2: rgba(8, 58, 45, 0.17);
    --tz-text: #10201c;
    --tz-text-2: #46564f;
    --tz-text-3: #7d918a;

    --tz-shadow-1: 0 1px 2px rgba(8, 58, 45, 0.05);
    --tz-shadow-2: 0 4px 16px rgba(8, 58, 45, 0.07);
    --tz-shadow-3: 0 14px 34px rgba(8, 58, 45, 0.10);
    --tz-focus: 0 0 0 3px rgba(14, 127, 101, 0.24);
    --tz-focus-danger: 0 0 0 3px rgba(184, 67, 77, 0.22);

    --tz-card-r: 18px;
    --tz-card-shadow: 0 4px 18px rgba(8, 58, 45, 0.07);

    --tz-blue: #0e7f65;
    --tz-indigo: #0e7f65;
    --tz-purple: #17ac86;
}

/* ---------- 主题 3：蜜桃奶昔 ---------- */
[data-theme="peach"] {
    --tz-primary: #bd4c66;
    --tz-primary-rgb: 189, 76, 102;
    --tz-primary-hover: #a8445c;
    --tz-primary-active: #963c52;
    --tz-primary-text: #a63d55;
    --tz-primary-soft: rgba(189, 76, 102, 0.09);
    --tz-primary-soft-2: rgba(189, 76, 102, 0.17);
    --tz-primary-border: rgba(189, 76, 102, 0.30);
    --tz-primary-bg-soft: rgba(189, 76, 102, 0.13);
    --tz-gradient-primary: linear-gradient(135deg, #bd4c66 0%, #a8445c 100%);
    --tz-gradient-primary-hover: linear-gradient(135deg, #a8445c 0%, #963c52 100%);
    --tz-gradient-primary-active: linear-gradient(135deg, #8a3749 0%, #7d3146 100%);
    --primary-gradient: linear-gradient(135deg, #e0728a 0%, #f0a184 100%);

    --tz-success: #1a7d55;
    --tz-success-hover: #156b48;
    --tz-success-text: #17734f;
    --tz-success-soft: rgba(26, 125, 85, 0.10);
    --tz-success-border: rgba(26, 125, 85, 0.28);
    --tz-success-bg-soft: rgba(26, 125, 85, 0.13);

    --tz-danger: #c0403a;
    --tz-danger-hover: #a83630;
    --tz-danger-text: #ac3830;
    --tz-danger-soft: rgba(192, 64, 58, 0.09);
    --tz-danger-border: rgba(192, 64, 58, 0.26);
    --tz-danger-bg-soft: rgba(192, 64, 58, 0.12);

    --tz-warning: #a0610e;
    --tz-warning-hover: #8a530c;
    --tz-warning-text: #8f560d;
    --tz-warning-soft: rgba(200, 130, 35, 0.15);
    --tz-warning-border: rgba(160, 97, 14, 0.28);
    --tz-warning-bg-soft: rgba(200, 130, 35, 0.17);

    --tz-info: #2b6b94;
    --tz-info-hover: #235b80;
    --tz-info-text: #266087;
    --tz-info-soft: rgba(43, 107, 148, 0.10);
    --tz-info-border: rgba(43, 107, 148, 0.26);
    --tz-info-bg-soft: rgba(43, 107, 148, 0.13);

    --tz-neutral: #6b575a;
    --tz-neutral-soft: #f4eceb;
    --tz-neutral-border: rgba(70, 32, 38, 0.14);

    --tz-bg: #fdf5f3;
    --tz-surface: #ffffff;
    --tz-surface-2: #fdf7f6;
    --tz-surface-3: #f9ecea;
    --tz-border: rgba(70, 32, 38, 0.10);
    --tz-border-2: rgba(70, 32, 38, 0.17);
    --tz-text: #231a1c;
    --tz-text-2: #5a4a4d;
    --tz-text-3: #9a888b;

    --tz-shadow-1: 0 1px 2px rgba(70, 32, 38, 0.05);
    --tz-shadow-2: 0 4px 16px rgba(70, 32, 38, 0.07);
    --tz-shadow-3: 0 14px 34px rgba(70, 32, 38, 0.10);
    --tz-focus: 0 0 0 3px rgba(189, 76, 102, 0.24);
    --tz-focus-danger: 0 0 0 3px rgba(192, 64, 58, 0.22);

    --tz-card-r: 18px;
    --tz-card-shadow: 0 4px 18px rgba(70, 32, 38, 0.07);

    --tz-blue: #bd4c66;
    --tz-indigo: #bd4c66;
    --tz-purple: #e0728a;
}