/* ==========================================================================
   设计令牌（Design Tokens）
   所有颜色、间距、字号都集中在这里，禁止在其它样式文件中写死颜色值。
   这样将来要加深色主题或调整视觉风格时，只需要改这一个文件。
   ========================================================================== */

:root {
  /* —— 颜色：以"安静的学习工具"为目标，避免高饱和与大面积渐变 —— */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f3f6;
  --color-border: #dfe3e8;
  --color-border-strong: #c3cad3;

  --color-text: #1c2430;
  --color-text-muted: #5b6675;
  --color-text-faint: #8a94a3;

  --color-primary: #2f6fd0;
  --color-primary-hover: #265bb0;
  --color-primary-soft: #e8f0fb;

  --color-study: #2f6fd0; /* 学习时段 */
  --color-study-soft: #dce9fa;
  --color-fixed: #8a94a3; /* 固定活动 */
  --color-fixed-soft: #edeff2;
  --color-rest: #3f9e7f; /* 计划休息 */
  --color-rest-soft: #dcefe8;
  --color-accent: #b8912f; /* 强调色（用于图表与统计磁贴） */
  --color-accent-soft: #f6eed8;
  --color-locked: #6b4fd0; /* 已锁定 */
  --color-locked-soft: #e7e1fa;

  --color-danger: #c0392b;
  --color-danger-soft: #fbe9e7;
  --color-warning: #a9720f;
  --color-warning-soft: #fdf3dd;
  --color-success: #2f7d55;
  --color-success-soft: #e3f2ea;

  /* —— 间距 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;

  /* —— 圆角与阴影：少量、克制 —— */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(28, 36, 48, 0.06);
  --shadow-md: 0 2px 8px rgba(28, 36, 48, 0.08);

  /* —— 布局尺寸 —— */
  --sidebar-width: 208px;
  --topbar-height: 56px;
  /* 七天计划看板的尺寸基准：5 分钟 = 一个标准格 */
  --day-grid-step: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   主题：浅色 / 深色 / 跟随系统
   规则：语义色一律通过令牌访问，任何组件都不得写死颜色。
   深色主题只需重定义下面这些变量，所有页面、弹窗、输入框、日历与图表会自动适配。
   ========================================================================== */

/* 显式选择的深色主题 */
:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #12161c;
  --color-surface: #1a1f27;
  --color-surface-alt: #222833;
  --color-border: #2e3641;
  --color-border-strong: #435062;

  --color-text: #e8edf4;
  --color-text-muted: #a7b2c1;
  --color-text-faint: #7b8798;

  --color-primary: #6ba4f0;
  --color-primary-hover: #8ab8f5;
  --color-primary-soft: #1e2c42;

  --color-study: #6ba4f0;
  --color-study-soft: #1e2c42;
  --color-fixed: #8b97a8;
  --color-fixed-soft: #262d38;
  --color-rest: #4fbf9a;
  --color-rest-soft: #172f28;
  --color-accent: #d6ae4e;
  --color-accent-soft: #302818;
  --color-locked: #9c85ee;
  --color-locked-soft: #251f3d;

  --color-danger: #f0776a;
  --color-danger-soft: #37201d;
  --color-warning: #e0b357;
  --color-warning-soft: #332a17;
  --color-success: #5cbd8b;
  --color-success-soft: #172e23;

  /* 深色下阴影要更重，否则卡片会"浮"不起来 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* 跟随系统：仅在用户没有显式选择浅/深色时生效 */
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'],
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-bg: #12161c;
    --color-surface: #1a1f27;
    --color-surface-alt: #222833;
    --color-border: #2e3641;
    --color-border-strong: #435062;

    --color-text: #e8edf4;
    --color-text-muted: #a7b2c1;
    --color-text-faint: #7b8798;

    --color-primary: #6ba4f0;
    --color-primary-hover: #8ab8f5;
    --color-primary-soft: #1e2c42;

    --color-study: #6ba4f0;
    --color-study-soft: #1e2c42;
    --color-fixed: #8b97a8;
    --color-fixed-soft: #262d38;
    --color-rest: #4fbf9a;
    --color-rest-soft: #172f28;
    --color-accent: #d6ae4e;
    --color-accent-soft: #302818;
    --color-locked: #9c85ee;
    --color-locked-soft: #251f3d;

    --color-danger: #f0776a;
    --color-danger-soft: #37201d;
    --color-warning: #e0b357;
    --color-warning-soft: #332a17;
    --color-success: #5cbd8b;
    --color-success-soft: #172e23;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   自定义壁纸
   ==========================================================================

   层级关系（这里曾经出过一个严重问题，改动前请先读完）：

   `#app-wallpaper` 必须用**负的 z-index**（-1）。
   定位元素若写成 z-index: 0，按 CSS 绘制顺序它会画在**普通流内容之上**——
   于是整页会被壁纸和遮罩糊住：文字发蒙、部分区块看不见、点击也会被盖住。
   负 z-index 才会落到"内容之下、页面背景之上"的正确位置，而且不需要给
   任何业务元素加 z-index。

   另外：
   - 壁纸层不接收鼠标事件（pointer-events: none），不参与无障碍树；
   - **不再对卡片使用 backdrop-filter / 半透明底色**。
     那是"整个界面发蒙"的第二个原因：模糊作用在了承载文字的容器上。
     壁纸只作为背景，前景一律保持不透明，保证任何照片下文字都清晰。
*/

#app-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 遮罩：把壁纸压暗/压淡，保证与前景的对比度。数值固定，不提供调节。 */
#app-wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: 0.62;
}

