/* ==========================================================================
   圆圈网 · 设计令牌 Design Tokens
   --------------------------------------------------------------------------
   所有颜色 / 字体 / 字号 / 行高 / 间距 / 圆角 / 阴影 集中在这里定义。
   改这一个文件，首页 + 列表页 + 详情页 同步生效。
   用法：<link rel="stylesheet" href="assets/tokens.css">
   ========================================================================== */

:root{
  /* ---------- 1. 品牌色：取样自 logo2024.png 三个圆环 ----------
     用色纪律（改版后统一遵守，比色值本身更重要）
       蓝  = 主导色：行动、链接、激活、信息
       绿  = 肯定色：完成、免费、推荐、卖点对勾
       红  = 仅警示：错误、危险操作、即将到期。禁止用于装饰 / 营销 / 主按钮
     页面只跑前两色，红出现即代表"这里有事要处理"。
     改色只改这里；--brand-* 与 --rgb-* 必须同步改，否则光晕会留在旧色。 */
  --brand-blue:#5FBDEE;      /* 环一 · 主导色 */
  --brand-blue-lt:#8AD3F6;   /* 亮阶：按钮渐变起点 / 深底文字 */
  --brand-blue-dp:#37A6DE;   /* 深阶：按钮渐变终点 / 描边 */
  --brand-blue-dp2:#2A8FBF;  /* 更深阶：按钮 hover */
  --on-brand:#062A3C;        /* 品牌蓝底上的文字（7.1:1） */
  --on-lime:#33500A;         /* 柠檬绿底上的文字（6.4:1） */
  --brand-lime:#CCE373;      /* 环二 · 肯定色 */
  --brand-red:#EC1A40;       /* 环三 · LOGO 原红：只用于品牌本体装饰（Hero 三环 / 页脚色点），不进按钮与营销 */
  /* 环三红不进语义色表：页面装饰层禁用，警示统一走下面的 --danger 组
     （--danger 比原品牌红更深，白字 5.6:1 过 AA；原色当按钮底只有 4.4:1 擦边不过） */

  /* RGB 通道，供 rgba() 叠加透明度 */
  --rgb-blue:95,189,238;
  --rgb-lime:204,227,115;
  --rgb-red:236,26,64;

  /* ---------- 2. 深色层：导航 / Hero / CTA / 页脚 ---------- */
  --ink:#0A1320;             /* 主深墨，也是品牌色带的基底 */
  --ink-2:#101D2F;
  --ink-3:#16263A;
  --ink-foot:#070D16;
  /* 页脚专用（比正文更深一档） */
  --foot-text:#6B7C91;
  --foot-soft:#5E7189;
  --foot-dim:#4E5F73;
  --foot-head:#94A6BA;
  --foot-brand:#E4EDF7;
  --on-ink:#E9EFF7;          /* 深底主文字 */
  --on-ink-2:#B9C9DC;        /* 深底正文 */
  --on-ink-3:#93A6BD;        /* 深底次要 */
  --on-ink-4:#5E7590;        /* 深底辅助 / 计数 */
  --brand-blue-soft:#A8DFFA; /* 深底上的浅蓝强调 */
  --cover:#16232F;           /* 封面 / 图片占位底 */
  --cover-deep:#12212F;      /* 封面占位渐变的深端 */
  --cover-2:#24405C;         /* 封面占位渐变亮端 */

  /* ---------- 3. 浅色层：正文区 ---------- */
  --paper:#F0F3F7;           /* 页面底色（冷灰白，与 --ink 同色系） */
  --surface:#FFFFFF;         /* 卡片 / 面板 */
  --surface-2:#E9EEF4;       /* 次级填充 */
  --surface-3:#FAFBFD;       /* 浅层填充（表头、hover） */
  --line:#E1E7EE;            /* 分隔线 */
  --line-2:#D0D8E2;          /* 强分隔 / 虚线 */
  --line-ink:#2A3A52;        /* 深底描边 */
  --text:#0E1621;            /* 正文主色 */
  --text-2:#4A5667;          /* 正文次色 */
  --text-3:#7B8797;          /* 辅助 / 计数 */

  /* ---------- 4. 语义色（浅底可用，均满足 AA 对比度） ---------- */
  --link:#14668F;
  --link-hover:#0E4A68;
  --ok:#4F6B12;
  /* 警示组：红只在这里出场 */
  --danger:#C4122F;          /* 错误文字 / 危险按钮底 */
  --danger-soft:#D9455F;     /* 错误描边 */
  --danger-bg:#FDECEF;       /* 错误浅底 */
  --danger-line:#F3C7D1;     /* 错误弱描边 */
  --danger-hover:#A50F28;    /* 危险按钮 hover */

  --tint-blue:#E8F4FC;
  --tint-lime:#F0F7DB;
  /* 弱底描边 */
  --tint-blue-2:#CFE9F7;
  --tint-blue-3:#F2F8FD;     /* 极浅蓝填充（付费墙底） */
  --on-cover-lock:#C6E8FA;   /* 封面锁标文字 */
  --tint-lime-2:#E2EEC4;

  /* ---------- 5. 字体 ---------- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",
              Consolas,monospace;

  /* ---------- 6. 字号梯度（正文 13.5 / 标题 23 / 主标题 34-42） ---------- */
  --fs-2xs:10.5px;   /* 角标、极小说明 */
  --fs-xs:11.5px;    /* 计数、meta */
  --fs-sm:12.5px;    /* 卡片摘要、页脚 */
  --fs-base:13.5px;  /* 正文默认 */
  --fs-md:15px;      /* 导航、卡片标题 */
  --fs-lg:16.5px;    /* 课程标题、大按钮 */
  --fs-xl:19px;      /* 小标题 */
  --fs-2xl:23px;     /* 区块标题 */
  --fs-3xl:28px;     /* 页面主标题（移动端） */
  --fs-4xl:34px;     /* 页面主标题 */
  --fs-5xl:42px;     /* 首页 Hero */

  /* ---------- 7. 行高 ---------- */
  --lh-tight:1.2;
  --lh-snug:1.42;
  --lh-body:1.62;
  --lh-loose:1.75;

  /* ---------- 8. 间距梯度 ---------- */
  --gap-2xs:4px;
  --gap-xs:6px;
  --gap-sm:8px;
  --gap-md:12px;
  --gap-lg:16px;
  --gap-xl:22px;
  --gap-2xl:28px;
  --gap-3xl:36px;
  --gap-4xl:46px;
  --gap-5xl:60px;

  /* ---------- 9. 圆角 ---------- */
  --r-xs:5px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;

  /* ---------- 10. 阴影 ---------- */
  --sh-1:0 1px 2px rgba(14,22,33,.04);
  --sh-2:0 2px 4px rgba(14,22,33,.04), 0 12px 28px -16px rgba(14,22,33,.18);
  --sh-3:0 4px 8px rgba(14,22,33,.05), 0 22px 48px -24px rgba(14,22,33,.26);

  /* ---------- 11. 布局 ---------- */
  --wrap-max:1180px;
  --wrap-pad:24px;
  --nav-h:66px;

  /* ---------- 12. 动效 ---------- */
  --t-fast:.16s ease;
  --t-base:.24s ease;

  /* ---------- 13. 深色区氛围光（首页 Hero / 列表页头 / 详情页头共用） ----------
     左蓝右绿，中间靠横向渐变过渡成青色。
     只用两团聚光时衰减太快，中间会塌回纯黑，所以底下垫一层线性氛围。 */
  --glow-ambient:
    linear-gradient(102deg,
      rgba(var(--rgb-blue),.20) 0%,
      rgba(var(--rgb-blue),.09) 30%,
      rgba(var(--rgb-lime),.07) 64%,
      rgba(var(--rgb-lime),.19) 100%),
    radial-gradient(92% 118% at -8% -22%,  rgba(var(--rgb-blue),.44), transparent 62%),
    radial-gradient(92% 118% at 108% -22%, rgba(var(--rgb-lime),.30), transparent 62%),
    radial-gradient(120% 40% at 50% 128%,  rgba(var(--rgb-blue),.13), transparent 70%);

  /* ---------- 14. 品牌色带：蓝 → 绿两段硬分割 ----------
     不做渐变：品牌只跑两色，硬分割保留"独立圆环"的节奏感。
     原三色版（蓝/绿/红）会让红在每个区块重复出现，视觉噪音太大。 */
  --spectrum:linear-gradient(90deg,
    var(--brand-blue) 0 50%,
    var(--brand-lime) 50% 100%);
}

/* 移动端断点下调导航高度与页面边距 */
@media (max-width:680px){
  :root{
    --nav-h:58px;
    --wrap-pad:18px;
    --fs-5xl:28px;
    --fs-4xl:27px;
    --fs-3xl:24px;
    --fs-2xl:19px;
  }
}