/* 我们的小世界 · 深色主题
 *
 * 触发方式：<html data-theme="dark">
 * 只覆盖 CSS 变量，不重复写任何结构规则——所有组件自动适配。
 *
 * 配色原则：
 * 1. 不用纯黑做背景。纯黑在 OLED 上对比过强，夜里看情绪类内容会很累。
 *    这里用 #161311 的暖黑，保留产品一贯的暖色调性。
 * 2. 主色在深色下要提亮，否则珊瑚色会发闷、失去辨识度。
 * 3. "浅底深字"的区块（问题卡、悄悄话、雷区提示）反转为"深底浅字"，
 *    并降低饱和度——高饱和色块在深色背景上会显得刺眼。
 */

html[data-theme="dark"] {
  /* 基础层 */
  --bg: #161311;
  --card: #211C1A;
  --primary: #E09A80;          /* 提亮：原 #C97B63 在深底上偏暗 */
  --primary-deep: #F0B39C;     /* 深底上"更深"反而要更亮，否则看不清 */
  --sage: #A3C29F;
  --lavender: #C4B2D6;
  --text: #EDE4DE;
  --muted: #9B8C84;
  --line: #332C29;
  --warm: #D9A08A;
  --danger: #D98A8A;

  /* 语义层 */
  --on-primary: #2A1F1B;       /* 主色按钮上的文字，深色底上要反过来用深色字 */
  --surface-2: #2A2421;        /* 卡片内的次级底（输入框、列表项） */
  --soft-warm: #2E2521;
  --soft-warm-2: #362B26;
  --soft-lavender: #2C2634;
  --soft-lavender-2: #332B3C;
  --soft-lavender-3: #3A3145;
  --soft-green: #253029;
  --soft-red: #332423;
  --soft-red-2: #3B2A29;
  --soft-gold-a: #F0CE9A;
  --soft-gold-b: #C69246;
  /* 渐变起点色：浅色下是"浅端"，深色下要换成同色系的深端，
     否则呼吸圆、人物横幅会在深色页面里浮出一块亮斑 */
  --lavender-soft-a: #4A3B5C;
  --warm-soft-a: #5A3E31;
  --ink-purple: #C9B8DA;       /* 原深紫字 → 在深底上要变成浅紫字 */
  --ink-green: #A8C4A4;
  --ink-red: #E0A9A0;
  /* 深色下同样要提亮，否则身份色会和背景糊在一起 */
  --who-he: #E09A80;
  --who-she: #C4B2D6;
  --faint: #6E625C;

  /* 热力图梯度：深色下整体降饱和，避免夜览刺眼 */
  --heat-0: #2A2421;
  --heat-1: #4A3029;
  --heat-2: #6B4133;
  --heat-3: #96543E;
  --heat-4: #C97050;

  /* 柔光与阴影 */
  --glow-a: rgba(224,154,128,0.08);
  --glow-b: rgba(196,178,214,0.08);
  --shadow: rgba(0,0,0,0.35);
  --overlay: rgba(0,0,0,0.6);
  --overlay-solid: #000;
}

/* 深色下的几处细节修正（变量覆盖够不到的地方） */
html[data-theme="dark"] body {
  /* 柔光层在深色下要克制，否则背景会发灰 */
  background-image: radial-gradient(ellipse at 20% 0%, var(--glow-a), transparent 50%),
                    radial-gradient(ellipse at 100% 100%, var(--glow-b), transparent 50%);
}

/* 输入框/多行文本：placeholder 在深色下默认偏暗，提一档 */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6E625C; }

/* 深色下自动填充的白色背景会很难看 */
html[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
}

/* 选中文本 */
html[data-theme="dark"] ::selection { background: rgba(224,154,128,0.3); color: var(--text); }

/* 状态栏/地址栏颜色，让 PWA 与页面色调一致（配合 manifest 的 theme_color） */
html[data-theme="dark"] { color-scheme: dark; }