/* === theme-light.css (P416 颜色契约重置:浅色覆盖 5 原色 + 方向相反派生) === */

/* ========================================
   14. 浅色主题

   P416:本文件只覆盖必要的变量,大多数派生从 01-variables.css 的 color-mix() 公式
   通过 5 原色变化自动跟随。仅以下三类需要显式覆盖:
   1. 5 个 --theme-* 原色(主题色相位)
   2. 方向相反的派生(暗色 white 提亮 vs 浅色 black 加深)
   3. 浅色微差派生(浮层结构与暗色不同)
   4. CTA 浅色中性化(P412 决策:CTA 改深墨黑,而非金色)
   5. 状态色 / accent / shadow / persona 独立色系(本刀不收敛,保留原值)
   ======================================== */

:root[data-theme="light"] {
  /* P590:原生控件跟随浅色主题(对应 01-variables 的 color-scheme: dark) */
  color-scheme: light;

  /* ── Theme primaries(浅色 5 原色)── */
  --theme-bg:      #FCFBF8;
  --theme-surface: #FFFFFF;
  --theme-accent:  #C3AA73;
  --theme-primary: #212A42;
  --theme-border:  #E5E1D7;

  /* ── 方向相反的派生(暗色用 white 提亮,浅色用 black 加深)── */
  --brand-primary-hover: color-mix(in srgb, var(--theme-accent) 85%, black);
  --brand-mark:          color-mix(in srgb, var(--theme-accent) 85%, black);  /* 浅底上品牌金发虚,标志金点深一档 */
  --text-bright:         color-mix(in srgb, var(--theme-primary) 92%, black);

  /* ── 浅色版微差派生 ── */
  --bg-floating:      var(--theme-surface);  /* 浅色版浮层 = 纯白,靠强阴影与米白页面区分 */
  --bg-surface-hover: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-primary));  /* 浅色 hover 用 primary 提暗 */
  /* P427:浅色 deep 改用 theme-border(同色系米白偏灰)加深。原 primary(深墨蓝)
     跟 theme-bg(米白)色相距离太远,mix 出死灰(像 wireframe 模板)。
     border 跟 bg 同色相,加深后保留奶白质感,符合"轻奢暖白"品牌调性。
     消费点(非仅手机端):
       - 05-messages.css .msg-ai-content pre 代码块
       - 08-responsive.css .vnc-viewer(VNC 浏览器代理面板) */
  --bg-deep:          color-mix(in srgb, var(--theme-bg) 60%, var(--theme-border));

  /* ── CTA(P412 浅色中性化:CTA 改深墨黑实心)──
     金色只保留给:临时按钮(P411)/ 选中描边 / pin 徽标 / focus ring。 */
  --bg-cta-primary:       var(--theme-primary);
  --bg-cta-primary-hover: color-mix(in srgb, var(--theme-primary) 90%, black);

  /* ── Chat role colors(P417:浅色用户气泡用主色底,发送按钮用金色底)── */
  --chat-main-bg:       var(--theme-bg);
  --user-message-bg:    color-mix(in srgb, var(--theme-accent) 18%, var(--theme-bg));  /* 暖金灰浅色版 */
  --user-message-text:  var(--text-main);
  --user-message-border: transparent;
  --send-bg:            var(--theme-accent);
  --send-bg-hover:      color-mix(in srgb, var(--theme-accent) 85%, black);
  --send-text:          #FFFFFF;

  /* ── Status(独立色系,浅色版语义色保持识别度,本刀不收敛)── */
  --success-color: #2F7D55;
  --success-bg:        rgba(47, 125, 85, 0.12);
  --success-bg-light:  rgba(47, 125, 85, 0.08);
  --success-border:    rgba(47, 125, 85, 0.30);
  --success-glow:      rgba(47, 125, 85, 0.24);

  --error-color: #B33A3A;
  --error-text:  #B33A3A;
  --error-bg:            rgba(179, 58, 58, 0.10);
  --error-bg-strong:     rgba(179, 58, 58, 0.18);
  --error-border:        rgba(179, 58, 58, 0.22);
  --error-border-strong: rgba(179, 58, 58, 0.30);

  --warning-color: #B56B18;
  --warning-bg:     rgba(181, 107, 24, 0.10);
  --warning-border: rgba(181, 107, 24, 0.25);

  /* info 和链接倾向灰蓝,避免所有提示都变金色 */
  --info-color:     #2F6F73;
  --info-bg:        rgba(47, 111, 115, 0.10);
  --info-bg-subtle: rgba(47, 111, 115, 0.06);
  --info-bg-strong: rgba(47, 111, 115, 0.18);
  --info-border:    rgba(47, 111, 115, 0.22);

  /* ── Accent(独立色系)── */
  --accent-green:        #2F7D55;
  --accent-red:          #B33A3A;
  --accent-blue:         #2F6F73;
  --accent-orange:       #B56B18;
  --accent-orange-light: #C9862D;
  --accent-cyan:         #16818C;
  --cyan-border:       rgba(47, 111, 115, 0.22);
  --cyan-border-light: rgba(47, 111, 115, 0.12);

  /* ── Neutral ── */
  --neutral-bg:    rgba(95, 103, 93, 0.10);
  --neutral-color: #5F675D;

  /* ── Shadow(中性柔影)── */
  --shadow-overlay: rgba(24, 29, 25, 0.20);
  --shadow-deep:    rgba(24, 29, 25, 0.14);
  --shadow-ambient: 0 1px 3px rgba(24, 29, 25, 0.08);
  --gradient-shimmer: linear-gradient(90deg, var(--text-main), #B8C1B4);

  /* ── Persona ── */
  --persona-rose: #B33A3A;
}

