/* ============================================================
   念念 Web — 设计系统 tokens
   teal 主色 · 现代无衬线 · 亮色为主可切换 · 3 套视觉方向
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500;600&display=swap');

:root {
  /* ---- 字体 ---- */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", serif;
  --font-num: "Noto Sans SC", system-ui, sans-serif;
  --font-head: var(--font-sans);
  --font-read: var(--font-sans);

  /* ---- teal 主色（默认）---- */
  --accent-h: 192;
  --accent: oklch(0.56 0.086 var(--accent-h));
  --accent-strong: oklch(0.47 0.092 var(--accent-h));
  --accent-deep: oklch(0.38 0.07 var(--accent-h));
  --accent-soft: oklch(0.962 0.026 var(--accent-h));
  --accent-soft-2: oklch(0.93 0.04 var(--accent-h));
  --accent-contrast: #fff;
  --accent-ring: oklch(0.56 0.086 var(--accent-h) / 0.30);

  /* ---- 中性（冷调、低彩度）---- */
  --bg: oklch(0.984 0.004 210);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.005 210);
  --surface-3: oklch(0.955 0.006 210);
  --border: oklch(0.912 0.006 215);
  --border-strong: oklch(0.85 0.008 215);
  --text: oklch(0.27 0.015 235);
  --text-2: oklch(0.47 0.013 235);
  --text-3: oklch(0.62 0.011 235);
  --text-faint: oklch(0.74 0.009 235);

  /* ---- 状态色 ---- */
  --danger: oklch(0.58 0.16 25);
  --danger-soft: oklch(0.96 0.03 25);
  --success: oklch(0.6 0.12 155);
  --warn: oklch(0.74 0.13 75);

  /* ---- 活动类型多色（L≈0.62 C≈0.13，仅 hue 变化）---- */
  --a-film:   oklch(0.64 0.15 25);   /* 影视剧 */
  --a-write:  oklch(0.64 0.14 55);   /* 发表文章 */
  --a-study:  oklch(0.66 0.13 95);   /* 学习 */
  --a-video:  oklch(0.64 0.13 142);  /* 剪辑短视频 */
  --a-fit:    oklch(0.64 0.12 175);  /* 健身 */
  --a-eng:    oklch(0.62 0.12 205);  /* 学习英语 */
  --a-med:    oklch(0.6 0.12 255);   /* 吃药 */
  --a-audio:  oklch(0.62 0.13 290);  /* 听书 */
  --a-read:   oklch(0.62 0.14 330);  /* 阅读 */
  --a-know:   oklch(0.6 0.12 10);    /* 整理知识体系 */

  /* ---- 形状 / 阴影（受视觉方向覆盖）---- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 230 / 0.06), 0 1px 3px oklch(0.4 0.02 230 / 0.05);
  --shadow: 0 2px 8px oklch(0.4 0.02 230 / 0.06), 0 6px 20px oklch(0.4 0.02 230 / 0.06);
  --shadow-lg: 0 12px 40px oklch(0.4 0.02 230 / 0.12);
  --card-border: 1px solid var(--border);
  --card-shadow: var(--shadow-sm);

  /* ---- 间距节奏 ---- */
  --gutter: 28px;
  --density: 1;
}

/* ===================== 暗色 ===================== */
[data-mode="dark"] {
  --bg: oklch(0.205 0.012 235);
  --surface: oklch(0.245 0.013 235);
  --surface-2: oklch(0.225 0.012 235);
  --surface-3: oklch(0.285 0.014 235);
  --border: oklch(0.34 0.012 235);
  --border-strong: oklch(0.42 0.014 235);
  --text: oklch(0.94 0.006 230);
  --text-2: oklch(0.76 0.01 230);
  --text-3: oklch(0.6 0.012 230);
  --text-faint: oklch(0.48 0.012 230);
  --accent: oklch(0.7 0.1 var(--accent-h));
  --accent-strong: oklch(0.78 0.1 var(--accent-h));
  --accent-deep: oklch(0.6 0.09 var(--accent-h));
  --accent-soft: oklch(0.32 0.04 var(--accent-h));
  --accent-soft-2: oklch(0.38 0.055 var(--accent-h));
  --accent-ring: oklch(0.7 0.1 var(--accent-h) / 0.35);
  --danger-soft: oklch(0.34 0.06 25);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow: 0 4px 16px oklch(0 0 0 / 0.36);
  --shadow-lg: 0 16px 48px oklch(0 0 0 / 0.5);
}

