/* ============================================================
   InsightWeave · Design Tokens CSS
   方向 A · 精密·冷静·暖灰 · oklch 色彩空间
   默认暗色 · 保留亮色切换能力
   字体禁用 Inter/Roboto/Arial/system-ui/Fraunces
   禁渐变背景 · 禁 emoji 图标 · 触控 ≥ 44px / 主操作 ≥ 48px
   ============================================================ */

/* ---------- :root · 暗色默认（即项目默认主题） ---------- */
:root {
  /* ===== Color · Primitive ===== */
  --color-amber-50:  oklch(97% 0.02 78);
  --color-amber-100: oklch(94% 0.04 78);
  --color-amber-200: oklch(86% 0.07 78);
  --color-amber-300: oklch(80% 0.10 78);
  --color-amber-400: oklch(74% 0.118 78);
  --color-amber-500: oklch(68% 0.118 78);
  --color-amber-600: oklch(58% 0.110 78);
  --color-amber-700: oklch(48% 0.090 78);
  --color-amber-800: oklch(38% 0.06 78);
  --color-amber-900: oklch(30% 0.05 78);

  --color-warm-gray-50:  oklch(97% 0.004 75);
  --color-warm-gray-100: oklch(94% 0.005 75);
  --color-warm-gray-200: oklch(86% 0.006 75);
  --color-warm-gray-300: oklch(74% 0.008 75);
  --color-warm-gray-400: oklch(67% 0.012 80);
  --color-warm-gray-500: oklch(55% 0.010 80);
  --color-warm-gray-600: oklch(48% 0.010 80);
  --color-warm-gray-700: oklch(40% 0.008 75);
  --color-warm-gray-800: oklch(32% 0.006 75);
  --color-warm-gray-900: oklch(25% 0.004 75);
  --color-warm-gray-950: oklch(20% 0.004 75);

  --color-red-300: oklch(67% 0.150 28);
  --color-red-400: oklch(57% 0.158 28);
  --color-red-500: oklch(52% 0.160 28);
  --color-red-600: oklch(47% 0.155 28);

  --color-green-300: oklch(78% 0.110 145);
  --color-green-400: oklch(70% 0.120 145);
  --color-green-500: oklch(64% 0.120 145);
  --color-green-600: oklch(56% 0.110 145);

  --color-yellow-300: oklch(86% 0.120 85);
  --color-yellow-400: oklch(80% 0.140 85);
  --color-yellow-500: oklch(74% 0.140 85);
  --color-yellow-600: oklch(66% 0.130 85);

  --color-blue-300: oklch(72% 0.080 240);
  --color-blue-400: oklch(65% 0.100 240);
  --color-blue-500: oklch(58% 0.100 240);
  --color-blue-600: oklch(50% 0.090 240);

  /* ===== Color · Semantic（暗色默认） ===== */
  --bg-primary:    oklch(20% 0.004 75);
  --bg-secondary:  oklch(25% 0.004 75);
  --bg-tertiary:   oklch(28% 0.005 75);
  --bg-elevated:   oklch(32% 0.006 75);
  --bg-scrim:      oklch(0% 0 0 / 0.6);

  --text-primary:   oklch(92% 0.008 80);
  --text-secondary: oklch(72% 0.012 80);
  --text-muted:     oklch(60% 0.012 80);
  --text-on-accent: oklch(20% 0.004 75);

  --accent:         oklch(74% 0.118 78);
  --accent-soft:    oklch(30% 0.05 78);
  --accent-hover:   oklch(78% 0.118 78);
  --accent-pressed: oklch(70% 0.118 78);

  --danger:        oklch(57% 0.158 28);
  --danger-soft:   oklch(30% 0.06 28);
  --success:       oklch(70% 0.12 145);
  --success-soft:  oklch(30% 0.05 145);
  --warning:       oklch(80% 0.14 85);
  --warning-soft:  oklch(30% 0.05 85);
  --info:          oklch(65% 0.10 240);
  --info-soft:     oklch(28% 0.04 240);

  --border:        oklch(38% 0.008 75);
  --border-strong: oklch(45% 0.010 75);
  --border-subtle: oklch(30% 0.006 75);
  --border-accent: oklch(74% 0.118 78);
  --overlay:       oklch(0% 0 0 / 0.6);

  /* ===== Color · Component ===== */
  /* Button */
  --btn-primary-bg:         var(--accent);
  --btn-primary-text:       var(--text-on-accent);
  --btn-primary-hover-bg:   var(--accent-hover);
  --btn-primary-pressed-bg: var(--accent-pressed);
  --btn-secondary-bg:       var(--bg-tertiary);
  --btn-secondary-text:     var(--text-primary);
  --btn-secondary-border:   var(--border);
  --btn-secondary-hover-border: var(--text-muted);
  --btn-ghost-text:         var(--accent);
  --btn-ghost-border:       var(--accent);
  --btn-ghost-hover-bg:     var(--accent-soft);
  --btn-danger-bg:          var(--danger);
  --btn-danger-text:        oklch(96% 0.02 28);
  --btn-danger-hover-bg:    oklch(52% 0.160 28);
  --btn-disabled-bg:        var(--bg-tertiary);
  --btn-disabled-text:      var(--text-muted);

  /* Card */
  --card-bg:         var(--bg-secondary);
  --card-border:     var(--border);
  --card-elevated-bg: var(--bg-tertiary);
  --card-hover-bg:   var(--bg-tertiary);

  /* Input */
  --input-bg:           var(--bg-tertiary);
  --input-border:       var(--border);
  --input-focus-border: var(--accent);
  --input-text:         var(--text-primary);
  --input-placeholder:  var(--text-muted);

  /* Bubble */
  --bubble-ai-bg:      var(--bg-tertiary);
  --bubble-ai-text:    var(--text-primary);
  --bubble-ai-border:  var(--border);
  --bubble-user-bg:    var(--accent-soft);
  --bubble-user-text:  var(--text-primary);
  --bubble-user-accent: var(--accent);

  /* Tab */
  --tab-active-text:   var(--accent);
  --tab-inactive-text: var(--text-muted);
  --tab-indicator:     var(--accent);
  --tab-bar-bg:        var(--bg-secondary);
  --tab-bar-border:    var(--border);

  /* Navbar / Tabbar */
  --navbar-bg:         var(--bg-secondary);
  --navbar-border:     var(--border);
  --navbar-title:      var(--text-primary);
  --navbar-subtitle:   var(--text-secondary);
  --tabbar-bg:         var(--bg-secondary);
  --tabbar-border:     var(--border);
  --tabbar-active:     var(--accent);
  --tabbar-inactive:   var(--text-muted);
  --tabbar-fab-bg:     var(--accent);
  --tabbar-fab-icon:   var(--text-on-accent);

  /* Phase tag · 双编码（颜色+文字） */
  --phase-hook-text:   var(--accent);
  --phase-hook-bg:     var(--accent-soft);
  --phase-core-text:   var(--text-primary);
  --phase-core-bg:     var(--bg-tertiary);
  --phase-core-border: var(--border);
  --phase-clash-text:  var(--warning);
  --phase-clash-bg:    var(--warning-soft);
  --phase-settle-text: var(--success);
  --phase-settle-bg:   var(--success-soft);

  /* ===== Font ===== */
  --font-sans:  'Noto Sans SC', 'PingFang SC', 'Source Han Sans SC', sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', 'LXGW WenKai TC', monospace;

  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-base: 16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;

  /* ===== Spacing · 4px 基准 ===== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-page-x: 16px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* ===== Radius ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ===== Shadow · oklch 阴影色 ===== */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.4);
  --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.5);
  --shadow-focus: 0 0 0 3px oklch(74% 0.118 78 / 0.35);

  /* ===== Motion ===== */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Touch target ===== */
  --touch-min: 44px;
  --touch-primary: 48px;
  --touch-fab: 56px;

  /* ===== Z-index ===== */
  --z-base: 0;
  --z-sticky: 10;
  --z-navbar: 50;
  --z-tabbar: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-overlay: 80;
  --z-toast: 90;

  color-scheme: dark;
}

