:root {
  /* 颜色 */
  --color-text-primary: #1a1a1a;      /* 主文字：内容 */
  --color-text-secondary: #666666;    /* 次要文字：时间戳 */
  --color-text-tertiary: #aaaaaa;     /* 三级文字：日期标签 */
  --color-divider: #e8e8e8;           /* 分割线 */
  --color-bg-primary: #fafafa;        /* 主背景 */
  --color-bg-overlay: rgba(0, 0, 0, 0.4); /* 遮罩层 */

  /* ========== 玻璃质感系统（浅色模式）========== */
  /* glass-weak: 历史记录卡片 */
  --glass-weak-bg: rgba(255, 255, 255, 0.6);
  --glass-weak-bg-hover: rgba(255, 255, 255, 0.8);
  --glass-weak-border: rgba(0, 0, 0, 0.04);
  --glass-weak-border-hover: rgba(0, 0, 0, 0.08);
  --glass-weak-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  --glass-weak-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.06);
  --glass-weak-blur: 6px;

  /* glass: 标准等级（弹出层、Picker）*/
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-hover: rgba(0, 0, 0, 0.10);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  --glass-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.08);
  --glass-blur: 10px;
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* glass-strong: 输入框（更"正在发生"）*/
  --glass-strong-bg: rgba(255, 255, 255, 0.8);
  --glass-strong-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-strong-border: rgba(0, 0, 0, 0.08);
  --glass-strong-border-hover: rgba(0, 0, 0, 0.12);
  --glass-strong-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  --glass-strong-shadow-hover: 0 4px 28px rgba(0, 0, 0, 0.10);
  --glass-strong-blur: 12px;
  --glass-strong-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* 字号 - 重新平衡叙事权重 */
  --font-size-content: 16px;          /* 内容文字（降低一档，不再是视觉中心）*/
  --font-size-time: 12px;             /* 时间戳（增强，成为时间叙事的锚点）*/
  --font-size-date: 11px;             /* 日期标签（增强，从注释升级为章节标题）*/
  --font-size-date-number: 22px;      /* 日期数字（新增：月/日的主视觉）*/

  /* 行高 */
  --line-height-content: 1.7;         /* 内容行高（优化：1.8 → 1.7）*/
  --line-height-compact: 1.4;         /* 紧凑行高 */

  /* 间距 - 重新定义节奏韵律 */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 28px;                 /* 增加基础间距 */
  --spacing-xl: 48px;                 /* 日常节奏停顿 */
  --spacing-2xl: 48px;                /* 重要节奏停顿（基数）*/
  --spacing-3xl: 72px;                /* 纪念日级别留白（1.5x）*/
  --spacing-4xl: 108px;               /* 生日级别留白（1.5x）*/
  --spacing-5xl: 162px;               /* 年份级别留白（1.5x）*/

  /* 布局 - 优化阅读体验 */
  --container-max-width: 750px;       /* 内容区最大宽度（+10%，接近 A5 纸张比例）*/
  --container-padding-desktop: 80px;  /* 桌面端左右内边距（增加呼吸感）*/
  --container-padding-tablet: 48px;   /* 平板端左右内边距 */
  --container-padding-mobile: 24px;   /* 移动端左右内边距 */
  --header-height: 48px;              /* 顶部导航高度 */

  /* 时间线系统（优化后）*/
  --timeline-offset: 76px;            /* 从 64px 增加到 76px，增加时间戳与圆点间距 */
  --timeline-width: 1px;              /* 时间线粗细 */
  --timeline-color: rgba(0, 0, 0, 0.08); /* 时间线颜色：极淡 */

  /* 动画 */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 400ms ease-out;      /* 慢速浮现（新增）*/

  /* 时间叙事的透明度层级 */
  --time-opacity-today: 0.85;         /* 今天：更强存在感 */
  --time-opacity-recent: 0.70;        /* 近期：清晰可见 */
  --time-opacity-old: 0.55;           /* 过往：轻度褪色 */
  --time-opacity-hover: 1.0;          /* 悬停：完全显现 */

  /* 日期标签透明度 */
  --date-opacity-default: 0.65;       /* 默认日期：比之前更强 */
  --date-opacity-hover: 0.85;

  /* 内容颜色（基于长度）*/
  --content-color-short: #333333;         /* 短句：稍淡 */
  --content-color-normal: #1a1a1a;        /* 标准 */

  /* 行高（基于长度）*/
  --line-height-short: 1.6;
  --line-height-normal: 1.7;

  /* 动态间距（基于内容长度）*/
  --entry-spacing-short: 18px;            /* 1行 */
  --entry-spacing-medium: 24px;           /* 2-4行 */
  --entry-spacing-long: 32px;             /* 5行+ */

  /* 极淡背景 */
  --hover-bg: rgba(0, 0, 0, 0.02);

  /* 特殊日期色彩（低饱和度，克制点缀）*/
  --color-anniversary: rgba(139, 99, 56, 0.6);      /* 纪念日：暖棕色（琥珀）*/
  --color-anniversary-bg: rgba(139, 99, 56, 0.08);  /* 纪念日背景 */
  --color-birthday: rgba(47, 79, 108, 0.7);         /* 生日：靛青色（深蓝）*/
  --color-birthday-bg: rgba(47, 79, 108, 0.12);     /* 生日背景 */
}

