/* ============================================================
   金朵云官网 · 设计 Tokens（v1 定稿）
   定位：科技型企业及运营服务提供商 | 专业 · 可靠 · 简约 · 高端
   ============================================================ */

:root {
    /* ---- 品牌色阶（蓝） ---- */
    --brand-900: #071B41;
    --brand-800: #0A2A66;
    --brand-700: #0A3FA8;
    --brand-600: #1558F0;   /* 主色 */
    --brand-500: #2E74FF;
    --brand-300: #85AEFF;
    --brand-100: #E8F0FF;
    --brand-50:  #F4F8FF;

    /* ---- 点缀色（青，仅渐变尾/高亮） ---- */
    --accent-500: #00B8E6;
    --accent-100: #D9F6FD;

    /* ---- 中性色（冷灰蓝） ---- */
    --ink-900: #0F172A;     /* 标题 */
    --ink-700: #1E293B;
    --ink-600: #475569;     /* 正文 */
    --ink-400: #94A3B8;     /* 辅助 */
    --line-200: #E2E8F0;    /* 边框 */
    --line-100: #EEF2F7;    /* 分隔 */
    --bg-page: #F8FAFC;     /* 页面底 */
    --bg-white: #FFFFFF;

    /* ---- 功能色 ---- */
    --success: #16A34A;
    --warning: #D97706;
    --danger:  #DC2626;

    /* ---- 字体（本地系统栈，零 CDN 依赖） ---- */
    --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    /* ---- 字号阶梯 ----
       大号标题用 clamp() 流体缩放（与 --fs-hero 同思路）：
       clamp 上限 = 桌面端原固定值，故桌面观感零变化；
       窄屏（约 <900px）才平滑收敛，避免手机上 40px 大标题占满屏幅。
       正文级（xs~lg）保持固定值，小屏可读性不受影响。 */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: clamp(20px, 2.6vw, 24px);
    --fs-2xl: clamp(23px, 3.6vw, 32px);
    --fs-3xl: clamp(27px, 4.4vw, 40px);
    --fs-4xl: clamp(31px, 5.4vw, 48px);
    --fs-hero: clamp(38px, 5.2vw, 64px);

    /* ---- 间距（4px 基准） ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;

    /* ---- 圆角 ---- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;

    /* ---- 阴影（中性色，3 级） ---- */
    --shadow-1: 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-3: 0 16px 48px rgba(15, 23, 42, 0.14);

    /* ---- 布局 ---- */
    --container: 1200px;
    --header-h: 76px;

    /* ---- 首屏遮罩（.hero::before 四段渐变，随主题联动） ---- */
    --hero-o1: rgba(7, 27, 65, 0.94);
    --hero-o2: rgba(7, 27, 65, 0.86);
    --hero-o3: rgba(10, 42, 102, 0.62);
    --hero-o4: rgba(10, 42, 102, 0.42);

    /* ---- 动效 ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.3s;
}

/* ============================================================
   全局主题配色（后台「站点配置 → 全局主题配色」切换）
   site_config.theme_color → 前台 js/cms-bind.js 设 html[data-theme]
   → 此处按主题覆盖品牌色阶与首屏遮罩；中性色/功能色/布局不动，
     保证四种主题下正文可读性与版式完全一致（只换「品牌色」这一层）。
   blue = 默认（:root 本身），无需覆盖块。
   ============================================================ */

/* ---- emerald 翡翠绿：稳重务实 · 值得信赖 ---- */
[data-theme="emerald"] {
    --brand-900: #06302B;
    --brand-800: #0A4A3F;
    --brand-700: #0F766E;
    --brand-600: #0D9488;   /* 主色 */
    --brand-500: #14B8A6;
    --brand-300: #5EEAD4;
    --brand-100: #CCFBF1;
    --brand-50:  #F0FDFA;
    --accent-500: #2DD4BF;
    --accent-100: #D9FBF4;
    --hero-o1: rgba(4, 42, 38, 0.94);
    --hero-o2: rgba(6, 55, 50, 0.86);
    --hero-o3: rgba(13, 110, 98, 0.62);
    --hero-o4: rgba(15, 118, 110, 0.42);
}

/* ---- gold 鎏金：高端金棕 · 大气质感 ---- */
[data-theme="gold"] {
    --brand-900: #452F0B;
    --brand-800: #6B4A0E;
    --brand-700: #92650F;
    --brand-600: #B07D12;   /* 主色 */
    --brand-500: #C9932B;
    --brand-300: #E8C56B;
    --brand-100: #FBF0D9;
    --brand-50:  #FDFAF0;
    --accent-500: #E8B84B;
    --accent-100: #FCF3DC;
    --hero-o1: rgba(48, 32, 8, 0.94);
    --hero-o2: rgba(69, 47, 11, 0.86);
    --hero-o3: rgba(146, 101, 15, 0.62);
    --hero-o4: rgba(176, 125, 18, 0.42);
}

/* ---- wine 勃艮第红：庄重酒红 · 典雅沉稳 ---- */
[data-theme="wine"] {
    --brand-900: #4C0519;
    --brand-800: #761233;
    --brand-700: #93163F;
    --brand-600: #B01E4F;   /* 主色 */
    --brand-500: #C93664;
    --brand-300: #ECA0B8;
    --brand-100: #FCE5EC;
    --brand-50:  #FDF2F6;
    --accent-500: #E86A8A;
    --accent-100: #FDE8EF;
    --hero-o1: rgba(56, 6, 22, 0.94);
    --hero-o2: rgba(76, 5, 25, 0.86);
    --hero-o3: rgba(147, 22, 63, 0.62);
    --hero-o4: rgba(176, 30, 79, 0.42);
}