/* =========================================================
   base.css —— 设计变量、字体、深色模式、基础排版
   深色模式：默认跟随系统 prefers-color-scheme；
   用户手动切换后，页面头部内联脚本会在 html 上写
   data-theme="light|dark"，此文件中的对应变量立即生效。
   ========================================================= */

:root {
  /* 颜色（浅色主题） */
  --bg: #f4f6f9;
  --bg-card: #ffffff;
  --bg-soft: #eef1f6;
  --text: #1f2329;
  --text-2: #5c6670;
  --text-3: #8f959e;
  --brand: #1e6fff;
  --brand-strong: #0b4fd6;
  --brand-soft: #e8f0ff;
  --line: #e5e6eb;
  --ok: #00b42a;
  --ok-soft: #e8ffea;
  --warn: #ff7d00;
  --warn-soft: #fff3e8;
  --danger: #f53f3f;
  --danger-soft: #ffece8;
  --today: #ff7d00;      /* 今天徽标 */
  --yesterday: #8f959e;
  --tomorrow: #1e6fff;

  /* 圆角 / 阴影 / 层级 */
  --radius: 14px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --shadow-lg: 0 8px 30px rgba(16, 24, 40, .12);

  /* 布局尺寸 */
  --header-h: 60px;
  --nav-h: 58px;
  --sidebar-w: 240px;

  /* 字体：系统字体栈，中文优先 */
  --font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans CJK SC",
    "Source Han Sans SC", sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono",
    Menlo, monospace;

  --max-w: 1200px;
}

/* 手动深色主题 */
html[data-theme="dark"] {
  --bg: #12141a;
  --bg-card: #1b1e26;
  --bg-soft: #232733;
  --text: #eef0f4;
  --text-2: #a8aebb;
  --text-3: #6d7380;
  --brand: #4d94ff;
  --brand-strong: #74aaff;
  --brand-soft: #1a2c4e;
  --line: #2c303a;
  --ok: #2fc95c;
  --ok-soft: #12301d;
  --warn: #ff9a3d;
  --warn-soft: #3a2a12;
  --danger: #ff6b6b;
  --danger-soft: #3a1a1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .5);
}

/* 跟随系统的深色模式（仅在用户未手动选择时生效） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #12141a;
    --bg-card: #1b1e26;
    --bg-soft: #232733;
    --text: #eef0f4;
    --text-2: #a8aebb;
    --text-3: #6d7380;
    --brand: #4d94ff;
    --brand-strong: #74aaff;
    --brand-soft: #1a2c4e;
    --line: #2c303a;
    --ok: #2fc95c;
    --ok-soft: #12301d;
    --warn: #ff9a3d;
    --warn-soft: #3a2a12;
    --danger: #ff6b6b;
    --danger-soft: #3a1a1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, .5);
  }
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

small { color: var(--text-3); }

::selection {
  background: var(--brand);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 无障碍：减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}