/* ---------- [data-theme="dark"] · 显式暗色（与默认等价，支持切回） ---------- */
[data-theme="dark"] {
  --bg-primary:    oklch(20% 0.004 75);
  --bg-secondary:  oklch(25% 0.004 75);
  --bg-tertiary:   oklch(28% 0.005 75);
  --bg-elevated:   oklch(32% 0.006 75);
  --text-primary:   oklch(92% 0.008 80);
  --text-secondary: oklch(72% 0.012 80);
  --text-muted:     oklch(60% 0.012 80);
  --text-on-accent: oklch(20% 0.004 75);
  --accent:         oklch(74% 0.118 78);
  --accent-soft:    oklch(30% 0.05 78);
  --accent-hover:   oklch(78% 0.118 78);
  --accent-pressed: oklch(70% 0.118 78);
  --border:        oklch(38% 0.008 75);
  --border-strong: oklch(45% 0.010 75);
  --border-subtle: oklch(30% 0.006 75);
  --overlay:       oklch(0% 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- [data-theme="light"] · 亮色覆盖（保留切换能力） ---------- */
[data-theme="light"] {
  --bg-primary:    oklch(97% 0.008 85);
  --bg-secondary:  oklch(100% 0 0);
  --bg-tertiary:   oklch(99% 0.005 85);
  --bg-elevated:   oklch(96% 0.008 85);
  --bg-scrim:      oklch(0% 0 0 / 0.4);

  --text-primary:   oklch(25% 0.015 85);
  --text-secondary: oklch(42% 0.012 85);
  --text-muted:     oklch(50% 0.012 85);
  --text-on-accent: oklch(99% 0.005 85);

  --accent:         oklch(58% 0.10 78);
  --accent-soft:    oklch(92% 0.03 78);
  --accent-hover:   oklch(52% 0.11 78);
  --accent-pressed: oklch(64% 0.10 78);

  --danger:        oklch(52% 0.160 28);
  --danger-soft:   oklch(92% 0.04 28);
  --success:       oklch(56% 0.110 145);
  --success-soft:  oklch(92% 0.04 145);
  --warning:       oklch(66% 0.130 85);
  --warning-soft:  oklch(92% 0.04 85);
  --info:          oklch(50% 0.090 240);
  --info-soft:     oklch(92% 0.03 240);

  --border:        oklch(82% 0.010 85);
  --border-strong: oklch(72% 0.012 85);
  --border-subtle: oklch(90% 0.006 85);
  --border-accent: oklch(58% 0.10 78);
  --overlay:       oklch(0% 0 0 / 0.5);

  /* Component · light 覆盖 */
  --btn-primary-text:       oklch(99% 0.005 85);
  --btn-secondary-bg:       var(--bg-tertiary);
  --btn-secondary-text:     var(--text-primary);
  --btn-secondary-border:   var(--border);
  --btn-ghost-text:         var(--accent);
  --btn-ghost-border:       var(--accent);
  --btn-ghost-hover-bg:     var(--accent-soft);
  --btn-danger-text:        oklch(99% 0.005 85);
  --btn-disabled-bg:        var(--bg-tertiary);
  --btn-disabled-text:      var(--text-muted);

  --card-bg:         var(--bg-secondary);
  --card-elevated-bg: var(--bg-tertiary);
  --card-hover-bg:   var(--bg-tertiary);

  --input-bg:           var(--bg-tertiary);
  --input-border:       var(--border);
  --input-focus-border: var(--accent);
  --input-text:         var(--text-primary);
  --input-placeholder:  var(--text-muted);

  --bubble-ai-bg:      var(--bg-tertiary);
  --bubble-ai-text:    var(--text-primary);
  --bubble-ai-border:  var(--border);
  --bubble-user-bg:    var(--accent-soft);
  --bubble-user-text:  var(--text-primary);
  --bubble-user-accent: var(--accent);

  --tab-active-text:   var(--accent);
  --tab-inactive-text: var(--text-muted);
  --tab-indicator:     var(--accent);
  --tab-bar-bg:        var(--bg-secondary);
  --tab-bar-border:    var(--border);

  --navbar-bg:       var(--bg-secondary);
  --navbar-border:   var(--border);
  --navbar-title:    var(--text-primary);
  --navbar-subtitle: var(--text-secondary);
  --tabbar-bg:       var(--bg-secondary);
  --tabbar-border:   var(--border);
  --tabbar-active:   var(--accent);
  --tabbar-inactive: var(--text-muted);
  --tabbar-fab-bg:   var(--accent);
  --tabbar-fab-icon: var(--text-on-accent);

  --phase-hook-text:   var(--accent);
  --phase-hook-bg:     var(--accent-soft);
  --phase-core-text:   var(--text-primary);
  --phase-core-bg:     var(--bg-tertiary);
  --phase-core-border: var(--border);
  --phase-clash-text:  var(--warning);
  --phase-clash-bg:    var(--warning-soft);
  --phase-settle-text: var(--success);
  --phase-settle-bg:   var(--success-soft);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.08);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.10);
  --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.14);
  --shadow-focus: 0 0 0 3px oklch(58% 0.10 78 / 0.30);

  color-scheme: light;
}

