/* tokens.css —— 全部 --trpb-* 变量（浅色一组 + 夜间一组）。
   规矩：**整个本体里只有这个文件允许出现颜色值**，别处一律 var(--trpb-xxx)。 */

/* =========================================================================
   Trpb · 补丁 02 —— 主屏组件布局 + 全局浅色 + 颜色全变量化
   单文件、零外部资源、零写死颜色。
   界面上一个颜色值都不许出现在变量声明以外的地方（见 AGENTS.md「配色规矩」）
   ========================================================================= */
/* =========================================================================
   一、颜色登记簿 —— 全项目唯一允许出现颜色值的地方
   变量按用途命名，不按颜色命名。
   ========================================================================= */
:root{
  color-scheme: light;

  /* 壁纸 / 机外底色 */
  --trpb-wall-1: #ffffff;
  --trpb-wall-2: #f0f0f4;
  --trpb-wallpaper: linear-gradient(180deg, var(--trpb-wall-1) 0%, var(--trpb-wall-2) 100%);
  --trpb-stage-bg: #e9e9ec;

  /* 机壳 */
  --trpb-frame: #d5d5db;
  --trpb-frame-shadow: 0 26px 50px rgba(20,20,40,.22), 0 0 0 1px rgba(0,0,0,.05);

  /* 面板层级：靠面板亮一档 + 细描边分层，不靠重阴影 */
  --trpb-surface: #ffffff;
  --trpb-surface-2: #f7f7fa;
  --trpb-sunken: #ececf0;
  --trpb-dock: rgba(255,255,255,.62);
  --trpb-dock-blur: blur(14px);
  --trpb-line: rgba(20,20,30,.09);
  --trpb-line-strong: rgba(20,20,30,.20);

  /* 文字 */
  --trpb-text: #1b1b22;
  --trpb-text-strong: #101015;
  --trpb-text-dim: #6d6d78;
  --trpb-text-faint: #a0a0ab;
  --trpb-icon: #2a2a33;

  /* 强调色：四个可选主题色 + 由它派生的两层半透明 */
  --trpb-theme-1: #ff5a1f;
  --trpb-theme-2: #f0a02a;
  --trpb-theme-3: #e0457b;
  --trpb-theme-4: #29b6a8;
  --trpb-accent: var(--trpb-theme-1);
  --trpb-accent-soft: color-mix(in srgb, var(--trpb-accent) 12%, transparent);
  --trpb-accent-line: color-mix(in srgb, var(--trpb-accent) 42%, transparent);
  --trpb-on-accent: #1a1a1f;
  --trpb-lamp-glow: 0 0 7px -1px var(--trpb-accent);

  /* 阴影 / 焦点环 / 文字阴影 */
  --trpb-shadow-1: 0 1px 2px rgba(20,20,35,.06);
  --trpb-shadow-2: 0 8px 22px rgba(20,20,35,.10);
  --trpb-ring: 0 0 0 2px var(--trpb-accent-soft);
  --trpb-textshadow: none;

  /* 控件 */
  --trpb-track: #e6e6ec;
  --trpb-knob: #ffffff;
  --trpb-knob-edge: rgba(20,20,30,.14);
  --trpb-scroll: rgba(20,20,30,.18);
  --trpb-fill: 33%;

  /* 步进格子：没点亮的那格 —— 看得见它在那儿，但很弱 */
  --trpb-step-off: rgba(20,20,30,.16);

  /* 音乐组件的圆盘 */
  --trpb-disc-idle: var(--trpb-sunken);
  --trpb-disc-playing: radial-gradient(circle at 36% 30%, #b9b9c8 0 10%, #6a6a7c 30%, #26262f 76%, #101015 100%);

  /* 尺寸与字号（不是颜色，但集中放便于以后调）
     小字带 12px 地板：外观页的字号滑块拉到最小（13px）时也不会糊 */
  --trpb-radius: 22px;
  --trpb-t: 180ms;
  --trpb-font-size: 15px;
  --trpb-font-small: max(12px, .8rem);
  --trpb-font-mid: max(13px, .86rem);
  --trpb-font-body: max(14px, .94rem);
  --trpb-sans: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  --trpb-mono: ui-monospace, Consolas, monospace;
}

/* =========================================================================
   二、夜间那套值 —— 只换变量值，不动任何布局。
   同一张色卡挂两个地方，**两处必须一字不差**（外面有脚本逐行比对，改一处就得改另一处）：
     · 跟随系统 → @media (prefers-color-scheme: dark)
     · 手动选「暗」→ html[data-trpb-mode="dark"]
   手动选「亮」时属性是 light，媒体查询那条用 :not() 让位 —— 所以「亮」压得住系统。
   这套值是按 AGENTS.md「不违和的深色」那 8 条写的：近黑不纯黑 / 正文微灰不纯白 /
   层级靠面板亮一档 + 细描边 / 半透明反向 / 图标跟着翻 / 强调色降一档 /
   color-scheme 跟着翻 / 壁纸压暗。
   ========================================================================= */
@media (prefers-color-scheme: dark){
  html:not([data-trpb-mode="light"]){
    color-scheme: dark;

    --trpb-wall-1: #1b1b21;
    --trpb-wall-2: #0a0a0d;
    --trpb-stage-bg: #131317;

    --trpb-frame: #17171b;
    --trpb-frame-shadow: 0 30px 60px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.06);

    --trpb-surface: #17171c;
    --trpb-surface-2: #1e1e24;
    --trpb-sunken: #000000;
    --trpb-dock: rgba(32,32,40,.55);
    --trpb-line: rgba(255,255,255,.08);
    --trpb-line-strong: rgba(255,255,255,.22);

    --trpb-text: #f2f2f6;
    --trpb-text-strong: #ffffff;
    --trpb-text-dim: #b9b9c4;
    --trpb-text-faint: #7b7b86;
    --trpb-icon: #e6e6ee;

    --trpb-accent-soft: color-mix(in srgb, var(--trpb-accent) 24%, transparent);
    --trpb-accent-line: color-mix(in srgb, var(--trpb-accent) 58%, transparent);
    --trpb-on-accent: #14100d;

    --trpb-shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --trpb-shadow-2: 0 10px 26px rgba(0,0,0,.55);
    --trpb-textshadow: 0 1px 5px rgba(0,0,0,.70);

    --trpb-track: #2b2b34;
    --trpb-knob: #e6e6ee;
    --trpb-knob-edge: rgba(0,0,0,.50);
    --trpb-scroll: rgba(255,255,255,.20);
    --trpb-step-off: rgba(255,255,255,.20);
  }
}

