/* ==========================================================================
   中国宝丰碳材料制品交易平台 — 设计令牌（单一事实源）
   依据《宝丰碳材料制品交易平台_UI原型设计方案》第 3 章 / 第 5 章
   PC 端：对齐 TDesign 令牌命名（--td-*），业务令牌 --bf-*
   ========================================================================== */

:root {
  /* ---------- 品牌与语义色 ---------- */
  --td-brand-color: #0052d9;
  --td-brand-color-hover: #366ef4;
  --td-brand-color-active: #003cab;
  --td-brand-color-light: #f2f3ff;
  --td-brand-color-light-2: #d9e1ff;
  --td-brand-color-focus: rgba(0, 82, 217, 0.2);

  --td-success-color: #2ba471;
  --td-success-color-light: #e3f9e9;
  --td-warning-color: #e37318;
  --td-warning-color-light: #fff1e9;
  --td-error-color: #d54941;
  --td-error-color-light: #fff0ed;
  --td-info-color: #366ef4;

  /* 行情涨跌（国内习惯：红涨绿跌） */
  --bf-market-up: #d54941;
  --bf-market-up-text: #ad352f;
  --bf-market-up-bg: #ffd8d2;
  --bf-market-down: #2ba471;
  --bf-market-down-text: #008858;
  --bf-market-down-bg: #c6f3d7;
  --bf-market-flat: rgba(0, 0, 0, 0.6);

  /* ---------- 中性色与背景层级 ---------- */
  --td-bg-color-page: #f3f3f3;
  --td-bg-color-container: #ffffff;
  --td-bg-color-secondarycontainer: #f3f3f3;
  --td-bg-color-component: #e7e7e7;
  --td-bg-color-component-hover: #dcdcdc;
  --td-component-stroke: #dcdcdc;
  --bf-outline-variant: #eeeeee;
  --bf-mask: rgba(0, 0, 0, 0.6);

  /* ---------- 文本 ---------- */
  --td-text-color-primary: rgba(0, 0, 0, 0.9);
  --td-text-color-secondary: rgba(0, 0, 0, 0.6);
  --td-text-color-placeholder: rgba(0, 0, 0, 0.4);
  --td-text-color-disabled: rgba(0, 0, 0, 0.26);
  --td-text-color-anti: #ffffff;
  --td-text-color-brand: #0052d9;

  /* ---------- 字体 ---------- */
  --td-font-family: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
    "Source Han Sans SC", "Segoe UI", Roboto, sans-serif;
  --bf-font-number: "Roboto Mono", "DIN Alternate", "Inter", ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;

  --bf-font-size-page-title: 20px;
  --bf-line-page-title: 28px;
  --bf-font-size-section: 16px;
  --bf-line-section: 24px;
  --td-font-size-base: 14px;
  --bf-line-base: 22px;
  --bf-font-size-small: 12px;
  --bf-line-small: 20px;
  --bf-font-size-metric: 24px;
  --bf-line-metric: 32px;

  /* ---------- 圆角 ---------- */
  --td-radius-small: 3px;
  --td-radius-default: 6px;
  --td-radius-large: 8px;
  --bf-radius-card: 8px;
  --bf-radius-pill: 999px;

  /* ---------- 阴影 ---------- */
  --td-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --td-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --td-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ---------- 间距刻度（8px 基准网格） ---------- */
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 24px;
  --bf-space-6: 32px;
  --bf-space-7: 48px;

  /* ---------- 布局尺寸 ---------- */
  --bf-topbar-height: 64px;
  --bf-sider-width: 232px;
  --bf-sider-collapsed: 64px;
  --bf-tabsbar-height: 40px;
  --bf-breadcrumb-height: 40px;
  --bf-row-height: 48px;
  --bf-row-height-compact: 40px;

  /* ---------- 动效 ---------- */
  --td-anim-duration-base: 200ms;
  --td-anim-duration-fast: 100ms;
  --td-anim-duration-slow: 300ms;
  --td-anim-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --td-anim-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

/* 暗色模式（TDesign Dark 令牌，涨跌色提亮） */
:root[data-theme="dark"] {
  --td-bg-color-page: #181818;
  --td-bg-color-container: #242424;
  --td-bg-color-secondarycontainer: #2c2c2c;
  --td-bg-color-component: #333333;
  --td-bg-color-component-hover: #3d3d3d;
  --td-component-stroke: #3d3d3d;
  --bf-outline-variant: #333333;

  --td-text-color-primary: rgba(255, 255, 255, 0.9);
  --td-text-color-secondary: rgba(255, 255, 255, 0.6);
  --td-text-color-placeholder: rgba(255, 255, 255, 0.4);
  --td-text-color-disabled: rgba(255, 255, 255, 0.26);

  --td-brand-color-light: #15307a;
  --td-brand-color-light-2: #1d3f96;

  /* 暗底上提亮，保证对比度 */
  --bf-market-up: #f6685d;
  --bf-market-up-text: #f6685d;
  --bf-market-up-bg: #4a1f1c;
  --bf-market-down: #56c08d;
  --bf-market-down-text: #56c08d;
  --bf-market-down-bg: #143025;

  --td-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --td-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --td-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6);
}