/* ========================================
   深色模式 - "夜间书房"配色系统
   核心理念：
   1. 背景带蓝调（模拟月光），文字带暖调（模拟烛光）
   2. 极低对比度，主文字不超过 92% 灰
   3. 靠明度差建立层级，而非边框和阴影
   4. 留白加大 10-15%，给"光晕"留空间

   支持两种方式触发：
   1. 系统自动：@media (prefers-color-scheme: dark)
   2. 手动切换：[data-theme="dark"]
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="auto"] {
    /* ========== 背景层级（冷色调，模拟夜空/月光）========== */
    --color-bg-primary: #0f1214;        /* 主背景：略带蓝的深灰（模拟深夜）*/
    --color-bg-elevated-1: #181c20;     /* 一级抬升：时间轴内容区 */
    --color-bg-elevated-2: #242629;     /* 二级抬升：编辑器背景 */
    --color-bg-overlay: rgba(0, 0, 0, 0.85); /* 遮罩层：更深，增强聚焦感 */

    /* ========== 玻璃质感系统（Glassmorphism）========== */
    /* glass-weak: 历史记录卡片（雾面、不抢戏）*/
    --glass-weak-bg: rgba(255, 255, 255, 0.02);
    --glass-weak-bg-hover: rgba(255, 255, 255, 0.04);
    --glass-weak-border: rgba(255, 255, 255, 0.04);
    --glass-weak-border-hover: rgba(255, 255, 255, 0.08);
    --glass-weak-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    --glass-weak-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.10);
    --glass-weak-blur: 6px;

    /* glass: 标准等级（弹出层、Picker）*/
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.12);
    --glass-blur: 10px;
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* glass-strong: 输入框（更"正在发生"）*/
    --glass-strong-bg: rgba(255, 255, 255, 0.04);
    --glass-strong-bg-hover: rgba(255, 255, 255, 0.06);
    --glass-strong-border: rgba(255, 255, 255, 0.08);
    --glass-strong-border-hover: rgba(255, 255, 255, 0.14);
    --glass-strong-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
    --glass-strong-shadow-hover: 0 4px 28px rgba(0, 0, 0, 0.14);
    --glass-strong-blur: 12px;
    --glass-strong-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* ========== 文字层级（暖色调，模拟烛光/台灯）========== */
    --color-text-primary: #e8e0d5;      /* 主文字：略带米色的白（92% 亮度）*/
    --color-text-secondary: #9ba5a8;    /* 次要文字：冷灰（时间戳）- 统一色温 */
    --color-text-tertiary: #6e6860;     /* 三级文字：深暖灰（日期标签）*/
    --color-text-ghost: #484440;        /* 幽灵文字：年份水印等装饰性元素 */

    /* ========== 分割线（极淡的亮线）========== */
    --color-divider: rgba(255, 255, 255, 0.08);

    /* ========== 特殊日期（提亮+调整饱和度，像烛光点缀）========== */
    --color-anniversary: #b8946b;                   /* 暖棕（琥珀）- 提亮 */
    --color-anniversary-bg: rgba(184, 148, 107, 0.10);
    --color-birthday: #7a9bb8;                      /* 靛青 - 提亮 */
    --color-birthday-bg: rgba(122, 155, 184, 0.12);

    /* ========== 时间线系统 ========== */
    --timeline-color: rgba(255, 255, 255, 0.06);   /* 更淡的时间线 */

    /* ========== 交互状态 ========== */
    --hover-bg: rgba(255, 255, 255, 0.04);         /* 微妙的亮化 */

    /* ========== 内容颜色（基于长度）- 深色模式统一处理 ========== */
    --content-color-short: #d8d0c5;     /* 短句：稍淡一点 */
    --content-color-normal: #e8e0d5;    /* 标准：主文字色 */

    /* ========== 排版调整（深色模式需要更多呼吸空间）========== */
    --font-size-content: 15px;          /* 从 16px 缩小（深色文字视觉重量更大）*/
    --font-size-date-number: 20px;      /* 从 22px 缩小 */
    --line-height-content: 1.8;         /* 从 1.7 增加（给光晕留空间）*/
    --line-height-short: 1.7;           /* 从 1.6 增加 */
    --line-height-normal: 1.8;          /* 从 1.7 增加 */

    /* ========== 间距增加（深色背景下需要更夸张的留白）========== */
    --spacing-2xl: 56px;                /* 基数（比浅色略大）*/
    --spacing-3xl: 84px;                /* 1.5x */
    --spacing-4xl: 126px;               /* 1.5x */
    --spacing-5xl: 189px;               /* 1.5x */

    /* ========== 动画速度（深色模式下慢一点更舒缓）========== */
    --transition-normal: 400ms ease;    /* 从 300ms 延长 */
    --transition-slow: 500ms ease-out;  /* 从 400ms 延长 */

    /* ========== 透明度调整 ========== */
    --time-opacity-today: 0.90;         /* 略微提高 */
    --time-opacity-recent: 0.75;        /* 略微提高 */
    --time-opacity-old: 0.60;           /* 略微提高（深色下过淡会看不清）*/
    --time-opacity-hover: 1.0;

    --date-opacity-default: 0.70;       /* 从 0.65 提高 */
    --date-opacity-hover: 0.90;         /* 从 0.85 提高 */
  }
}