/* 有壁纸时，页面容器透明，让壁纸透出来；卡片本身保持不透明以承载文字 */
:root[data-wallpaper='on'] .app,
:root[data-wallpaper='on'] .app-main {
  background: transparent;
}

/* ==========================================================================
   液态玻璃（Liquid Glass）材质令牌
   ==========================================================================

   阅读顺序很重要，这里记录**为什么这么分层**：

   项目曾经因为"壁纸 + 全页 backdrop-filter + 半透明卡片"导致整页发蒙。
   所以这次的玻璃只覆盖三类**离散表面**，绝不作用于 body / .app / .app-main：

     Tier 1 外壳（品牌区、顶栏、侧边栏）：真模糊，因为它们是固定的窄条；
     Tier 2 内容卡片：只做"高不透明度玻璃 tint"，**不模糊**（正文可读性优先）；
     Tier 3 浮层（弹窗、Toast、菜单）：最强玻璃 + 更大阴影。

   壁纸开启时所有玻璃再提高约 8% 不透明度，保证任何照片下都清晰。
   ========================================================================== */

:root {
  /* —— 模糊与饱和 —— */
  --glass-blur: 20px;
  --glass-blur-strong: 26px;
  --glass-blur-soft: 12px; /* 移动端降级 */
  --glass-saturate: 165%;

  /* —— 表面：外壳（Tier 1） —— */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.82);

  /* —— 表面：内容卡片（Tier 2）—— 不模糊，靠不透明度承载文字 */
  --glass-bg-card: rgba(255, 255, 255, 0.9);
  --glass-bg-card-hover: rgba(255, 255, 255, 0.95);

  /* —— 表面：浮层（Tier 3） —— */
  --glass-bg-strong: rgba(255, 255, 255, 0.86);

  /* —— 边缘光与投影 —— */
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-border-outer: rgba(28, 36, 48, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.62);
  --glass-shade: rgba(28, 36, 48, 0.05);
  --glass-shadow: 0 1px 2px rgba(28, 36, 48, 0.05), 0 8px 24px rgba(28, 36, 48, 0.07);
  --glass-shadow-hover: 0 2px 4px rgba(28, 36, 48, 0.06), 0 14px 34px rgba(28, 36, 48, 0.1);
  --glass-shadow-float: 0 8px 20px rgba(28, 36, 48, 0.12), 0 32px 64px rgba(28, 36, 48, 0.16);

  /* —— 圆角与噪点 —— */
  --glass-radius-lg: 22px;
  --glass-radius-md: 14px;
  --glass-radius-sm: 10px;
  --glass-noise-opacity: 0.025;

  /* —— 氛围色场（背景光斑） —— */
  --ambient-1: rgba(120, 165, 235, 0.14);
  --ambient-2: rgba(96, 196, 178, 0.12);
  --ambient-3: rgba(214, 178, 94, 0.1);
  --ambient-opacity: 1;

  /* —— 鼠标高光位置（由 JS 更新） —— */
  --glass-x: 50%;
  --glass-y: 0%;
}

