/* AI铅笔盒-画图站 设计令牌 — Claude Code 风格 */
:root {
  /* ===== 品牌色 ===== */
  --color-primary:        #d97706;  /* Claude 橙琥珀 */
  --color-primary-hover:  #e08a1a;
  --color-primary-active: #b45309;
  --color-accent-blue:    #d97706;
  --color-accent-blue-soft: rgba(217,119,6,.12);
  --color-accent-yellow:  #d97706;
  --color-success:        #16a34a;
  --color-danger:         #dc2626;

  /* ===== 中性色（浅色主题） ===== */
  --color-bg:         #fafaf9;
  --color-bg-card:    #ffffff;
  --color-bg-soft:    #f4f4f2;
  --color-bg-sunken:  #efefed;
  --color-border:     #e5e5e3;
  --color-border-strong: #d0d0cc;

  --color-text:       #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #9a9a9a;

  /* ===== 圆角（克制，工具感） ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ===== 阴影（简洁） ===== */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 2px 4px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:  0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.12);
  --shadow-focus: 0 0 0 3px rgba(217,119,6,.30);
  --shadow-focus-red: 0 0 0 3px rgba(217,119,6,.30);
  --switch-glow-soft:   0 0 0 2px rgba(217,119,6,.25);
  --switch-glow-strong: 0 0 0 2px rgba(217,119,6,.40);

  /* ===== 过渡 ===== */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ===== 字体 ===== */
  --font-ui: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
             "Hiragino Sans GB", system-ui, -apple-system,
             "Segoe UI", "Roboto", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  24px;
  --fs-xxl: 36px;

  --lh-tight: 1.3;
  --lh-base:  1.55;

  /* ===== 间距（4px 基础刻度） ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;
  --sp-12: 96px;

  /* ===== 布局 ===== */
  --max-w: 1120px;
  --header-h: 64px;

  --color-header-bg: rgba(250, 250, 249, .90);
  --color-dock-bg:   rgba(255, 255, 255, .97);
  --dots-color:      rgba(0, 0, 0, .04);
}

:root[data-theme="dark"] {
  --color-bg:         #141414;
  --color-bg-card:    #1e1e1e;
  --color-bg-soft:    #252525;
  --color-bg-sunken:  #111111;
  --color-border:     #2e2e2e;
  --color-border-strong: #3d3d3d;

  --color-text:       #f0ede8;
  --color-text-muted: #8a8480;
  --color-text-faint: #5a5650;

  --color-accent-blue-soft: rgba(217,119,6,.15);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50);
  --shadow-md: 0 2px 4px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.50);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.45), 0 20px 40px rgba(0,0,0,.60);

  --color-header-bg: rgba(20, 20, 20, .90);
  --color-dock-bg:   rgba(30, 30, 30, .97);
  --dots-color:      rgba(255, 255, 255, .025);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}