/* server-dsh · 设计令牌（Design Tokens）
 *
 * 本文件是**唯一的视觉真源**。其它 CSS 只允许引用变量，不得写死颜色/尺寸。
 * 改动这里等于改全站视觉，务必谨慎。
 *
 * 风格锚点（PLAN.md 第 2.6 章）：Claude 控制台风格
 *   - 暖调深灰底（非纯黑），文字暖白（非纯白）——纯黑纯白会显得刺眼且廉价
 *   - 主强调色为陶土橙 #d97757
 *   - 圆角克制、边框极淡、不用阴影堆叠
 *   - 动效短促（150–250ms），只动 opacity/transform（GPU 加速、不触发重排）
 *
 * ⚠️ CSP 说明：本项目 CSP 为 `style-src 'self' 'unsafe-inline'`，
 *    故 CSS 可内联、也可由 JS 动态写 CSS 变量（登录页的台灯换色依赖此能力）。
 *    但 `script-src 'self'` 禁止 inline script —— 见 base.html 的注释。
 */

:root {
  /* ── 颜色：底色与面板 ─────────────────────────────────
   * 暖调深灰。色相统一偏黄（hue ≈ 60），避免冷灰带来的"工程感"。
   */
  --color-bg: #0f0f0e;
  --color-bg-elevated: #161614;
  --color-panel: #1a1a18;
  --color-panel-hover: #202020;

  /* ── 颜色：文字 ───────────────────────────────────── */
  --color-text: #f5f4ef;          /* 暖白，主文字 */
  --color-text-muted: #8a8880;    /* 次文字，说明性信息 */
  --color-text-faint: #5c5a55;    /* 更弱，占位符与禁用态 */

  /* ── 颜色：强调与语义 ─────────────────────────────── */
  --color-accent: #d97757;        /* Claude 标志性陶土橙 */
  --color-accent-hover: #e0836a;
  --color-accent-dim: rgba(217, 119, 87, 0.14);
  --color-success: #4a9d5f;
  --color-warning: #d9a15b;
  --color-danger: #c0483c;
  --color-danger-dim: rgba(192, 72, 60, 0.14);

  /* ── 颜色：边框与分隔 ─────────────────────────────── */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-focus: var(--color-accent);

  /* ── 圆角 ─────────────────────────────────────────── */
  --radius-card: 12px;
  --radius-control: 8px;          /* 按钮、输入框 */
  --radius-pill: 999px;

  /* ── 间距（8px 基准网格）──────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── 字号与行高 ───────────────────────────────────── */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
                      "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
                      Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                      "Liberation Mono", Menlo, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;
  --font-size-3xl: 34px;

  --line-height-tight: 1.25;
  --line-height-base: 1.6;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ── 动效 ─────────────────────────────────────────── */
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);   /* 轻回弹，浮入用 */

  /* ── 层级 ─────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── 布局 ─────────────────────────────────────────── */
  --layout-max-width: 720px;
  --layout-panel-max-width: 1200px;

  /* 触控目标最小尺寸（移动端可用性硬要求，勿下调）*/
  --touch-target-min: 44px;

  /* ── 背景媒体（登录页视频/海报，由 media.js 按需注入）── */
  --backdrop-blur: 20px;
  --backdrop-dim: rgba(15, 15, 14, 0.72);

  /* ── 光影专用色（T10b 新增）──────────────────────────
   * 这些是**灯光**用的色值，不是 UI 语义色，故单列一组。
   * 集中在此的理由与其它令牌相同：颜色只允许在 tokens.css 定义，
   * 组件 CSS 一律引用（有测试守住这条边界）。
   *
   * ⚠️ 灯光色相由 theme.js 写入 --lamp-hue / --lamp-glow / --lamp-color，
   *    这三个是**运行时变量**，不在此定义（它们随每次拉灯变化）。
   */
  --light-air-top: rgba(255, 214, 170, 0.045);   /* 顶部空气感微亮 */
  --light-vignette: rgba(0, 0, 0, 0.55);         /* 暗角 */
  --light-shadow: rgba(0, 0, 0, 0.45);           /* 投影 */

  /* ── 玻璃/毛玻璃卡片 ─────────────────────────────────
   * 半透明底 + 模糊，让灯光与纹理透过来，与场景融合而不割裂。
   * --glass-bg-solid 供移动端使用：小屏 GPU 弱，毛玻璃会导致滚动卡顿。
   */
  --glass-bg: rgba(26, 26, 24, 0.72);
  --glass-bg-solid: rgba(24, 24, 22, 0.92);
  --glass-border: rgba(255, 255, 255, 0.10);

  /* 卡片内输入框需要更实的底：半透明卡片上的半透明输入框会读不清 */
  --input-bg-solid: rgba(12, 12, 11, 0.86);
}

/* 语义化别名：让业务 CSS 读起来更直白，且将来换色只改上面一处 */
:root {
  --btn-primary-bg: var(--color-accent);
  --btn-primary-fg: var(--color-bg);
  --btn-secondary-bg: var(--color-panel-hover);
  --btn-secondary-fg: var(--color-text);
  --input-bg: var(--color-bg);
  --input-border: var(--color-border-strong);
  --card-bg: var(--color-panel);
  --card-border: var(--color-border);
}

/* ── 无障碍：高对比度偏好 ───────────────────────────────
 * 用户在系统中开启"提高对比度"时，加深深浅差异，保证弱视用户可辨。
 *
 * ⚠️ 这些覆盖**必须住在 tokens.css**：它是颜色的唯一真源。
 *    若把色值写到 base.css，就违反了"只有 tokens 定义颜色"的约定，
 *    有测试（test_no_raw_hex_colors_outside_tokens）会拦下。
 */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #b0aea6;
    --color-text-faint: #8a8880;
    --color-border: rgba(255, 255, 255, 0.22);
    --color-border-strong: rgba(255, 255, 255, 0.34);
  }
}