/* ===================== 视觉方向预设 ===================== */
/* 清爽专业（默认）：柔和卡片 + 轻阴影 + 中圆角 */
[data-preset="fresh"] {
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --card-border: 1px solid var(--border);
  --card-shadow: var(--shadow-sm);
  --font-head: var(--font-sans);
  --gutter: 28px;
}
/* 极简：硬边框、零阴影、小圆角、紧凑 */
[data-preset="minimal"] {
  --radius: 6px; --radius-sm: 5px; --radius-lg: 8px;
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --font-head: var(--font-sans);
  --gutter: 24px;
  --surface-2: oklch(0.978 0.004 210);
}
[data-preset="minimal"][data-mode="dark"] { --surface-2: oklch(0.225 0.01 235); }
/* 温暖人文：纸感暖底、衬线标题、大圆角、柔阴影、宽松 */
[data-preset="warm"] {
  --radius: 16px; --radius-sm: 11px; --radius-lg: 22px;
  --card-border: 1px solid oklch(0.9 0.012 70);
  --card-shadow: var(--shadow);
  --font-head: var(--font-serif);
  --gutter: 34px;
  --bg: oklch(0.975 0.012 78);
  --surface: oklch(0.992 0.007 78);
  --surface-2: oklch(0.965 0.012 78);
  --surface-3: oklch(0.945 0.015 78);
  --border: oklch(0.9 0.012 70);
  --border-strong: oklch(0.84 0.016 70);
  --text: oklch(0.3 0.02 60);
  --text-2: oklch(0.48 0.018 60);
  --text-3: oklch(0.62 0.016 60);
}
[data-preset="warm"][data-mode="dark"] {
  --bg: oklch(0.22 0.012 60);
  --surface: oklch(0.26 0.013 60);
  --surface-2: oklch(0.24 0.012 60);
  --surface-3: oklch(0.3 0.014 60);
  --border: oklch(0.36 0.012 60);
  --text: oklch(0.93 0.008 70);
  --text-2: oklch(0.76 0.012 70);
}

/* ===================== 基础重置 ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
::selection { background: var(--accent-soft-2); color: var(--accent-deep); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
h1,h2,h3,h4 { font-family: var(--font-head); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== 通用组件 ===================== */
.nn-card {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.nn-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0 14px; height: 38px;
  font-size: 14px; font-weight: 500;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .08s;
  white-space: nowrap;
}
.nn-btn:active { transform: translateY(0.5px); }
.nn-btn-primary { background: var(--accent); color: var(--accent-contrast); }
.nn-btn-primary:hover { background: var(--accent-strong); }
.nn-btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.nn-btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.nn-btn-soft { background: var(--accent-soft); color: var(--accent-deep); }
.nn-btn-soft:hover { background: var(--accent-soft-2); }
.nn-btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, transparent); }
.nn-btn-danger:hover { background: var(--danger-soft); }
.nn-btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.nn-btn-icon { width: 38px; padding: 0; justify-content: center; }

.nn-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1;
}
.nn-input {
  width: 100%; height: 40px; padding: 0 13px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.nn-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.nn-input::placeholder { color: var(--text-faint); }

.nn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  font-size: 13px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all .15s;
}
.nn-chip:hover { color: var(--text); border-color: var(--border-strong); }
.nn-chip.active { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fade-in { animation: nnFade .3s ease both; }
@keyframes nnFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.muted { color: var(--text-3); }