/* ============================================================
   设计 tokens（双层结构）
   - Layer 1：原子层（原始值）
   - Layer 2：语义层（业务方直接用）
   - 与现有 style.css 兼容：旧变量名 alias 到新 tokens
   ============================================================ */

:root {
  /* ---------- Layer 1：原子层 ---------- */

  /* 蓝色阶（主品牌） */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* 绿色阶（success / 正向指标） */
  --color-green-100: #dcfce7;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;

  /* 橙色阶（warning） */
  --color-orange-100: #ffedd5;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;

  /* 红色阶（danger / 负向指标） */
  --color-red-100: #fee2e2;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  /* 紫色（biz 强调） */
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;

  /* 粉色（viz 强调） */
  --color-pink-500: #ec4899;

  /* 青色（viz 强调） */
  --color-cyan-500: #06b6d4;

  /* 柠檬绿（viz 强调） */
  --color-lime-500: #84cc16;

  /* 中性色 9 级 */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* 字体栈 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace;

  /* ---------- Layer 2：语义层 ---------- */

  /* 品牌 */
  --brand-primary:        var(--color-blue-600);
  --brand-primary-hover:  var(--color-blue-700);
  --brand-primary-soft:   var(--color-blue-50);
  --brand-primary-border: rgba(37, 99, 235, 0.2);

  /* 语义 */
  --color-success: var(--color-green-600);
  --color-warning: var(--color-orange-600);
  --color-danger:  var(--color-red-600);
  --color-info:    #0ea5e9;

  /* 数据可视化色板（8 色，按业务场景） */
  --viz-1: #0070f3;  /* 主品牌蓝 */
  --viz-2: #16a34a;  /* 数据绿 */
  --viz-3: #f59e0b;  /* 数据橙 */
  --viz-4: #dc2626;  /* 数据红 */
  --viz-5: #8b5cf6;  /* 紫 */
  --viz-6: #ec4899;  /* 粉 */
  --viz-7: #06b6d4;  /* 青 */
  --viz-8: #84cc16;  /* 柠檬绿 */

  /* 表面层 */
  --bg-base:     var(--gray-50);
  --bg-surface:  #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover:    var(--gray-100);
  --bg-active:   var(--gray-200);

  /* 文字 */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-400);
  --text-inverse:   #ffffff;
  --text-link:      var(--color-blue-600);

  /* 边框 */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--color-blue-500);

  /* 间距（4px 步进） */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 圆角 */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* 字号 */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   40px;

  /* 阴影 */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* 动效 */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* 布局 */
  --header-height:        48px;
  --status-bar-height:    28px;
  --sidebar-width:        240px;
  --sidebar-collapsed-width: 56px;
  --content-max-width:    1280px;
  --kpi-card-height:      108px;
  --chart-panel-height:   320px;

  /* ---------- 向后兼容（旧变量名 alias） ---------- */
  /* 这些 alias 让现有 style.css 不需要全部重写 */
}

/* 深色模式预留（暂未实现） */
[data-theme="dark"] {
  /* Phase 5 填充 */
}