/* =====================================================================
   Flow OS · Design Tokens — "Linear Canvas"
   ---------------------------------------------------------------------
   设计语言：严格遵循 Linear DESIGN.md 规范。
   · 近黑画布（near-black canvas）#010102 作为系统锚点（带极淡蓝调）。
   · 单一「品牌强调色」薰衣草蓝（lavender-blue）#5e6ad2，
     仅用于：品牌标 / 主操作 CTA / 焦点环 / 链接与激活强调。
   · 四级表面阶梯（surface-1 → surface-4）承载层级，无投影。
   · 发丝边框（hairline）从 #23252a 至 #3e3e44。
   · 浅灰文字（ink）#f7f8f8 承载标题与正文。
   · 字体：Inter（Linear Display / Text 的开源替代），等宽用 JetBrains Mono。
   · 扁平表面 + 发丝边框，近乎无阴影；零环境渐变、零聚光卡片、零第二彩色。
   · 深色为唯一主题（DESIGN.md：不提供浅色营销页）。
   ===================================================================== */
:root,
.dark {
  --sidebar-w: 244px;

  /* ---------- 字体 ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- 间距系统（4px 基础单位，对齐 DESIGN.md） ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: 96px;

  /* ---------- 控件高度 ---------- */
  --ctrl-h: 40px;
  --ctrl-h-sm: 32px;
  --ctrl-h-lg: 44px;

  /* ---------- 画布 / 表面阶梯（near-black canvas + 4-step ladder） ---------- */
  --bg: #010102;                   /* canvas：近黑画布（DESIGN.md 锚点） */
  --surface: #0f1011;              /* surface-1：卡片 / 面板 */
  --surface-2: #141516;            /* surface-2：次级表面 / 输入框 */
  --surface-3: #18191a;            /* surface-3：凹陷 / hover */
  --surface-4: #191a1b;            /* surface-4：最浅抬升表面 */

  /* ---------- 发丝边框（hairline ladder） ---------- */
  --border: #23252a;               /* hairline */
  --border-strong: #34343a;        /* hairline-strong */
  --border-tertiary: #3e3e44;      /* hairline-tertiary */
  --hairline: var(--border);

  /* ---------- 文字（ink ladder） ---------- */
  --text-primary: #f7f8f8;         /* ink */
  --text-secondary: #d0d6e0;       /* ink-muted */
  --text-muted: #8a8f98;           /* ink-subtle */
  --text-tertiary: #62666d;        /* ink-tertiary */

  /* ---------- 主操作 / 品牌强调：薰衣草蓝（lavender-blue） ---------- */
  --primary: #5e6ad2;              /* 主 CTA 背景 */
  --primary-hover: #828fff;
  --primary-press: #5e69d1;
  --primary-weak: rgba(94, 106, 210, 0.10);
  --primary-press-tint: rgba(94, 106, 210, 0.16);
  --on-primary: #ffffff;           /* 主 CTA / 激活态文字 */

  --accent: #5e6ad2;               /* 品牌 / 焦点 / 激活强调 */
  --accent-hover: #828fff;
  --accent-weak: rgba(94, 106, 210, 0.12);
  --accent-press: rgba(94, 106, 210, 0.18);
  --accent-glow: rgba(94, 106, 210, 0.32);
  --accent-strong: #828fff;
  --accent-ink: #aeb4f5;           /* 激活态浅薰衣草文字（深底可读） */
  --accent-tint: rgba(94, 106, 210, 0.08);
  --primary-glow: var(--accent-glow);
  --primary-glow-strong: rgba(94, 106, 210, 0.40);

  /* ---------- 语义 / 分类色（产品内标签，去饱和、与冷调协调） ---------- */
  --success: #27a644;              /* 完成 / 成功（DESIGN.md semantic-success） */
  --success-weak: rgba(39, 166, 68, 0.14);
  --success-press: rgba(39, 166, 68, 0.20);

  --warning: #d9a23b;             /* 提醒 / 星级（柔和琥珀） */
  --warning-weak: rgba(217, 162, 59, 0.14);

  --danger: #e5484d;              /* 删除 / 危险（正红，适配深底） */
  --danger-weak: rgba(229, 72, 77, 0.14);
  --danger-press: rgba(229, 72, 77, 0.20);

  --violet: #8b7ff0;              /* 计划 / 收集（雾靛） */
  --violet-weak: rgba(139, 127, 240, 0.14);

  --pink: #d45b86;                /* 日记（雾玫） */
  --pink-weak: rgba(212, 91, 134, 0.14);

  /* ---------- 圆角尺度（对齐 DESIGN.md：xs4 / sm6 / md8 / lg12 / xl16 / xxl24 / pill） ---------- */
  --radius-xl: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-2xs: 4px;
  --radius-pill: 9999px;

  /* ---------- 阴影（克制：深底近乎无投影；仅浮层使用单层） ---------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65);   /* 模态 / 抽屉浮层 */
  --shadow-focus: 0 0 0 3px rgba(94, 105, 209, 0.50); /* 焦点环：primary-focus 50% */
  --shadow-lift: none;
  --shadow-lift-strong: none;

  /* ---------- 缓动曲线 ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---------- 海拔（扁平为主，浮层略抬） ---------- */
  --elevation-1: none;
  --elevation-2: none;
  --elevation-3: var(--shadow-lg);

  /* ---------- 字号阶梯 ---------- */
  --fs-1: 12px;  --fs-2: 13px;  --fs-3: 14px;  --fs-4: 16px;
  --fs-5: 20px;  --fs-6: 24px;  --fs-7: 32px;
  --fs-heading-track: -0.02em;

  /* ---------- 保留别名以兼容既有引用（统一映射为深底实心表面） ---------- */
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --glass-shadow: none;
  --blur: none;
}

