/* ============================================================================
   BizFlow Design System — Design Tokens (css/variables.css)
   ----------------------------------------------------------------------------
   全站唯一的设计令牌来源（Single Source of Truth）。
   规则：
   1. 所有组件样式只允许引用 --bf-* 变量，禁止硬编码色值/字号/阴影；
   2. 命名规范：--bf-{类别}-{名称}[-{档位}]；
   3. 深色模式通过 html[data-bs-theme="dark"] 覆盖同名变量实现，
      与 Bootstrap 5.3 原生主题机制（data-bs-theme）同源联动。
   加载顺序：bootstrap.min.css → variables.css → global.css → 其余样式
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 浅色主题（默认）
   ------------------------------------------------------------------------- */
:root {
  /* 1.1 品牌色 —— Indigo，主色 600（现代 SaaS 气质，参考 Linear / Stripe 的克制感） */
  --bf-primary-50:  #eef2ff;
  --bf-primary-100: #e0e7ff;
  --bf-primary-200: #c7d2fe;
  --bf-primary-300: #a5b4fc;
  --bf-primary-400: #818cf8;
  --bf-primary-500: #6366f1;
  --bf-primary-600: #4f46e5;   /* 品牌主色：主按钮 / 链接 / 选中态 */
  --bf-primary-700: #4338ca;   /* hover / active */
  --bf-primary-800: #3730a3;
  --bf-primary-900: #312e81;

  /* 1.2 中性色 —— Slate 蓝灰阶（界面骨架、文字、边框全部由此派生） */
  --bf-gray-50:  #f8fafc;
  --bf-gray-100: #f1f5f9;
  --bf-gray-200: #e2e8f0;
  --bf-gray-300: #cbd5e1;
  --bf-gray-400: #94a3b8;
  --bf-gray-500: #64748b;
  --bf-gray-600: #475569;
  --bf-gray-700: #334155;
  --bf-gray-800: #1e293b;
  --bf-gray-900: #0f172a;
  --bf-gray-950: #020617;

  /* 1.3 语义色 —— 只表达状态，不做装饰；每色三件套：前景 / 底色 / 描边 */
  --bf-success: #059669;  --bf-success-bg: #ecfdf5;  --bf-success-border: #a7f3d0;
  --bf-warning: #d97706;  --bf-warning-bg: #fffbeb;  --bf-warning-border: #fde68a;
  --bf-danger:  #dc2626;  --bf-danger-bg:  #fef2f2;  --bf-danger-border:  #fecaca;
  --bf-info:    #0284c7;  --bf-info-bg:    #f0f9ff;  --bf-info-border:    #bae6fd;

  /* 1.4 表面与文字 */
  --bf-bg-canvas:    #f6f8fb;   /* 应用页面底色（比纯灰更冷一点） */
  --bf-bg-surface:   #ffffff;   /* 卡片 / 面板 / 顶栏 */
  --bf-bg-subtle:    #f1f5f9;   /* hover 底色 / 次级面板 / 表头 */
  --bf-bg-sidebar:   #ffffff;   /* 侧边栏（浅色主题下与顶栏同白，靠描边分区） */
  --bf-border-color:        #e2e8f0;
  --bf-border-color-strong: #cbd5e1;

  --bf-text-primary:   #0f172a;   /* 标题、强调 */
  --bf-text-secondary: #475569;   /* 正文 */
  --bf-text-muted:     #64748b;   /* 次要说明 */
  --bf-text-faint:     #94a3b8;   /* 占位、禁用 */
  --bf-text-on-primary: #ffffff;

  /* 1.5 字体与字阶 —— 正文基准 14px（企业后台信息密度） */
  --bf-font-sans: "Inter", "Segoe UI", "PingFang SC", "HarmonyOS Sans SC",
                  "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --bf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --bf-text-xs:  .75rem;    /* 12px：辅助说明、徽章 */
  --bf-text-sm:  .8125rem;  /* 13px：表格、次要文字 */
  --bf-text-md:  .875rem;   /* 14px：正文基准 */
  --bf-text-lg:  1rem;      /* 16px：强调正文 */
  --bf-text-xl:  1.25rem;   /* 20px：卡片标题 */
  --bf-text-2xl: 1.5rem;    /* 24px：页面标题 */
  --bf-text-3xl: 1.875rem;  /* 30px：KPI 数字 */

  --bf-font-weight-normal:   400;
  --bf-font-weight-medium:   500;
  --bf-font-weight-semibold: 600;

  --bf-line-height-tight:  1.25;
  --bf-line-height-normal: 1.5;

  /* 1.6 圆角 —— 适度克制，不做成"气泡"感 */
  --bf-radius-sm:   6px;
  --bf-radius-md:   8px;
  --bf-radius-lg:   10px;
  --bf-radius-xl:   12px;
  --bf-radius-pill: 999px;

  /* 1.7 阴影 —— 低渗透、贴近元素（Linear 风格），暗色主题下加强 */
  --bf-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --bf-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --bf-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --bf-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* 1.8 布局尺寸（阶段 2 Layout 直接引用） */
  --bf-sidebar-width:     248px;
  --bf-topbar-height:     60px;
  --bf-content-max-width: 1440px;
  --bf-content-padding:   24px;

  /* 1.9 动效 —— 克制原则：只做 120–200ms 的状态过渡，无入场动画 */
  --bf-transition-fast: 120ms ease;
  --bf-transition-base: 180ms ease;

  /* 1.10 键盘焦点环 */
  --bf-ring-color: rgba(99, 102, 241, .35);
  --bf-ring: 0 0 0 3px var(--bf-ring-color);

  /* 1.11 图表分类色板（ECharts 按序取色；深色主题在下方整体提亮） */
  --bf-chart-1: #4f46e5;   /* 品牌主色 */
  --bf-chart-2: #0ea5e9;
  --bf-chart-3: #10b981;
  --bf-chart-4: #f59e0b;
  --bf-chart-5: #f43f5e;
  --bf-chart-6: #8b5cf6;
  --bf-chart-7: #06b6d4;
  --bf-chart-8: #64748b;

  /* 1.12 Bootstrap 5.3 桥接 —— 让 Bootstrap 组件跟随 BizFlow 令牌 */
  --bs-primary: var(--bf-primary-600);
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: var(--bf-success);   --bs-success-rgb: 5, 150, 105;
  --bs-warning: var(--bf-warning);   --bs-warning-rgb: 217, 119, 6;
  --bs-danger:  var(--bf-danger);    --bs-danger-rgb:  220, 38, 38;
  --bs-info:    var(--bf-info);      --bs-info-rgb:    2, 132, 199;

  --bs-success-bg-subtle: var(--bf-success-bg);  --bs-success-border-subtle: var(--bf-success-border);
  --bs-warning-bg-subtle: var(--bf-warning-bg);  --bs-warning-border-subtle: var(--bf-warning-border);
  --bs-danger-bg-subtle:  var(--bf-danger-bg);   --bs-danger-border-subtle:  var(--bf-danger-border);
  --bs-info-bg-subtle:    var(--bf-info-bg);     --bs-info-border-subtle:    var(--bf-info-border);

  --bs-body-font-family: var(--bf-font-sans);
  --bs-body-font-size: var(--bf-text-md);
  --bs-body-bg: var(--bf-bg-canvas);
  --bs-body-color: var(--bf-text-primary);
  --bs-secondary-color: var(--bf-text-muted);
  --bs-tertiary-color: var(--bf-text-faint);
  --bs-emphasis-color: var(--bf-text-primary);
  --bs-secondary-bg: var(--bf-bg-subtle);
  --bs-tertiary-bg: var(--bf-bg-canvas);

  --bs-border-color: var(--bf-border-color);
  --bs-border-radius-sm: var(--bf-radius-sm);
  --bs-border-radius:    var(--bf-radius-md);
  --bs-border-radius-lg: var(--bf-radius-lg);
  --bs-border-radius-xl: var(--bf-radius-xl);

  --bs-link-color: var(--bf-primary-600);
  --bs-link-hover-color: var(--bf-primary-700);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. 深色主题 —— data-bs-theme="dark" 时整体切换（Bootstrap 原生机制）
   ------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  /* 2.1 表面与文字 —— 深蓝黑基调，与品牌色同族 */
  --bf-bg-canvas:  #0f1524;
  --bf-bg-surface: #161d31;
  --bf-bg-subtle:  #1d2740;
  --bf-bg-sidebar: #0d1322;
  --bf-border-color:        #27334d;
  --bf-border-color-strong: #3b4a6b;

  --bf-text-primary:   #e2e8f0;
  --bf-text-secondary: #94a3b8;
  --bf-text-muted:     #64748b;
  --bf-text-faint:     #475569;
  --bf-text-on-primary: #ffffff;

  /* 2.2 语义色 —— 暗色下提高明度、底色改半透明 */
  --bf-success: #34d399;  --bf-success-bg: rgba(16, 185, 129, .12);  --bf-success-border: rgba(16, 185, 129, .35);
  --bf-warning: #fbbf24;  --bf-warning-bg: rgba(245, 158, 11, .12);  --bf-warning-border: rgba(245, 158, 11, .35);
  --bf-danger:  #f87171;  --bf-danger-bg:  rgba(239, 68, 68, .12);   --bf-danger-border:  rgba(239, 68, 68, .35);
  --bf-info:    #38bdf8;  --bf-info-bg:    rgba(14, 165, 233, .12);  --bf-info-border:    rgba(14, 165, 233, .35);

  /* 2.3 阴影 —— 暗色下用更重的黑维持层次 */
  --bf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --bf-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --bf-shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --bf-shadow-lg: 0 12px 32px rgba(0, 0, 0, .50);

  /* 2.4 焦点环 */
  --bf-ring-color: rgba(129, 140, 248, .40);

  /* 2.5 图表色板 —— 整体提亮一档，保证深底上的可读性 */
  --bf-chart-1: #818cf8;
  --bf-chart-2: #38bdf8;
  --bf-chart-3: #34d399;
  --bf-chart-4: #fbbf24;
  --bf-chart-5: #fb7185;
  --bf-chart-6: #a78bfa;
  --bf-chart-7: #22d3ee;
  --bf-chart-8: #94a3b8;

  /* 2.6 Bootstrap 桥接（深色） */
  --bs-primary: var(--bf-primary-500);
  --bs-primary-rgb: 99, 102, 241;
  --bs-body-bg: var(--bf-bg-canvas);
  --bs-body-color: var(--bf-text-primary);
  --bs-secondary-color: var(--bf-text-muted);
  --bs-tertiary-color: var(--bf-text-faint);
  --bs-emphasis-color: var(--bf-text-primary);
  --bs-secondary-bg: var(--bf-bg-subtle);
  --bs-tertiary-bg: var(--bf-bg-canvas);
  --bs-border-color: var(--bf-border-color);
  --bs-link-color: var(--bf-primary-300);
  --bs-link-hover-color: var(--bf-primary-200);

  color-scheme: dark;
}