/* ==========================================================================
   深色科技风设计系统 —— 设计令牌
   发光效果统一用 box-shadow 多层叠加实现，不用 backdrop-filter
   （后者在移动端与低端 GPU 上开销大，且与霓虹描边叠加后易掉帧）
   ========================================================================== */

:root {
  /* --- 背景层级：从最深底到浮起面板，逐级提亮 ---
     取值经 WCAG 对比度实测校准：此前 bg-base #070b12 / bg-sunken #05080e
     已接近纯黑（相对亮度仅 0.003），叠加偏暗的次级文字色后，小字号提示
     几乎不可读。此处整体提亮约 2 倍，既脱离"死黑"、又保留深色霓虹风格，
     四层之间的明暗差仍清晰可辨，不会糊成一整块深色。 */
  --bg-base: #0d1420;        /* 页面最底层 */
  --bg-sunken: #090f18;      /* 内凹区（代码块、输入框） */
  --bg-card: #151e2e;        /* 卡片/面板 */
  --bg-elevated: #1d2941;    /* 悬停、激活态 */
  --bg-overlay: rgba(13, 20, 32, 0.92); /* 遮罩层（与 bg-base 同步，勿写死旧值） */

  /* --- 霓虹强调色 --- */
  --neon-cyan: #00f0ff;      /* 主强调：链接、当前态、L4-L6 等级 */
  --neon-purple: #a855f7;    /* 次强调：加精、L7-L8 等级 */
  --neon-pink: #f472b6;      /* 点缀：收藏、标签 */
  --neon-green: #34d399;     /* 成功态 */
  --neon-amber: #fbbf24;     /* 警示、置顶 */
  --neon-red: #ef4444;       /* 错误、封禁、L9-L10 高等级 */

  /* --- 文字层级 ---
     每档都按"最暗背景 bg-elevated 上仍 >=4.5:1"校准（WCAG AA 小字号要求）：
       primary 12.92 · secondary 8.05 · muted 5.15 · disabled 4.35
     此前 muted #64748b 最差仅 3.54、disabled #475569 仅 2.23，而 muted 被
     70+ 处样式与 110+ 处模板用于 form-hint、meta 等【小字号】文本，
     是"有些地方看不清"的主因。四档之间仍保持 >=1.18 的明暗差，层次不糊。 */
  --text-primary: #eef2f7;
  --text-secondary: #b6c2d2;
  --text-muted: #8d9bb0;
  /* 仅用于【真正不可交互】的禁用态控件。
     注意：输入框占位符、ICP 备案号、楼层号、每日上限提示等【需要被阅读】的
     小字不在此列——它们应使用 --text-muted，否则 10-11px 文本几乎不可读。 */
  --text-disabled: #7d8ea6;
  --text-on-neon: #04121a;   /* 霓虹底上的文字，必须够深才可读 */

  /* --- 边框与分隔 --- */
  --border-subtle: rgba(148, 163, 184, 0.12);
  --border-default: rgba(148, 163, 184, 0.2);
  --border-strong: rgba(0, 240, 255, 0.35);

  /* --- 发光强度梯度：等级越高辉光越强 --- */
  --glow-none: none;
  --glow-xs: 0 0 4px rgba(148, 163, 184, 0.25);
  --glow-sm: 0 0 6px rgba(0, 240, 255, 0.35);
  --glow-md: 0 0 10px rgba(0, 240, 255, 0.45), 0 0 20px rgba(0, 240, 255, 0.15);
  --glow-lg: 0 0 14px rgba(0, 240, 255, 0.55), 0 0 32px rgba(0, 240, 255, 0.22);
  --glow-xl: 0 0 18px rgba(0, 240, 255, 0.6), 0 0 44px rgba(0, 240, 255, 0.28);

  /* --- 尺寸尺度 --- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 21px;
  --font-2xl: 27px;

  /* 中文优先用系统字体，避免额外下载 webfont 拖慢首屏 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  --line-height: 1.7;
  --header-h: 58px;
  --content-max: 1180px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
}

/* --- 十阶等级徽章配色：每阶独立色与辉光强度 ---
   每阶有两个色令牌，职责分开（原因见 base.css 的 .rank-badge 注释）：
     --badge-color  识别色：边框、药丸底（14% 混入父背景）、辉光、大字号等级序号。
                    保持原值不变，十阶的色彩识别度与辉光梯度完全不受本次调整影响。
     --badge-text   文字色：药丸内「Lv.N + 等级名」等【小字号】文本。
                    取同色相的最小提亮版，各阶色相偏移实测 <=1.0 度，肉眼不可辨。

   --badge-text 的取值按【含内阴影】的真实衬底校准，不能只算 14% 药丸底：
   .rank-badge 另叠了 `inset 0 0 6px` 的 20% 同色内阴影，会把衬底再提亮一档，
   使对比度下降（L1 衬底由 #202835 变 #37414f）。文字位于药丸中心，
   6px 模糊的内阴影在此处约贡献一半强度，故按「半程模型」取值：
   实测 center 最低 5.05:1、half 最低 4.61:1，十阶均高于小字号所需的 4.5:1。
   L3/L4/L6/L9 原色即达标，两值相同。 */
/* L1-L3 灰白微光：新人阶段，低调 */
.badge-l1  { --badge-color: #94a3b8; --badge-text: #a7b4c5; --badge-glow: 0 0 3px rgba(148,163,184,0.2); }
.badge-l2  { --badge-color: #a8b3c7; --badge-text: #afb9cb; --badge-glow: 0 0 4px rgba(168,179,199,0.28); }
.badge-l3  { --badge-color: #cbd5e1; --badge-text: #cbd5e1; --badge-glow: 0 0 5px rgba(203,213,225,0.35); }
/* L4-L6 青蓝渐强：开始发光 */
.badge-l4  { --badge-color: #22d3ee; --badge-text: #22d3ee; --badge-glow: 0 0 6px rgba(34,211,238,0.45); }
.badge-l5  { --badge-color: #06b6d4; --badge-text: #35c4dc; --badge-glow: 0 0 8px rgba(6,182,212,0.5), 0 0 16px rgba(6,182,212,0.2); }
.badge-l6  { --badge-color: #00f0ff; --badge-text: #00f0ff; --badge-glow: 0 0 10px rgba(0,240,255,0.6), 0 0 22px rgba(0,240,255,0.25); }
/* L7-L8 紫金双色：高阶稀缺。这两阶原色最饱和、药丸底也最暗，提亮量最大 */
.badge-l7  { --badge-color: #a855f7; --badge-text: #c68ffa; --badge-glow: 0 0 10px rgba(168,85,247,0.6), 0 0 24px rgba(168,85,247,0.28); }
.badge-l8  { --badge-color: #c084fc; --badge-text: #cd9dfd; --badge-glow: 0 0 12px rgba(192,132,252,0.65), 0 0 28px rgba(192,132,252,0.32); }
/* L9-L10 金红 + 脉冲动画：至高荣誉 */
.badge-l9  { --badge-color: #fbbf24; --badge-text: #fbbf24; --badge-glow: 0 0 12px rgba(251,191,36,0.7), 0 0 30px rgba(251,191,36,0.35); }
.badge-l10 { --badge-color: #ef4444; --badge-text: #f48080; --badge-glow: 0 0 14px rgba(239,68,68,0.75), 0 0 36px rgba(239,68,68,0.4); }

/* --- 语义色别名，便于业务代码引用 --- */
.color-pinned   { --accent: var(--neon-amber); }
.color-featured { --accent: var(--neon-purple); }
.color-locked   { --accent: var(--neon-red); }