/* ============================================================
   全局基础样式 · Reset + Body + Link + Scrollbar
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  transition: background var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard);
}

/* 标题用思源宋体，传递书写隐喻 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

img, svg, video, canvas { display: block; max-width: 100%; }

/* 滚动条 · 暖灰克制 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 选区 */
::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ============================================================
   SVG 图标基础类
   .icon     · 固定 20×20，stroke 跟随 currentColor
   .icon--sm · 16×16
   .icon--lg · 24×24
   .icon-svg · 仅 display:block，禁止 width/height:100%
   ============================================================ */
.icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon-svg { display: block; }

/* ============================================================
   覆盖层规范 · 隐藏态必须 pointer-events:none
   禁止仅用 opacity:0 隐藏 fixed/inset:0 覆盖层
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--overlay);
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.overlay:not([data-open="true"]) {
  pointer-events: none;
  opacity: 0;
}

/* ============================================================
   触控目标底线 · 按钮 ≥ 44px · 主操作 ≥ 48px
   ============================================================ */
button, [role="button"], .btn, .tab, .list-item-tap {
  min-height: var(--touch-min);
}
.btn-primary, .btn--primary, [data-touch="primary"] {
  min-height: var(--touch-primary);
}

/* ============================================================
   全局工具类（最小集，供预览页与后续页面复用）
   ============================================================ */
