/* ============================================================
   tokens.css — 量子计算学习站 design tokens
   视觉关键词：深空 / 相干光 / 叠加渐变 / 线路
   ============================================================ */

:root {
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.07);
  --t-fast: 140ms;
  --t-med: 220ms;
  /* 叠加渐变：蓝 → 紫，隐喻干涉 */
  --grad-super: linear-gradient(120deg, #2450d8, #6d3fd8 55%, #a03fb0);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --ink: #1b2130;
  --muted: #49536a;
  --border: #dbe1ee;
  --border-strong: #b9c2d8;
  --primary: #2f5fe0;
  --primary-ink: #2448ad;
  --accent: #6d34c9;
  --ok: #1c7a45;
  --warn: #8a5a00;
  --bad: #b3323f;
  --lv1: #1c7a45;  --lv1-bg: #e2f4e9;  /* 入门 */
  --lv2: #2450c8;  --lv2-bg: #e4ecfd;  /* 核心 */
  --lv3: #6d34c9;  --lv3-bg: #efe6fc;  /* 进阶 */
  --lv4: #a82a76;  --lv4-bg: #fae6f2;  /* 前沿 */
  --hero-ink: #ffffff;
  --hero-bg: radial-gradient(1200px 500px at 15% -10%, rgba(122, 63, 224, 0.55), transparent 60%),
             radial-gradient(900px 420px at 85% 0%, rgba(36, 80, 216, 0.5), transparent 55%),
             linear-gradient(160deg, #101735, #1c1440 60%, #241042);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.07);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f1a;
  --surface: #121829;
  --surface-2: #1a2136;
  --ink: #e7ebf6;
  --muted: #a8b1c7;
  --border: #2a3350;
  --border-strong: #3d4a6e;
  --primary: #8fb0ff;
  --primary-ink: #a9c2ff;
  --accent: #c4a0ff;
  --ok: #6fdb9b;
  --warn: #e9c46a;
  --bad: #ff8b96;
  --lv1: #6fdb9b;  --lv1-bg: #12301f;
  --lv2: #8fb0ff;  --lv2-bg: #16233f;
  --lv3: #c4a0ff;  --lv3-bg: #241a3f;
  --lv4: #ff9bc7;  --lv4-bg: #3a1430;
  --hero-ink: #eef2ff;
  --hero-bg: radial-gradient(1100px 460px at 12% -10%, rgba(80, 58, 180, 0.5), transparent 60%),
             radial-gradient(900px 400px at 88% 0%, rgba(38, 78, 170, 0.45), transparent 55%),
             linear-gradient(160deg, #0a0f22, #131033 60%, #1c0f38);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
}