/* =====================================================================
   Flow OS · Light Theme — "Paper Canvas"
   ---------------------------------------------------------------------
   浅色模式：以近白纸面 + 发丝边框还原 Linear Canvas 语言。
   品牌强调色保持薰衣草蓝；文字 / 边框 / 语义色在白底上按 WCAG 调整对比度。
   本块刻意置于 `:root, .dark` 之后：`.light` 与 `:root` 特异度相同，
   源码靠后者胜出，故移除 .dark 进入浅色时本组令牌生效，深色模式不受影响。
   ===================================================================== */
.light {
  color-scheme: light;

  /* ---------- 画布 / 表面阶梯（近白纸面 + 4-step ladder） ---------- */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --surface-3: #e9ebef;
  --surface-4: #fafbfc;

  /* ---------- 发丝边框（hairline ladder） ---------- */
  --border: #e4e6ea;
  --border-strong: #d3d6dc;
  --border-tertiary: #c2c6ce;
  --hairline: var(--border);

  /* ---------- 文字（ink ladder） ---------- */
  --text-primary: #1a1b1e;
  --text-secondary: #3c4046;
  --text-muted: #6b7280;
  --text-tertiary: #9aa0a8;

  /* ---------- 主操作 / 品牌强调：薰衣草蓝（保持品牌） ---------- */
  --primary: #5e6ad2;
  --primary-hover: #4f5ac6;   /* 浅底白字：hover 略深以保证对比 */
  --primary-press: #4a54ba;
  --primary-weak: rgba(94, 106, 210, 0.08);
  --primary-press-tint: rgba(94, 106, 210, 0.14);
  --on-primary: #ffffff;

  --accent: #5e6ad2;
  --accent-hover: #6e78e6;
  --accent-weak: rgba(94, 106, 210, 0.10);
  --accent-press: rgba(94, 106, 210, 0.16);
  --accent-glow: rgba(94, 106, 210, 0.22);
  --accent-strong: #4f5ac6;
  --accent-ink: #3f43a8;       /* 浅底可读的深薰衣草（激活态文字） */
  --accent-tint: rgba(94, 106, 210, 0.06);
  --primary-glow: var(--accent-glow);
  --primary-glow-strong: rgba(94, 106, 210, 0.30);

  /* ---------- 语义 / 分类色（浅底更深的去饱和色，保证对比） ---------- */
  --success: #1f9d4e;
  --success-weak: rgba(31, 157, 78, 0.12);
  --success-press: rgba(31, 157, 78, 0.18);

  --warning: #b07d1a;
  --warning-weak: rgba(176, 125, 26, 0.14);

  --danger: #d23b40;
  --danger-weak: rgba(210, 59, 64, 0.12);
  --danger-press: rgba(210, 59, 64, 0.18);

  --violet: #6b5fd6;
  --violet-weak: rgba(107, 95, 214, 0.12);

  --pink: #c44d80;
  --pink-weak: rgba(196, 77, 128, 0.12);

  /* ---------- 阴影（浅底：克制但可见的抬升） ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 17, 20, 0.10);
  --shadow-lg: 0 24px 64px rgba(16, 17, 20, 0.18);
  --shadow-focus: 0 0 0 3px rgba(94, 105, 209, 0.35);
  --shadow-lift: 0 8px 24px rgba(16, 17, 20, 0.12);
  --shadow-lift-strong: 0 16px 40px rgba(16, 17, 20, 0.18);

  /* ---------- 海拔 ---------- */
  --elevation-1: 0 1px 2px rgba(16, 17, 20, 0.05);
  --elevation-2: 0 4px 12px rgba(16, 17, 20, 0.08);
  --elevation-3: var(--shadow-lg);

  /* ---------- 保留别名 ---------- */
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --glass-shadow: var(--shadow-md);
  --blur: none;
}

/* =====================================================================
   Flow OS · Eye-care Theme — "Amber Paper"（黄色护眼）
   ---------------------------------------------------------------------
   护眼模式：在浅色纸面基础上转为暖黄 / 琥珀色，降低蓝光刺激。
   复用 .light 的全部组件覆盖（html 同时挂 light + eye-care 两个类），
   此处仅覆盖画布 / 表面 / 边框 / 文字令牌为暖黄色调，并微调强调 / 语义色。
   ===================================================================== */
.eye-care {
  color-scheme: light;

  /* 画布 / 表面阶梯（暖黄纸面，略降亮度与白度，减少反光刺眼） */
  --bg: #f1e9cd;
  --surface: #faf4df;
  --surface-2: #f6efd6;
  --surface-3: #f0e7c9;
  --surface-4: #faf3df;

  /* 发丝边框（暖调） */
  --border: #e6d7a6;
  --border-strong: #d8c482;
  --border-tertiary: #c9b67c;

  /* 文字（暖棕墨色，调浅以降低对比、缓解刺眼） */
  --text-primary: #574c2e;
  --text-secondary: #776a44;
  --text-muted: #9c8c5e;
  --text-tertiary: #b6a373;

  /* 强调 / 品牌：薰衣草蓝在暖黄上对比略弱，略压深以保证可读性 */
  --accent: #4f54b8;
  --accent-hover: #6268c9;
  --accent-ink: #353a92;
  --primary: #4f54b8;
  --primary-hover: #454aa3;
  --primary-press: #3f4498;
  --on-primary: #ffffff;

  /* 语义 / 分类色（暖底略加深，保证对比） */
  --success: #1f8f47;
  --warning: #9c6c12;
  --danger: #c5393e;
  --violet: #5f54c4;
  --pink: #b8467c;
}