/* ============================================================
   AI 产品管理学习站 · Design Tokens
   视觉关键词：罗盘（导航感）、光谱（不确定性）、蓝图（规格）、握手（人机协同）
   主色：罗盘靛蓝 / 辅色：光谱青绿 / 背景：纸感浅灰与深空蓝
   ============================================================ */

:root {
  /* 字体栈 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 圆角 */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(18, 26, 51, 0.05), 0 2px 6px rgba(18, 26, 51, 0.07);
  --shadow-2: 0 6px 20px rgba(18, 26, 51, 0.10), 0 2px 6px rgba(18, 26, 51, 0.06);

  /* 动效 */
  --dur: 0.18s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* 布局 */
  --maxw: 980px;
  --header-h: 60px;

  /* 模块强调色（光谱七色，随模块微妙差异） */
  --mod-1: #4f46e5; /* 靛：全景与脉络 */
  --mod-2: #7c3aed; /* 紫：机会识别 */
  --mod-3: #1d6ae5; /* 蓝：需求与规格 */
  --mod-4: #0d8f7e; /* 青：体验设计 */
  --mod-5: #b45309; /* 琥珀：质量与评测 */
  --mod-6: #c2347a; /* 品红：商业化 */
  --mod-7: #47586e; /* 石板：风险合规 */
}

/* 亮色主题（纸感） */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fb;
  --bg-soft: #eef0f7;
  --surface: #ffffff;
  --surface-2: #f2f4fa;
  --text: #1d2433;
  --muted: #4c5876;
  --faint: #6b7690;
  --border: #dfe3ee;
  --border-strong: #c3cade;
  --primary: #4338ca;
  --primary-soft: #eceafd;
  --accent: #0d8f7e;
  --accent-soft: #e2f5f1;
  --warn: #92400e;
  --danger: #b42318;
  --mark-bg: #fde68a;
  --mark-text: #1d2433;
  --hero-glow: radial-gradient(1100px 420px at 18% -8%, rgba(79, 70, 229, 0.14), transparent 60%),
    radial-gradient(900px 380px at 88% -12%, rgba(13, 143, 126, 0.10), transparent 60%);
  --lvl-1: #0b7a55;
  --lvl-1-soft: #dcf3ea;
  --lvl-2: #1d4ed8;
  --lvl-2-soft: #e0e9fd;
  --lvl-3: #92400e;
  --lvl-3-soft: #fbead0;
  --lvl-4: #7e22ce;
  --lvl-4-soft: #f3e4fb;
}

/* 暗色主题（深空，独立取色非反色） */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10131f;
  --bg-soft: #0c0f19;
  --surface: #191d2c;
  --surface-2: #202536;
  --text: #e8ebf7;
  --muted: #a6b0cb;
  --faint: #7e89a6;
  --border: #2b3147;
  --border-strong: #3d4463;
  --primary: #a3abff;
  --primary-soft: #262b47;
  --accent: #3fd0b4;
  --accent-soft: #14332e;
  --warn: #f0b45c;
  --danger: #ff9a8f;
  --mark-bg: #6d5510;
  --mark-text: #fdf6e3;
  --hero-glow: radial-gradient(1100px 420px at 18% -8%, rgba(129, 136, 255, 0.16), transparent 60%),
    radial-gradient(900px 380px at 88% -12%, rgba(63, 208, 180, 0.10), transparent 60%);
  --lvl-1: #5ee0b0;
  --lvl-1-soft: #123528;
  --lvl-2: #8fb1ff;
  --lvl-2-soft: #1c2748;
  --lvl-3: #f0b45c;
  --lvl-3-soft: #3a2b12;
  --lvl-4: #d5a5ff;
  --lvl-4-soft: #322048;

  --mod-1: #9fa6ff;
  --mod-2: #c9a8ff;
  --mod-3: #7cabff;
  --mod-4: #3fd0b4;
  --mod-5: #f0b45c;
  --mod-6: #ff92c2;
  --mod-7: #a8b3c9;
}

/* 焦点可见性 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}