/* ==========================================================================
   Front Design Tokens · SaaS 前台官网
   ---------------------------------------------------------------------------
   用途：modules 下各模块的 views/front 目录（主站 /about /products … 与 CMS 门户 /cms/…）
   引入点：各 front 视图 <head> 内，在页内 <style> 之前

   ⚠️ 与后台 tokens.css 的关系
   1. 这是独立文件，不是 tokens.css 的子集 —— 后台 tokens.css 含
      --sz-sidebar / --h-btn 等后台专用变量，前台用不到。
   2. 不要把后台 style.css / components.css 引入前台 —— 其全局类名
      （.card /.btn /.table）会污染官网样式。
   3. 值刻意与后台对齐（如 --f-primary 与后台 --c-primary 同为 #1890FF），
      便于将来若要做「前台也跟随租户品牌色」时只覆盖一个变量。

   ⚠️ 前台不做多租户换肤（平台级品牌配置控制），主色固定。
   ========================================================================== */

:root {
    /* ---------- 主色（蓝） ---------- */
    --f-primary:          #1890FF;   /* 主色（与后台 --c-primary 同值） */
    --f-primary-dark:     #096DD9;   /* 深一档：渐变尾、hover */
    --f-primary-deep:     #1976D2;   /* Material 蓝：次级按钮/链接 */
    --f-primary-darker:   #1565C0;   /* 更深：hover */
    --f-primary-light:    #E6F7FF;   /* 极浅蓝底 */
    --f-primary-lighter:  #F0F5FF;   /* 更浅蓝底 */
    --f-primary-soft:     #E3F2FD;   /* 浅蓝底（招聘标签） */

    /* ---------- 中性色（文字） ---------- */
    --f-text:             #333333;   /* 主文字 */
    --f-text-2:           #666666;   /* 次要文字、说明 */
    --f-text-3:           #999999;   /* 弱文字、日期、占位 */
    --f-text-4:           #AAAAAA;   /* 更弱 */
    --f-heading:          #222222;   /* 标题（比正文更深） */
    --f-text-deep:        #1A1A1A;   /* 最深（pages） */

    /* ---------- 中性色（面/线） ---------- */
    --f-surface:          #FFFFFF;   /* 卡片/面板底 */
    --f-surface-sub:      #F5F7FA;   /* 区块交替底（与后台 --c-bg 同值） */
    --f-surface-alt:      #F9FAFB;   /* 次级底（与后台 --c-surface-hover 同值） */
    --f-surface-muted:    #FAFAFA;   /* 更淡底 */
    --f-border:           #E8E8E8;   /* 常规边框 */
    --f-border-2:         #D9D9D9;   /* 表单控件边框 */
    --f-border-light:     #F0F0F0;   /* 弱分隔线 */
    --f-border-soft:      #EEEEEE;   /* 弱边框 */

    /* ---------- 深色区块（stats / footer） ---------- */
    --f-dark:             #001529;   /* 深蓝黑（与后台 --c-sidebar 同族） */
    --f-dark-2:           #1A1A2E;   /* 深紫黑（页脚变体） */
    --f-on-dark:          #FFFFFF;   /* 深底上的文字 */
    --f-on-dark-2:        #999999;   /* 深底上的次要文字 */
    --f-on-dark-3:        #AAAAAA;   /* 深底上的弱文字 */

    /* ---------- 语义色 ---------- */
    --f-success:          #52C41A;
    --f-success-deep:     #389E0D;
    --f-warning:          #FAAD14;
    --f-warning-deep:     #D48806;
    --f-warning-bg:       #FFF7E6;
    --f-danger:           #FF4D4F;
    --f-danger-2:         #F44336;

    /* ---------- 装饰渐变（有意保留的视觉） ---------- */
    --f-grad-primary:     linear-gradient(135deg, #1890FF 0%, #096DD9 100%);  /* Hero */
    --f-grad-card:        linear-gradient(135deg, #667EEA, #764BA2);          /* 卡片占位封面 */

    /* ---------- 阴影 ---------- */
    --f-shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.08);
    --f-shadow-card:      0 2px 12px rgba(0, 0, 0, 0.06);
    --f-shadow-hover:     0 8px 24px rgba(0, 0, 0, 0.12);
    --f-shadow-primary:   0 4px 16px rgba(24, 144, 255, 0.15);

    /* ---------- 圆角 ---------- */
    --f-r-sm:             4px;       /* 按钮、输入框 */
    --f-r:                8px;       /* 卡片 */
    --f-r-lg:             12px;      /* 大卡片 */

    /* ---------- 字体 ---------- */
    --f-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
              'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