/* 手动切换到深色模式 */
:root[data-theme="dark"] {
  /* ========== 背景层级（冷色调，模拟夜空/月光）========== */
  --color-bg-primary: #0f1214;        /* 主背景：略带蓝的深灰（模拟深夜）*/
  --color-bg-elevated-1: #181c20;     /* 一级抬升：时间轴内容区 */
  --color-bg-elevated-2: #242629;     /* 二级抬升：编辑器背景 */
  --color-bg-overlay: rgba(0, 0, 0, 0.85); /* 遮罩层：更深，增强聚焦感 */

  /* ========== 玻璃质感系统（Glassmorphism）========== */
  /* glass-weak: 历史记录卡片（雾面、不抢戏）*/
  --glass-weak-bg: rgba(255, 255, 255, 0.02);
  --glass-weak-bg-hover: rgba(255, 255, 255, 0.04);
  --glass-weak-border: rgba(255, 255, 255, 0.04);
  --glass-weak-border-hover: rgba(255, 255, 255, 0.08);
  --glass-weak-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  --glass-weak-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.10);
  --glass-weak-blur: 6px;

  /* glass: 标准等级（弹出层、Picker）*/
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --glass-shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.12);
  --glass-blur: 10px;
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* glass-strong: 输入框（更"正在发生"）*/
  --glass-strong-bg: rgba(255, 255, 255, 0.04);
  --glass-strong-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-strong-border: rgba(255, 255, 255, 0.08);
  --glass-strong-border-hover: rgba(255, 255, 255, 0.14);
  --glass-strong-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
  --glass-strong-shadow-hover: 0 4px 28px rgba(0, 0, 0, 0.14);
  --glass-strong-blur: 12px;
  --glass-strong-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ========== 文字层级（暖色调，模拟烛光/台灯）========== */
  --color-text-primary: #e8e0d5;      /* 主文字：略带米色的白（92% 亮度）*/
  --color-text-secondary: #9ba5a8;    /* 次要文字：冷灰（时间戳）- 统一色温 */
  --color-text-tertiary: #6e6860;     /* 三级文字：深暖灰（日期标签）*/
  --color-text-ghost: #484440;        /* 幽灵文字：年份水印等装饰性元素 */

  /* ========== 分割线（极淡的亮线）========== */
  --color-divider: rgba(255, 255, 255, 0.08);

  /* ========== 特殊日期（提亮+调整饱和度，像烛光点缀）========== */
  --color-anniversary: #b8946b;                   /* 暖棕（琥珀）- 提亮 */
  --color-anniversary-bg: rgba(184, 148, 107, 0.10);
  --color-birthday: #7a9bb8;                      /* 靛青 - 提亮 */
  --color-birthday-bg: rgba(122, 155, 184, 0.12);

  /* ========== 时间线系统 ========== */
  --timeline-color: rgba(255, 255, 255, 0.06);   /* 更淡的时间线 */

  /* ========== 交互状态 ========== */
  --hover-bg: rgba(255, 255, 255, 0.04);         /* 微妙的亮化 */

  /* ========== 内容颜色（基于长度）- 深色模式统一处理 ========== */
  --content-color-short: #d8d0c5;     /* 短句：稍淡一点 */
  --content-color-normal: #e8e0d5;    /* 标准：主文字色 */

  /* ========== 排版调整（深色模式需要更多呼吸空间）========== */
  --font-size-content: 15px;          /* 从 16px 缩小（深色文字视觉重量更大）*/
  --font-size-date-number: 20px;      /* 从 22px 缩小 */
  --line-height-content: 1.8;         /* 从 1.7 增加（给光晕留空间）*/
  --line-height-short: 1.7;           /* 从 1.6 增加 */
  --line-height-normal: 1.8;          /* 从 1.7 增加 */

  /* ========== 间距增加（深色背景下需要更夸张的留白）========== */
  --spacing-2xl: 56px;                /* 基数（比浅色略大）*/
  --spacing-3xl: 84px;                /* 1.5x */
  --spacing-4xl: 126px;               /* 1.5x */
  --spacing-5xl: 189px;               /* 1.5x */

  /* ========== 动画速度（深色模式下慢一点更舒缓）========== */
  --transition-normal: 400ms ease;    /* 从 300ms 延长 */
  --transition-slow: 500ms ease-out;  /* 从 400ms 延长 */

  /* ========== 透明度调整 ========== */
  --time-opacity-today: 0.90;         /* 略微提高 */
  --time-opacity-recent: 0.75;        /* 略微提高 */
  --time-opacity-old: 0.60;           /* 略微提高（深色下过淡会看不清）*/
  --time-opacity-hover: 1.0;

  --date-opacity-default: 0.70;       /* 从 0.65 提高 */
  --date-opacity-hover: 0.90;         /* 从 0.85 提高 */
}

