/* ============================================================
   design-tokens.css · bid.hengzj.com 前端设计基线（唯一基线）
   商务蓝主题：#1B5BBF 系 · 无构建工具 · 全站引用本文件
   规范来源：《4-WEB端搭建任务方案》第二章设计规范
   使用约定：所有页面/组件只允许引用本文件的 CSS 变量，
             禁止硬编码色值（mock 徽标、风险色除外见下）。
   ============================================================ */

:root {
  /* ---- 品牌主色：商务蓝（唯一主色，不可改） ---- */
  --brand-50:   #EAF1FB;
  --brand-100:  #D5E3F7;
  --brand-200:  #ABC7EF;
  --brand-300:  #82ABE6;
  --brand-400:  #4E86D5;
  --brand-500:  #1B5BBF;   /* 主色 PRIMARY */
  --brand-600:  #164EA6;
  --brand-700:  #11408A;
  --brand-800:  #0C326E;
  --brand-900:  #082552;

  /* ---- 语义色 ---- */
  --success:  #2E7D32;   /* 绿 · 通过/正常 */
  --success-bg: #E8F5E9;
  --warning:  #ED6C02;   /* 橙黄 · 提示 */
  --warning-bg: #FFF4E5;
  --danger:   #C62828;   /* 红 · 高风险/拦截 */
  --danger-bg: #FDECEA;
  --info:     #1976D2;

  /* ---- 风险分级色（🔴🟠🟡 评级呈现，固定语义） ---- */
  --risk-red:    #C62828;
  --risk-red-bg: #FDECEA;
  --risk-orange: #E65100;
  --risk-orange-bg: #FFF3E0;
  --risk-yellow: #F9A825;
  --risk-yellow-bg: #FFF8E1;
  --risk-green:  #2E7D32;
  --risk-green-bg: #E8F5E9;

  /* ---- 中性色 ---- */
  --gray-50:   #F7F9FC;
  --gray-100:  #EEF2F7;
  --gray-200:  #E1E7EF;
  --gray-300:  #CBD5E1;
  --gray-400:  #94A3B8;
  --gray-500:  #64748B;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1E293B;
  --gray-900:  #0F172A;

  /* ---- 文本 ---- */
  --text-primary:   #1E293B;
  --text-secondary: #64748B;
  --text-disabled:  #94A3B8;
  --text-on-brand:  #FFFFFF;
  --text-link:      #1B5BBF;

  /* ---- 背景与边框 ---- */
  --bg-page:   #F0F4FA;
  --bg-card:   #FFFFFF;
  --bg-sidebar:#0C326E;          /* 深商务蓝侧边栏 */
  --bg-header: #FFFFFF;
  --border-color:  #E1E7EF;
  --border-brand:  #1B5BBF;
  --border-focus:  #82ABE6;

  /* ---- 字体 ---- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --line-height:   1.6;

  /* ---- 间距（4px 基准） ---- */
  --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;

  /* ---- 圆角 ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);
  --shadow-brand: 0 4px 14px rgba(27, 91, 191, .25);

  /* ---- 布局尺寸 ---- */
  --sidebar-width: 216px;
  --header-height: 56px;
  --content-max-width: 1400px;
}

/* 风险等级颜色工具类（供列表/标签/徽章复用） */
.risk-red    { color: var(--risk-red);    background: var(--risk-red-bg); }
.risk-orange { color: var(--risk-orange); background: var(--risk-orange-bg); }
.risk-yellow { color: #8A6D00;            background: var(--risk-yellow-bg); }
.risk-green  { color: var(--risk-green);  background: var(--risk-green-bg); }