/* ==========================================================================
   布卡设计体系 · 设计令牌（Design Tokens）
   --------------------------------------------------------------------------
   唯一真相：颜色 / 间距 / 圆角 / 字号 / 阴影 一律在此定义，页面禁止硬编码。
   参见 plans/frontend.md §4。

   视觉基调：Apple 风格 —— 毛玻璃、大圆角、柔和阴影、明暗跟随系统。
   多端策略：同一套组件 + 多套令牌（PC 精致紧凑 / PDA 大按钮高对比）。
   ========================================================================== */

:root {
  /* ── 语义化颜色 ── */
  --color-primary: #4a6cf7;
  --color-primary-hover: #3b5bdb;
  --color-primary-soft: rgba(74, 108, 247, .12);
  --color-success: #28a745;
  --color-warning: #f5a623;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  --color-bg: #f4f5f7;
  --color-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(74,108,247,.10), transparent 60%),
                       radial-gradient(900px 500px at 100% 0%, rgba(40,167,69,.08), transparent 55%);
  --color-surface: #ffffff;
  --color-surface-2: #fafbfc;
  --color-surface-blur: rgba(255, 255, 255, .72);  /* 毛玻璃基础色 */
  --color-text: #1c1e21;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9aa1ac;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

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

  /* ── 圆角（大圆角，Apple 风格）── */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;

  /* ── 字号 ── */
  --font-xs: 12px; --font-sm: 13px; --font-md: 15px;
  --font-lg: 20px; --font-xl: 28px; --font-2xl: 36px;

  /* ── 字体族（SF Pro 优先，回落到系统字体）── */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ── 阴影（柔和，轻微纵深）── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* ── 触控尺寸（易用性不妥协：按钮 ≥60px，戴手套可点）── */
  --touch-min: 40px;
  --touch-pda: 60px;

  /* ── 动效（统一缓动，克制使用）── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ── 布局 ── */
  --sidebar-w: 240px;
  --header-h: 60px;
}

/* ── 暗色模式：跟随系统 ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1115;
    --color-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(74,108,247,.16), transparent 60%),
                         radial-gradient(900px 500px at 100% 0%, rgba(40,167,69,.10), transparent 55%);
    --color-surface: #181b21;
    --color-surface-2: #1f232b;
    --color-surface-blur: rgba(24, 27, 33, .72);
    --color-text: #e8eaed;
    --color-text-secondary: #9aa1ac;
    --color-text-tertiary: #6b7280;
    --color-border: #2a2f38;
    --color-border-strong: #3a4049;
    --color-primary-soft: rgba(74,108,247,.18);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  }
}

/* ── PDA 端令牌覆盖：大按钮、高对比 ── */
[data-device="pda"] {
  --space-3: 16px; --space-4: 20px; --space-5: 28px;
  --font-sm: 16px; --font-md: 20px; --font-lg: 26px; --font-xl: 34px;
  --touch-min: 60px;
}

/* ── 无障碍：尊重减少动效偏好 ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}