/* =======================================================
 * theme.css · 设计变量
 * =======================================================
 *
 * 【作用】
 *   全站所有视觉参数的唯一来源。
 *   改颜色、改字号、改间距，只改这个文件。
 *
 * 【为什么用 CSS 变量？】
 *   1. 一处修改，全站生效
 *   2. 语义化命名，看名字就知道用途
 *   3. 将来想换主题（比如白底版），改这里即可
 *
 * 【命名规则】
 *   --bg-N       背景色，N 越大越浅
 *   --fg-N       前景/文字色，N 越大越暗
 *   --gold-N     品牌金色，N=0 主色，N=1 更亮
 *   --border-N   边框，N 越大越明显
 *   --r-N        圆角半径
 *   --sp-N       间距（基准 4px）
 *   --fs-N       字号
 *   --lh-N       行高
 *
 * 【修改须知】
 *   ⚠️ 变量名不要改，改了全站引用全断
 *   ⚠️ 新增变量请放在对应分组内，保持整齐
 *   ⚠️ 数值可以随便调，只要语义没变
 * ======================================================= */

:root {

  /* =====================================================
   * 一、背景色
   * =====================================================
   * 深空主题的核心。
   * 数值越深的用于大面积（页面底），越浅的用于浮起元素（卡片）。
   * 所有背景色都偏冷（蓝调），营造太空感。
   * --------------------------------------------------- */

  --bg-0: #05070d;   /* 页面最底层。比纯黑柔和，带极淡的蓝 */
  --bg-1: #0a0f1a;   /* 卡片、弹层背景。比 bg-0 亮一档，形成层次 */
  --bg-2: #0f1626;   /* 悬停/选中态。按钮或列表项 hover 时用 */


  /* =====================================================
   * 二、文字色
   * =====================================================
   * 四级层次，数字越大越暗。
   * 注意：深底上的浅字，对比度不能低于 4.5:1，否则看不清。
   * --------------------------------------------------- */

  --fg-0: #e8eef7;   /* 主文字。句子正文、标题用，接近白但带蓝 */
  --fg-1: #a8b8cc;   /* 次文字。说明文字、段落正文 */
  --fg-2: #7a8ba3;   /* 注释。时间戳、出处、辅助信息 */
  --fg-3: #4a5666;   /* 禁用态。不可点击的按钮、失效的输入框 */


  /* =====================================================
   * 三、品牌金色
   * =====================================================
   * 拾光集的主色。来自 logo 上的金色星星。
   * 用途：按钮、徽章、活跃态、强调数字。
   *
   * ⚠️ 金色底上不能放白字，对比度太低。
   *    金色按钮的文字要用深色（见 components.css）。
   * --------------------------------------------------- */

  --gold-0: #f5c542;                       /* 主金色。按钮、图标、强调 */
  --gold-1: #ffd700;                       /* 亮金色。hover 态，比主色更亮 */
  --gold-dim: #8a6d1f;                     /* 暗金色。细边框、次要装饰 */
  --gold-glow: rgba(245, 197, 66, 0.15);   /* 金色光晕。hover 背景、发光效果 */


  /* =====================================================
   * 四、语义色
   * =====================================================
   * 表达状态的通用颜色，不参与品牌识别。
   * 只在特定场景用，别滥用。
   * --------------------------------------------------- */

  --cyan: #4ecdc4;    /* 成功提示、可点击链接 */
  --warn: #ff9f43;    /* 警告。橙色调，跟金色区分开 */
  --danger: #e63946;  /* 危险。仅用于删除、错误提示，不做品牌色 */


  /* =====================================================
   * 五、边框
   * =====================================================
   * 统一用半透明白，不用固定灰色。
   * 好处：深底上任何地方都自动协调，不用为不同背景配不同灰。
   *
   * 数字越大越明显：
   *   0 → 几乎看不见，只做分隔
   *   1 → 常规卡片边框
   *   2 → 输入框、需要强调的元素
   * --------------------------------------------------- */

  --border-0: rgba(255, 255, 255, 0.06);   /* 极淡。列表分隔线 */
  --border-1: rgba(255, 255, 255, 0.10);   /* 常规。卡片边框 */
  --border-2: rgba(255, 255, 255, 0.16);   /* 强调。输入框、可聚焦元素 */
  --border-gold: rgba(245, 197, 66, 0.30); /* 金色边框。主按钮、装饰线 */


  /* =====================================================
   * 六、圆角
   * =====================================================
   * 4 档，按元素大小选择。
   * 越大的元素圆角越大，视觉上更自然。
   * --------------------------------------------------- */

  --r-sm: 4px;      /* 小元件。徽章、标签、代码块 */
  --r-md: 8px;      /* 中元件。按钮、输入框 */
  --r-lg: 10px;     /* 大元件。卡片、弹层、面板 */
  --r-pill: 999px;  /* 胶囊形。状态条、圆角按钮 */


  /* =====================================================
   * 七、间距
   * =====================================================
   * 基准单位 4px，所有间距都是 4 的倍数。
   * 为什么用 4？能被 2 整除，缩放不产生小数像素。
   * --------------------------------------------------- */

  --sp-1: 4px;      /* 极小。图标与文字之间 */
  --sp-2: 8px;      /* 小。元素内部紧凑间距 */
  --sp-3: 12px;     /* 中。按钮之间的间距 */
  --sp-4: 16px;     /* 中偏大。卡片内边距 */
  --sp-5: 20px;     /* 大。容器左右边距 */
  --sp-6: 24px;     /* 更大。卡片内边距、段落间距 */
  --sp-8: 32px;     /* 大间隔。区块与区块之间 */
  --sp-10: 40px;    /* 最大。页面顶底留白 */


  /* =====================================================
   * 八、字号
   * =====================================================
   * 7 档，从角标到页面主标题。
   * 移动端正文最小 14px，再小就看不清了。
   * --------------------------------------------------- */

  --fs-xs: 11px;    /* 最小。角标、徽章文字 */
  --fs-sm: 12px;    /* 小。注释、辅助信息 */
  --fs-md: 14px;    /* 中。按钮、输入框、次要正文 */
  --fs-base: 15px;  /* 正文默认。段落、描述 */
  --fs-lg: 17px;    /* 大。小标题、品牌名 */
  --fs-xl: 22px;    /* 更大。句子正文（展示用） */
  --fs-2xl: 28px;   /* 最大。页面主标题 */


  /* =====================================================
   * 九、字体族
   * =====================================================
   * 不引外部字体（中文字库太大），只用系统字体。
   * 字体栈从前到后依次尝试，最后一个必须是无衬线兜底。
   * --------------------------------------------------- */

  /* 无衬线：正文、标题。macOS 用苹方，Windows 用微软雅黑 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", sans-serif;

  /* 等宽：数字、ID、代码。让"123"看起来对齐 */
  --font-mono: ui-monospace, Menlo, Consolas, monospace;


  /* =====================================================
   * 十、行高
   * =====================================================
   * 3 档。中文比英文需要更大行高，否则挤。
   * --------------------------------------------------- */

  --lh-tight: 1.4;   /* 紧。标题 */
  --lh-base: 1.6;    /* 常规。正文 */
  --lh-loose: 1.8;   /* 松。句子展示，需要呼吸感 */
}