/* 金驰销售 · Design Tokens · v2 (D + J)
   Light  = 方向 D · Stripe / Vercel 高对比 (Inter Display + 中性灰白 + 1.5px 实线边)
   Dark   = 方向 J · 深空蓝程序员风 (深空蓝 + 蓝调 KPI + 暖橙夜间柔化)
   切换：document.documentElement.dataset.theme = 'light' | 'dark'
*/

:root {
  /* ── fonts ── */
  --font-sans:  "Inter Display", "Inter", "PingFang SC", -apple-system, BlinkMacSystemFont, "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Inter Display", "Inter", "Newsreader", "PingFang SC", "Source Serif Pro", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;

  --font-weight-body: 500;
  --font-weight-strong: 700;
  --font-weight-serif: 700;
  --font-weight-mono: 600;

  /* ── space (4px base) ── */
  --s-1:  4px; --s-2:  8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ── radius ── */
  --r-1: 4px;  --r-2: 6px;  --r-3: 8px;  --r-4: 10px;
  --r-5: 12px; --r-6: 14px; --r-full: 999px;

  /* ── border (D 用 1.5px 实线) ── */
  --border-w: 1.5px;

  /* ── accent · 浅色基线（深色会覆盖） ── */
  --tint:       #C2410C;
  --tint-hover: #9A330A;
  --tint-on:    #FFFFFF;
  --teal:       #0D7F6F;
  --text-on-tint: #FFFFFF;

  /* ── transitions ── */
  --t-fast: .1s ease;
  --t-base: .15s ease;
}

/* ═══════════════════════════════════════════
   LIGHT — 方向 D · Stripe / Vercel
   ═══════════════════════════════════════════ */
:root, :root[data-theme="light"] {
  --bg:          #FAFAFA;
  --surface:     #FFFFFF;
  --surface-2:   #F4F4F5;
  --surface-3:   #E4E4E7;
  --border:      #D4D4D8;
  --border-s:    #E4E4E7;
  --border-strong: #A1A1AA;

  --text:   #09090B;
  --text-2: #3F3F46;
  --text-3: #71717A;
  --hover-bg: #F4F4F5;

  --tint:       #C2410C;
  --tint-hover: #9A330A;
  --tint-on:    #FFFFFF;
  --text-on-tint: #FFFFFF;

  --tint-soft:  #FDEEDF;
  --tint-ring:  rgba(194, 65, 12, .30);
  --teal:       #0D7F6F;
  --teal-bg:    #E0F0EC;

  --green:      #15803D;
  --green-bg:   #DCFCE7;
  --red:        #B91C1C;
  --red-bg:     #FEE2E2;
  --amber:      #A16207;
  --amber-bg:   #FEF3C7;

  --kpi-color:  var(--text);

  --shadow-1: 0 0 0 1px rgba(0, 0, 0, .04);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .08);
}

/* ═══════════════════════════════════════════
   DARK — 方向 J · 深空蓝程序员风
   ═══════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg:          #0F172A;
  --surface:     #1E293B;
  --surface-2:   #283549;
  --surface-3:   #334155;
  --border:      #334155;
  --border-s:    #283549;
  --border-strong: #475569;

  --text:   #E2E8F0;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --hover-bg: #283549;

  /* tint 暖橙夜间柔化 #FB923C */
  --tint:       #FB923C;
  --tint-hover: #FDBA74;
  --tint-on:    #0F172A;
  --text-on-tint: #0F172A;

  --tint-soft:  rgba(251, 146, 60, .16);
  --tint-ring:  rgba(251, 146, 60, .32);
  --teal:       #5EEAD4;
  --teal-bg:    rgba(94, 234, 212, .14);

  --green:      #4ADE80;
  --green-bg:   rgba(74, 222, 128, .14);
  --red:        #F87171;
  --red-bg:     rgba(248, 113, 113, .14);
  --amber:      #FBBF24;
  --amber-bg:   rgba(251, 191, 36, .14);

  /* KPI 用 #38BDF8 蓝色发光 */
  --kpi-color:  #38BDF8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .02);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, .7), 0 6px 16px rgba(0, 0, 0, .4);
}

/* ═══════════════════════════════════════════
   全局基线（两主题共用）
   ═══════════════════════════════════════════ */
html { transition: background-color .2s ease; }
body {
  font-weight: var(--font-weight-body);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.012em;
}
b, strong, h1, h2, h3, h4 {
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
}

/* smooth theme switch */
body, .card, .panel, .btn, .input, .select, .tag, .sb, .toolbar {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* KPI 数字主题色 + 深色发光（J 配色特征） */
.kpi .val { color: var(--kpi-color); }
:root[data-theme="dark"] .kpi .val {
  text-shadow: 0 0 24px rgba(56, 189, 248, .35);
}

/* tint primary button hover · D 高对比特征 */
.btn.primary,
button.primary {
  font-weight: var(--font-weight-strong);
}
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] button.primary {
  box-shadow: 0 0 24px rgba(251, 146, 60, .25);
}