/* 深色：烟熏玻璃，不纯黑；边框高光更细，阴影更重 */
:root[data-theme='dark'] {
  --glass-bg: rgba(26, 31, 39, 0.7);
  --glass-bg-hover: rgba(34, 40, 51, 0.82);
  --glass-bg-card: rgba(26, 31, 39, 0.92);
  --glass-bg-card-hover: rgba(34, 40, 51, 0.96);
  --glass-bg-strong: rgba(26, 31, 39, 0.88);

  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-outer: rgba(0, 0, 0, 0.4);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shade: rgba(0, 0, 0, 0.28);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.34);
  --glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.44), 0 16px 38px rgba(0, 0, 0, 0.42);
  --glass-shadow-float: 0 10px 24px rgba(0, 0, 0, 0.5), 0 36px 72px rgba(0, 0, 0, 0.55);

  --ambient-1: rgba(90, 130, 200, 0.14);
  --ambient-2: rgba(60, 140, 130, 0.1);
  --ambient-3: rgba(180, 150, 80, 0.08);
  --ambient-opacity: 0.9;
}

/* 跟随系统深色 */
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'],
  :root:not([data-theme]) {
    --glass-bg: rgba(26, 31, 39, 0.7);
    --glass-bg-hover: rgba(34, 40, 51, 0.82);
    --glass-bg-card: rgba(26, 31, 39, 0.92);
    --glass-bg-card-hover: rgba(34, 40, 51, 0.96);
    --glass-bg-strong: rgba(26, 31, 39, 0.88);

    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-outer: rgba(0, 0, 0, 0.4);
    --glass-highlight: rgba(255, 255, 255, 0.16);
    --glass-shade: rgba(0, 0, 0, 0.28);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.34);
    --glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.44), 0 16px 38px rgba(0, 0, 0, 0.42);
    --glass-shadow-float: 0 10px 24px rgba(0, 0, 0, 0.5), 0 36px 72px rgba(0, 0, 0, 0.55);

    --ambient-1: rgba(90, 130, 200, 0.14);
    --ambient-2: rgba(60, 140, 130, 0.1);
    --ambient-3: rgba(180, 150, 80, 0.08);
    --ambient-opacity: 0.9;
  }
}

/* 壁纸开启：玻璃更实（+6%~10%），否则照片会透上来把字搅浑 */
:root[data-wallpaper='on'] {
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-bg-card: rgba(255, 255, 255, 0.94);
  --glass-bg-card-hover: rgba(255, 255, 255, 0.97);
  --glass-bg-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 1px 2px rgba(20, 26, 34, 0.08), 0 10px 28px rgba(20, 26, 34, 0.12);
  --glass-shadow-hover: 0 2px 4px rgba(20, 26, 34, 0.1), 0 16px 38px rgba(20, 26, 34, 0.16);
}

:root[data-wallpaper='on'][data-theme='dark'] {
  --glass-bg: rgba(26, 31, 39, 0.8);
  --glass-bg-hover: rgba(34, 40, 51, 0.88);
  --glass-bg-card: rgba(24, 29, 37, 0.95);
  --glass-bg-card-hover: rgba(30, 36, 46, 0.97);
  --glass-bg-strong: rgba(26, 31, 39, 0.94);
}

/* —— 降级：不支持 backdrop-filter 的浏览器 —— */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: var(--color-surface);
    --glass-bg-hover: var(--color-surface-alt);
    --glass-bg-card: var(--color-surface);
    --glass-bg-card-hover: var(--color-surface);
    --glass-bg-strong: var(--color-surface);
    --glass-border: var(--color-border);
    --glass-highlight: transparent;
  }
}

/* —— 降级：用户要求减少透明 —— */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--color-surface);
    --glass-bg-hover: var(--color-surface);
    --glass-bg-card: var(--color-surface);
    --glass-bg-card-hover: var(--color-surface);
    --glass-bg-strong: var(--color-surface);
    --glass-border: var(--color-border);
    --glass-highlight: transparent;
    --ambient-opacity: 0;
  }
}