/* ==========================================================================
   variables.css —— 全局设计令牌（Design Tokens）
   作用：统一整套系统（落地页/后台/学员端）的颜色、字号、间距、圆角、阴影
   二次修改说明：改这一个文件即可全局换肤，无需动组件代码
   ========================================================================== */

:root {
  /* ---------- 品牌主色（教育行业主色调：信任蓝 + 行动橙） ---------- */
  --c-primary:        #2563eb;   /* 主色：按钮、链接、强调 */
  --c-primary-dark:   #1d4ed8;   /* 主色深：hover 态 */
  --c-primary-light:  #dbeafe;   /* 主色浅：背景块、标签底 */
  --c-primary-ghost:  rgba(37, 99, 235, .08); /* 主色透明：悬浮底纹 */

  --c-accent:         #f97316;   /* 强调色/转化色：报名按钮、倒计时 */
  --c-accent-dark:    #ea580c;
  --c-accent-light:   #ffedd5;

  /* ---------- 语义色 ---------- */
  --c-success:        #16a34a;
  --c-success-light:  #dcfce7;
  --c-warning:        #f59e0b;
  --c-warning-light:  #fef3c7;
  --c-danger:         #dc2626;
  --c-danger-light:   #fee2e2;
  --c-info:           #0891b2;
  --c-info-light:     #cffafe;

  /* ---------- 中性色（文字/边框/背景） ---------- */
  --c-text:           #0f172a;   /* 主文字 */
  --c-text-sub:       #475569;   /* 次要文字 */
  --c-text-muted:     #94a3b8;   /* 弱化文字、占位符 */
  --c-text-invert:    #ffffff;   /* 反白文字 */

  --c-border:         #e2e8f0;   /* 常规边框 */
  --c-border-strong:  #cbd5e1;   /* 强边框、分割线 */

  --c-bg:             #ffffff;   /* 卡片/主体背景 */
  --c-bg-soft:        #f8fafc;   /* 页面底色 */
  --c-bg-mute:        #f1f5f9;   /* 灰底块 */
  --c-bg-dark:        #0f172a;   /* 深色区块（页脚等） */

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica,
               Arial, "Hiragino Sans GB", sans-serif;
  --font-num:  "DIN Alternate", "Helvetica Neue", Arial, sans-serif; /* 数字专用，用于数据看板 */

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  46px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  --lh-tight: 1.25;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* ---------- 间距（8px 栅格体系） ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

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

  /* ---------- 阴影 ---------- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-sm: 0 2px 8px rgba(15, 23, 42, .08);
  --sh-md: 0 6px 20px rgba(15, 23, 42, .10);
  --sh-lg: 0 12px 32px rgba(15, 23, 42, .14);
  --sh-primary: 0 6px 18px rgba(37, 99, 235, .32);
  --sh-accent:  0 6px 18px rgba(249, 115, 22, .34);

  /* ---------- 层级 z-index（统一管理，避免打架） ---------- */
  --z-header:   1000;
  --z-dropdown: 1100;
  --z-mask:     1200;
  --z-modal:    1300;
  --z-toast:    1400;
  --z-float:    1500;  /* 悬浮咨询球 / 底部固定条 */

  /* ---------- 动效 ---------- */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .4s cubic-bezier(.4, 0, .2, 1);

  /* ---------- 布局 ---------- */
  --container: 1200px;      /* 内容最大宽度 */
  --header-h:  64px;        /* 顶部导航高度 */
  --mobile-bar-h: 60px;     /* 移动端底部固定条高度 */

  /* ---------- 补充色阶（渐变/图标/深色播放器专用） ---------- */
  --c-primary-soft:   #60a5fa;   /* 主色浅亮：渐变右端 */
  --c-primary-vivid:  #3b82f6;   /* 主色鲜亮：渐变中段 */
  --c-primary-deep:   #1e40af;   /* 主色深邃：渐变左端、深底标签 */
  --c-primary-pale:   #eff6ff;   /* 主色极浅：未读高亮底 */
  --c-primary-tint:   #93c5fd;   /* 主色中浅：深色底上的选中文字 */

  --c-accent-soft:    #fb923c;   /* 强调色浅：渐变左端 */
  --c-success-soft:   #4ade80;   /* 成功色浅：图标/在线点 */
  --c-success-vivid:  #22c55e;   /* 成功色亮：状态小圆点 */
  --c-success-deep:   #166534;   /* 成功色深：深色文字 */
  --c-danger-soft:    #f87171;   /* 危险色浅：图标 */
  --c-danger-vivid:   #ef4444;   /* 危险色亮：状态小圆点 */
  --c-danger-deep:    #991b1b;   /* 危险色深：深色文字 */
  --c-danger-darker:  #b91c1c;   /* 危险色更深：hover */
  --c-warning-soft:   #fbbf24;   /* 警告色浅：星级/图标 */
  --c-warning-pale:   #fde68a;   /* 警告色极浅：深底图标 */
  --c-warning-dark:   #d97706;   /* 警告色深：图标前景 */
  --c-warning-deep:   #92400e;   /* 警告色更深：深色文字 */
  --c-warning-text:   #b45309;   /* 警告标签文字色 */
  --c-info-dark:      #0e7490;   /* 信息色深：hover */
  --c-teal:           #0ea5a4;   /* 青绿：强调区块渐变左端 */
  --c-teal-dark:      #0d9488;   /* 青绿深：登录页渐变右端 */

  /* 功能入口图标配色（浅底 + 深字，成对使用） */
  --c-icon-sky-bg:    #e0f2fe;  --c-icon-sky:    #0284c7;   /* 天蓝：课程 */
  --c-icon-mint-bg:   #d1fae5;  --c-icon-mint:   #059669;   /* 薄荷：证书 */
  --c-icon-violet-bg: #f3e8ff;  --c-icon-violet: #7c3aed;   /* 紫罗兰：更多/项目 */
  --c-icon-purple:    #9333ea;                              /* 紫：后台快捷入口 */

  /* 输入框错误态（登录页） */
  --c-danger-pale:    #fef2f2;   /* 错误提示底 */
  --c-danger-border:  #fecaca;   /* 错误提示边框 */

  /* 第三方支付品牌色（官方规范色，不随主题变） */
  --c-brand-wechat:   #07c160;   /* 微信绿 */
  --c-brand-alipay:   #1677ff;   /* 支付宝蓝 */

  --c-skeleton:       #e9eef5;   /* 骨架屏高光条 */
  --c-black:          #000000;   /* 纯黑：视频播放器底 */

  /* 证书专用色（纸质边框 + 钢印红） */
  --c-cert-paper:     #f5f0e8;   /* 证书纸色边框 */
  --c-cert-seal:      #c0392b;   /* 证书钢印红 */

  /* 深色学习页（study.html 播放器侧边栏） */
  --c-dark-bg:        #0f172a;   /* 深色区底 */
  --c-dark-surface:   #1e293b;   /* 深色卡片面 */
  --c-dark-border:    #334155;   /* 深色分割线 */
  --c-dark-text:      #e2e8f0;   /* 深色底主文字 */
  --c-dark-text-sub:  #94a3b8;   /* 深色底次要文字 */
  --c-dark-text-mute: #64748b;   /* 深色底弱化文字 */

  /* ======================================================================
     兼容别名（Legacy Aliases）
     ----------------------------------------------------------------------
     早期 landing.css / student.css / admin.css 写的是 --color-xxx 命名，
     而本文件统一为 --c-xxx。为避免改名造成大面积回归，这里做一层映射：
     旧名全部指向新令牌，改颜色依然只改上面一处。
     （之前这批 --color-* 未定义，实际是失效的，此次一并修复）
     ==================================================================== */
  --color-primary:        var(--c-primary);
  --color-primary-dark:   var(--c-primary-dark);
  --color-primary-light:  var(--c-primary-light);
  --color-secondary:      var(--c-info);
  --color-secondary-light:var(--c-info-light);
  --color-accent:         var(--c-accent);
  --color-accent-dark:    var(--c-accent-dark);

  --color-success:        var(--c-success);
  --color-success-light:  var(--c-success-light);
  --color-warning:        var(--c-warning);
  --color-warning-light:  var(--c-warning-light);
  --color-error:          var(--c-danger);
  --color-error-light:    var(--c-danger-light);
  --color-info:           var(--c-info);
  --color-info-light:     var(--c-info-light);

  --color-text-main:      var(--c-text);
  --color-text-secondary: var(--c-text-sub);
  --color-text-tertiary:  var(--c-text-muted);
  --color-text-invert:    var(--c-text-invert);

  --color-border:         var(--c-border);
  --color-border-light:   var(--c-border);
  --color-border-strong:  var(--c-border-strong);

  --color-bg:             var(--c-bg);
  --color-bg-secondary:   var(--c-bg-soft);
  --color-bg-tertiary:    var(--c-bg-mute);
  --color-bg-dark:        var(--c-bg-dark);
}

/* ---------- 暗色模式预留（后台端可切换，落地页默认不启用） ---------- */
[data-theme="dark"] {
  --c-text:        #e2e8f0;
  --c-text-sub:    #94a3b8;
  --c-text-muted:  #64748b;
  --c-border:      #1e293b;
  --c-border-strong:#334155;
  --c-bg:          #0f172a;
  --c-bg-soft:     #020617;
  --c-bg-mute:     #1e293b;
}