/* 章节小标题 · 等宽字距 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* 阶段标签 · 双编码（颜色+文字），::before 圆点 */
.phase-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  min-height: 24px;
}
.phase-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.phase-tag--hook   { color: var(--phase-hook-text);   background: var(--phase-hook-bg); }
.phase-tag--core   { color: var(--phase-core-text);   background: var(--phase-core-bg); border: 1px solid var(--phase-core-border); }
.phase-tag--clash  { color: var(--phase-clash-text);  background: var(--phase-clash-bg); }
.phase-tag--settle { color: var(--phase-settle-text); background: var(--phase-settle-bg); }

/* 尊重减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   兼容映射 · 桥接旧 style.css 与各页面遗留变量名
   引入 tokens.css 后自动获得，无需改动使用方
   ============================================================ */
:root {
  --accent-glow:    oklch(74% 0.118 78 / 0.15);
  --accent-dim:     var(--accent-soft);
  --bg-hover:       var(--bg-elevated);
  --bg-input:       var(--bg-tertiary);
  --bg-card:        var(--bg-secondary);
  --border-light:   var(--border-strong);
  --text-inverse:   var(--text-on-accent);
  --danger-hover:   var(--danger);
  --success-hover:  var(--success);
  --info-soft:      oklch(28% 0.04 240);
  --radius:         var(--radius-md);
  --shadow-sm:      0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md:      0 4px 12px oklch(0% 0 0 / 0.4);
  --shadow-lg:      0 8px 32px oklch(0% 0 0 / 0.5);
  --transition:     0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --accent-glow:    oklch(74% 0.118 78 / 0.2);
}