/* ============================================================
 * DLOA 设计契约层 (Design Tokens + 图标基元)
 *
 * 定位：全站唯一的颜色 / 字体 / 间距 / 圆角 / 阴影 / 层级 / 动效来源，
 * 外加 .icon 这一个图标基元类。
 *
 * 为什么 .icon 放在这里而不是 style.css：本文件是唯一被 26/26 视图加载的
 * 样式层，而 13 个视图（含门户页 index.html）刻意不加载后台基座 style.css。
 * 放此处可保证图标尺寸规则全站生效且只定义一次。
 *
 * 规则：
 *   1. 任何页面或组件 CSS 不得再定义 :root 变量，一律引用本文件。
 *   2. 取值来自对现有 public/css 的实测高频值，不新发明颜色，
 *      以保证收敛为机械替换而非重新设计。
 *   3. 视觉取向：严肃政务风。实色背景 + 1px 细边框表达层级，
 *      不使用毛玻璃、装饰渐变、卡片阴影与 emoji 图标。
 * 加载顺序：必须作为第一个样式表引入，其后依次是 style.css、页面专属 CSS。
 * ============================================================ */

:root {
  /* ---------- 1. 品牌色 ---------- */
  /* 清亮政务蓝（对齐广东公共资源交易平台 #0b68da），全站主色 */
  --dloa-primary: #0b68da;
  --dloa-primary-hover: #4293f4;
  --dloa-primary-active: #0954b0;
  --dloa-primary-bg: #eef4fa;
  --dloa-primary-border: #d7e6f5;
  /* 金色强调，仅用于极少量点缀（当前标识、关键提示），不用于大面积铺色 */
  --dloa-accent: #b78324;

  /* ---------- 2. 中性面 ---------- */
  --dloa-surface: #ffffff;
  --dloa-surface-muted: #f8fafc;
  --dloa-surface-sunken: #f1f5f9;
  /* 页面底色，实测为应用外壳主背景 */
  --dloa-bg: #f0f2f5;

  /* ---------- 3. 边框与分隔线 ---------- */
  /* 严肃政务风靠边框而非阴影表达层级，故边框是主力手段 */
  --dloa-border: #d9d9d9;
  --dloa-border-subtle: #e8e8e8;
  --dloa-border-strong: #bfbfbf;
  --dloa-divider: #e8e8e8;

  /* ---------- 4. 文字 ---------- */
  /* 沿用现有 slate 灰阶，避免另起一套灰 */
  --dloa-text: #0f172a;
  --dloa-text-body: #334155;
  --dloa-text-secondary: #475569;
  --dloa-text-muted: #64748b;
  --dloa-text-disabled: #94a3b8;
  --dloa-text-inverse: #ffffff;

  /* ---------- 5. 状态语义 ---------- */
  /* 状态一律「文字 + 形状 + 颜色」三重表达，不得只靠颜色 */
  --dloa-success: #047857;
  --dloa-success-bg: #ecfdf5;
  --dloa-success-border: #b7eb8f;
  --dloa-warning: #b45309;
  --dloa-warning-bg: #fffbeb;
  --dloa-warning-border: #ffd591;
  --dloa-danger: #b91c1c;
  --dloa-danger-bg: #fef2f2;
  --dloa-danger-border: #ffa39e;
  --dloa-info: #0b68da;
  --dloa-info-bg: #eef4fa;
  --dloa-info-border: #d7e6f5;

  /* ---------- 6. 字体 ---------- */
  /* 单一中文字体栈。不引入 web 字体（外链与体积风险）。 */
  --dloa-font-sans:
    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue',
    'Segoe UI', Roboto, Arial, sans-serif;
  --dloa-font-mono: Consolas, 'Courier New', monospace;

  /* 字号阶梯：仅 7 档，业务页不使用 24 以上 */
  --dloa-font-size-xs: 12px;
  --dloa-font-size-sm: 13px;
  --dloa-font-size-base: 14px;
  --dloa-font-size-md: 16px;
  --dloa-font-size-lg: 18px;
  --dloa-font-size-xl: 20px;
  --dloa-font-size-2xl: 24px;

  /* 字重：仅 4 档 */
  --dloa-font-weight-regular: 400;
  --dloa-font-weight-medium: 500;
  --dloa-font-weight-semibold: 600;
  --dloa-font-weight-bold: 700;

  --dloa-line-height-tight: 1.4;
  --dloa-line-height-base: 1.6;
  --dloa-line-height-loose: 1.8;

  /* ---------- 7. 间距（4px 节奏，仅 8 档） ---------- */
  --dloa-space-1: 4px;
  --dloa-space-2: 8px;
  --dloa-space-3: 12px;
  --dloa-space-4: 16px;
  --dloa-space-5: 20px;
  --dloa-space-6: 24px;
  --dloa-space-8: 32px;
  --dloa-space-10: 40px;

  /* ---------- 8. 圆角（仅 3 档，政务风克制） ---------- */
  --dloa-radius-sm: 2px;
  --dloa-radius: 4px;
  --dloa-radius-lg: 6px;
  --dloa-radius-full: 9999px;

  /* ---------- 9. 阴影（仅 3 级，且只给浮层） ---------- */
  /* 卡片与区块默认无阴影，用 1px 边框；阴影只用于 modal / dropdown / popover */
  --dloa-shadow-none: none;
  --dloa-shadow-popover: 0 2px 8px rgba(15, 23, 42, 0.12);
  --dloa-shadow-modal: 0 8px 24px rgba(15, 23, 42, 0.16);
  --dloa-shadow-drawer: -4px 0 16px rgba(15, 23, 42, 0.12);

  /* ---------- 10. 层级 ---------- */
  --dloa-z-sticky: 10;
  --dloa-z-dropdown: 100;
  --dloa-z-drawer: 500;
  --dloa-z-modal: 1000;
  --dloa-z-toast: 2000;

  /* ---------- 11. 动效（仅 2 档，办公场景宁短勿长） ---------- */
  --dloa-duration-fast: 120ms;
  --dloa-duration-base: 160ms;
  --dloa-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dloa-transition-colors:
    color var(--dloa-duration-fast) var(--dloa-ease),
    background-color var(--dloa-duration-fast) var(--dloa-ease),
    border-color var(--dloa-duration-fast) var(--dloa-ease);

  /* ---------- 12. 焦点 ---------- */
  /* 键盘可达性：焦点必须可见，全站统一 */
  --dloa-focus-ring: 0 0 0 2px var(--dloa-surface), 0 0 0 4px rgba(11, 104, 218, 0.4);

  /* ---------- 13. 布局 ---------- */
  --dloa-content-max-width: 1440px;
  --dloa-gutter: 24px;
  --dloa-sidebar-width: 220px;
  --dloa-header-height: 56px;
  --dloa-control-height-sm: 28px;
  --dloa-control-height: 32px;
  --dloa-control-height-lg: 40px;
  --dloa-table-row-height: 40px;

  /* ---------- 13.1 蓝色导航（全站统一亮蓝侧栏）----------
     侧栏与主色同系，白字保证 WCAG AA 对比度。 */
  --dloa-nav-bg: #0d5ec4;
  --dloa-nav-deep-bg: #0954b0;
  --dloa-nav-fg: #ffffff;
  --dloa-nav-fg-muted: rgba(255, 255, 255, 0.75);
  --dloa-nav-active-bg: rgba(255, 255, 255, 0.18);
  --dloa-nav-active-bar: #ffffff;
  --dloa-nav-hover-bg: rgba(255, 255, 255, 0.12);
  --dloa-nav-border: rgba(255, 255, 255, 0.2);
}

/* 尊重系统「减少动态效果」设置：政务办公场景下直接关闭非必要动效 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dloa-duration-fast: 1ms;
    --dloa-duration-base: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 14. 图标基元 ---------- */
/* 尺寸用 1em，因此沿用各页面已有的 font-size 规则控制图标大小，
   无需为 service-icon / cat-icon / nb-icon 等各写一份尺寸。 */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
  overflow: hidden;
}

/* 需要独立于字号的图标时，用这三档修饰类 */
.icon-sm {
  width: 14px;
  height: 14px;
}

.icon-md {
  width: 18px;
  height: 18px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

/* ---------- 15. 数字排版 ---------- */
/* 表格与金额、数量、统计值统一等宽数字，避免行高列宽随内容跳动。
   这是政务数据密集页面的基本可读性要求，不是装饰。 */
table,
th,
td,
.stat-number,
.stat-value,
.metric-value,
.summary-value,
.summary-item strong,
.approval-summary-item strong,
.expert-center-summary-metric strong,
.collection-metrics strong,
.external-trade-stats strong,
.portal-summary-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}