/* design tokens · 分布式系统学习站
   视觉关键词：网络节点、链路、集群、可靠性
   明暗两套独立取色（非反色），对比度满足正文 ≥ 4.5:1 */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(13, 20, 38, 0.06), 0 10px 30px rgba(13, 20, 38, 0.07);
  --shadow-soft: 0 1px 2px rgba(13, 20, 38, 0.05);
  --speed: 180ms ease;

  /* 网格纹理（链路感） */
  --grid-line: rgba(29, 78, 216, 0.06);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fc;
  --bg-hero: linear-gradient(160deg, #eaf0ff 0%, #f5f7fc 55%, #eafaf6 100%);
  --surface: #ffffff;
  --surface-2: #eef2fa;
  --text: #172033;
  --muted: #55607a;
  --border: #d9e0ee;
  --primary: #1d4ed8;
  --primary-strong: #1739a8;
  --primary-soft: #e3eaff;
  --accent: #0f766e;
  --accent-soft: #dcf5f0;
  --danger: #b3372f;
  --ok: #116e4a;

  --lv-entry: #0f766e;   /* 入门 */
  --lv-core: #1d4ed8;    /* 核心 */
  --lv-advanced: #7c3aed;/* 进阶 */
  --lv-frontier: #c2410c;/* 前沿 */
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c111e;
  --bg-hero: linear-gradient(160deg, #101a33 0%, #0c111e 55%, #0d1f1c 100%);
  --surface: #151d30;
  --surface-2: #1b2540;
  --text: #e6ebf5;
  --muted: #9aa6bd;
  --border: #2a3550;
  --primary: #8fb0ff;
  --primary-strong: #a8c2ff;
  --primary-soft: #1b2a52;
  --accent: #4fd8c3;
  --accent-soft: #12312d;
  --danger: #ff8f88;
  --ok: #5fd8a5;

  --lv-entry: #4fd8c3;
  --lv-core: #8fb0ff;
  --lv-advanced: #c4a5ff;
  --lv-frontier: #ffb08a;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
  --grid-line: rgba(143, 176, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}