/* §361 设计底座:全站唯一一份设计变量(颜色 / 圆角 / 间距 / 字号 / 字体 / 阴影 / 动效)。
 *
 * 颜色沿用门户(portal.css)与新后台(relay/frontend/src/style.css)已经在用的那套 --p-*,值一模一样
 * (tests/test_361c_design_tokens 逐个比对三处,谁改漂了谁红)。新写的零件一律只用这里的变量,不写死颜色。
 * 深色 = body.dark-theme(全站同一个开关:localStorage.theme === 'dark'),这里只换变量,零件不用各写一套深色。
 * 出图页老样式(unified-workflow.css 的 --day-* / --night-*)在逐页搬到新骨架时替换掉,不在这里动。 */
:root {
  /* 颜色 */
  --p-primary: #FF6B35;
  --p-primary-dark: #E85A24;
  --p-primary-soft: rgba(255, 107, 53, .10);
  --p-bg: #F5F6F8;
  --p-card: #FFFFFF;
  --p-card-2: #F8F9FA;
  --p-text: #1A1A1A;
  --p-sub: #666666;
  --p-faint: #9AA0A6;
  --p-border: #E5E7EB;
  --p-good: #16a34a;
  --p-good-soft: rgba(22, 163, 74, .10);
  --p-bad: #dc2626;
  --p-bad-soft: rgba(220, 38, 38, .08);
  --p-warn: #d97706;
  --p-warn-soft: rgba(217, 119, 6, .10);
  --p-info: #2563eb;
  --p-info-soft: rgba(37, 99, 235, .08);
  --p-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06);
  --p-shadow-lg: 0 4px 12px rgba(16, 24, 40, .08), 0 18px 48px rgba(16, 24, 40, .12);
  --p-radius: 14px;

  /* 圆角(4 档 + 胶囊) */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* 间距(4 的倍数) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* 字号(8 档) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  /* 字体:系统中文字体(不引网络字体 —— 国内加载慢) */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;

  /* 动效(与新后台同一套时长 / 缓动) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

body.dark-theme {
  --p-primary: #FF6B35;
  --p-primary-dark: #E85A24;
  --p-primary-soft: rgba(255, 107, 53, .16);
  --p-bg: #0F1419;
  --p-card: #1A1F26;
  --p-card-2: #212833;
  --p-text: #E8E8E8;
  --p-sub: #9CA3AF;
  --p-faint: #6B7280;
  --p-border: #2D3748;
  --p-good-soft: rgba(22, 163, 74, .18);
  --p-bad-soft: rgba(220, 38, 38, .16);
  --p-warn-soft: rgba(217, 119, 6, .18);
  --p-info-soft: rgba(37, 99, 235, .18);
  --p-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
  --p-shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .4);
}

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