/* ──────────────────────────────────────────────────────────────
   P414 结构性最小例外(P416 保留:无对应语义变量,非颜色差异)
   ────────────────────────────────────────────────────────────── */

/* 例外 1:浅色版三浮岛补可见边界。深色版浮岛靠背景明度差天然分隔;
   浅色版白叠米白对比低,需显式边框。已用变量驱动,非硬编码。 */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] #app-main {
  border-color: var(--border-light);
}

/* 例外 2:浅色版滚动条着色。深色版用浏览器默认深色滑块即可,
   浅色版需显式指定;滚动条着色无对应语义变量,保留为最小例外。 */
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--text-dim); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ──────────────────────────────────────────────────────────────
   P428-2 用户局部审美决策:三处浅色组件覆盖
   ──────────────────────────────────────────────────────────────
   背景:P412 浅色 CTA 中性化(--bg-cta-primary = theme-primary 深墨黑)对
   "对话发送"等全局通用 CTA 是合适的,但下列三处局部场景用户拍板要求差异化:
     - feature-panel 主按钮(复制为我的顾问)→ 走品牌色(类似临时按钮 P411)
     - sidebar 新建按钮(+ 号)→ 浅色版改为 ghost 风格(深色实心块过重)
     - 模型选择器按钮文字 → 浅色版用主文本色(金色文字在浅底可读性差)
   契约:全部用现有变量,无新 hex,无新 token,不动暗色版。
   ────────────────────────────────────────────────────────────── */

/* 例外 3:feature-panel 主按钮在浅色版走品牌色金底(暗色版仍走 --bg-cta-primary
   通用 CTA 即金底,本例外只针对浅色 — 暗色行为不变)。文字用 --theme-surface
   即纯白,与 P417 chat 角色色 .send-text 浅色版 #FFFFFF
   策略一致(语义化版本)。 */
:root[data-theme="light"] .feature-panel .panel-btn.primary {
  background: var(--brand-primary);
  color: var(--theme-surface);
}
:root[data-theme="light"] .feature-panel .panel-btn.primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
}

/* 标志金点:支持相对色的浏览器压亮度同时补饱和,深一档但不发灰(上面 color-mix 是兜底) */
@supports (color: oklch(from red l c h)) {
  :root[data-theme="light"] { --brand-mark: oklch(from var(--theme-accent) calc(l - 0.08) calc(c + 0.03) h); }
}

/* P429:原例外 4(sidebar 新建按钮浅色 ghost 覆盖)已删除 — 暗浅两版统一走
   03-layout.css 内"金线 ghost"主规则,brand 派生变量自动跟随两版主题色,无需例外 */