html[data-trpb-mode="dark"]{
  color-scheme: dark;

  --trpb-wall-1: #1b1b21;
  --trpb-wall-2: #0a0a0d;
  --trpb-stage-bg: #131317;

  --trpb-frame: #17171b;
  --trpb-frame-shadow: 0 30px 60px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.06);

  --trpb-surface: #17171c;
  --trpb-surface-2: #1e1e24;
  --trpb-sunken: #000000;
  --trpb-dock: rgba(32,32,40,.55);
  --trpb-line: rgba(255,255,255,.08);
  --trpb-line-strong: rgba(255,255,255,.22);

  --trpb-text: #f2f2f6;
  --trpb-text-strong: #ffffff;
  --trpb-text-dim: #b9b9c4;
  --trpb-text-faint: #7b7b86;
  --trpb-icon: #e6e6ee;

  --trpb-accent-soft: color-mix(in srgb, var(--trpb-accent) 24%, transparent);
  --trpb-accent-line: color-mix(in srgb, var(--trpb-accent) 58%, transparent);
  --trpb-on-accent: #14100d;

  --trpb-shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --trpb-shadow-2: 0 10px 26px rgba(0,0,0,.55);
  --trpb-textshadow: 0 1px 5px rgba(0,0,0,.70);

  --trpb-track: #2b2b34;
  --trpb-knob: #e6e6ee;
  --trpb-knob-edge: rgba(0,0,0,.50);
  --trpb-scroll: rgba(255,255,255,.20);
  --trpb-step-off: rgba(255,255,255,.20);
}