/* ============================================================
   主题包：cyber（默认）
   这里是全站唯一允许出现颜色字面量的地方之一（另一个是主题自己的
   Background.tsx）。页面与组件的 CSS 一律只消费下面的变量。
   ============================================================ */

:root[data-theme='cyber'] {
  /* 让原生控件（滚动条、select、日期选择器）跟随主题 */
  color-scheme: dark;

  /* ---------- L1 原始色板（只在本文件内被引用） ---------- */
  --c-ink-900: #0a0a0f;
  --c-ink-800: #12121a;
  --c-ink-700: #181825;
  --c-ink-600: #1e1e2a;
  --c-green-500: #2ddc7a;
  --c-green-700: #1e7e52;
  --c-red-400: #ff6b6b;
  --c-paper-100: #e8ecef;
  --c-paper-400: #8b95a0;
  --c-paper-600: #5a6570;

  /* ---------- L2 语义：背景 ---------- */
  --bg-base: var(--c-ink-900);        /* 页面底色 */
  --bg-raised: var(--c-ink-800);      /* 次级面板 */
  --bg-elevated: var(--c-ink-700);    /* 卡片 */
  --bg-hover: var(--c-ink-600);       /* 卡片 hover */
  --bg-overlay: rgba(16, 18, 26, 0.72); /* 毛玻璃遮罩 */

  /* ---------- L2 语义：文字 ---------- */
  --text-1: var(--c-paper-100);
  --text-2: var(--c-paper-400);
  --text-3: var(--c-paper-600);
  --text-inverse: var(--c-ink-900);
  /* 暗底上的半透明白字（次要信息/页脚），浅色主题里换成同强度的黑字 */
  --text-a35: rgba(255, 255, 255, 0.35);
  --text-a45: rgba(255, 255, 255, 0.45);
  --text-a60: rgba(255, 255, 255, 0.6);
  --link-hover: #bab3f1;

  /* ---------- L2 语义：描边与叠加层 ----------
     暗色主题靠"白色叠加"提亮，换成浅色主题时这组值整体换向即可 */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --border-emphasis: rgba(255, 255, 255, 0.12);
  --border-divider: rgba(255, 255, 255, 0.18);
  --surface-1: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.06);
  --surface-4: rgba(255, 255, 255, 0.08);
  --surface-5: rgba(255, 255, 255, 0.1);

  /* ---------- L2 语义：强调色 ----------
     透明度档位由 --accent 派生，换主题只需改上面一个值 */
  --accent: var(--c-green-500);
  --accent-dim: var(--c-green-700);
  --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-a10: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-a12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-a15: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-a30: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-a35: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-a40: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-a50: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-contrast: var(--c-ink-900); /* 强调色底上的文字 */

  /* ---------- L2 语义：状态色 ---------- */
  --danger: var(--c-red-400);
  --success: var(--accent);

  /* ---------- L2 语义：结构性参数 ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --border-width: 1px;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 20px var(--shadow-color);
  --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* ---------- L2 语义：字体与排版 ---------- */
  --font-pixel: 'Press Start 2P', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Press Start 2P', 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: var(--font-pixel);
  --letter-spacing: 0.06em;
  --line-height: 1.7;

  /* ============================================================
     迁移期兼容别名：旧代码里的 --bg-primary 等仍可直接使用，
     值全部指向新语义层，改主题时自动跟随。
     迁移完成后可整段删除。
     ============================================================ */
  --bg-primary: var(--bg-base);
  --bg-secondary: var(--bg-raised);
  --bg-card: var(--bg-elevated);
  --border: var(--border-subtle);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
}