/* ========================================
   手动切换到浅色模式 [data-theme="light"]
   显式定义浅色模式的变量，确保从深色切换回来时正确重置
   ======================================== */

:root[data-theme="light"] {
  /* ========== 恢复浅色模式的默认值 ========== */
  --color-bg-primary: #fafafa;
  --color-bg-elevated-1: #ffffff;
  --color-bg-elevated-2: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-tertiary: #aaaaaa;

  --color-divider: #e8e8e8;

  --color-anniversary: rgba(139, 99, 56, 0.6);
  --color-anniversary-bg: rgba(139, 99, 56, 0.08);
  --color-birthday: rgba(47, 79, 108, 0.7);
  --color-birthday-bg: rgba(47, 79, 108, 0.12);

  --timeline-color: rgba(0, 0, 0, 0.08);

  --hover-bg: rgba(0, 0, 0, 0.02);

  --content-color-short: #333333;
  --content-color-normal: #1a1a1a;

  /* 恢复浅色模式的排版 */
  --font-size-content: 16px;
  --font-size-date-number: 22px;
  --line-height-content: 1.7;
  --line-height-short: 1.6;
  --line-height-normal: 1.7;

  /* 恢复浅色模式的间距 */
  --spacing-2xl: 48px;
  --spacing-3xl: 72px;
  --spacing-4xl: 108px;
  --spacing-5xl: 162px;

  /* 恢复浅色模式的动画速度 */
  --transition-normal: 300ms ease;
  --transition-slow: 400ms ease-out;

  /* 恢复浅色模式的透明度 */
  --time-opacity-today: 0.85;
  --time-opacity-recent: 0.70;
  --time-opacity-old: 0.55;
  --time-opacity-hover: 1.0;

  --date-opacity-default: 0.65;
  --date-opacity-hover: 0.85;
}