/* ============================================================================
   锦融含章 SRM · 设计令牌（Design Tokens）
   ----------------------------------------------------------------------------
   这是全站唯一的"值"来源：颜色、表面、描边、圆角、间距、字号、行高、尺寸。
   页面里**不允许写魔法值**（除个别几何计算），一律引用本文件的 CSS 变量。

   【层级表达纪律】用「1px 描边 + 三级表面色 + 留白」表达层级，**禁止 box-shadow**。
   理由：投影在深色主题下浑浊、在 4K/低分屏上渲染不一致；描边+表面色在两种主题
   下都稳定，且与"表格/表单密集型内部系统"的气质一致。

   【深色主题定义在两处】—— 这是既有系统踩过的坑：
     ① `html[data-theme='dark']`                    → 用户显式选择深色
     ② `@media (prefers-color-scheme: dark)` 下 `html[data-theme='auto']` → 跟随系统
   两处的深色值**必须逐字一致**，改一处必须同步另一处（文件末尾有 [DARK-A]/[DARK-B] 标记）。
   ============================================================================ */

:root {
  color-scheme: light;

  /* ── 品牌：海军蓝 ───────────────────────────────────────────── */
  --brand-950: #071523;
  --brand-900: #0b2036;
  --brand-800: #102c4a;
  --brand-700: #163a61;
  --brand-600: #1d4d7d;   /* 主色：按钮/链接/选中态 */
  --brand-500: #2a679e;
  --brand-300: #7ba6c9;
  --brand-200: #b9d0e4;
  --brand-100: #dde9f3;
  --brand-50:  #f0f6fb;

  /* ── 中性灰阶 ───────────────────────────────────────────────── */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f6f7f9;
  --n-100: #eef0f3;
  --n-200: #e3e6eb;
  --n-300: #cfd5dd;
  --n-400: #a9b2be;
  --n-500: #7d8794;
  --n-600: #5b6472;
  --n-700: #414a56;
  --n-800: #2b333d;
  --n-900: #1b222a;
  --n-950: #121820;

  /* ── 三级表面 + 描边 ────────────────────────────────────────── */
  --surface-1: var(--n-50);    /* 页面底 */
  --surface-2: var(--n-0);     /* 卡片 / 表格主体 */
  --surface-3: var(--n-100);   /* 表头 / 内嵌面板 / 状态条 */
  --surface-inset: var(--n-25);/* 只读块 / 代码块 */
  --surface-hover: var(--n-50);
  --surface-active: var(--brand-50);
  --surface-backdrop: rgba(18, 24, 32, 0.42);

  --border-1: var(--n-200);    /* 常规描边：卡片/分隔 */
  --border-2: var(--n-300);    /* 强描边：输入框/次级按钮 */
  --border-strong: var(--n-400);
  --border-brand: var(--brand-600);

  /* ── 文字 ───────────────────────────────────────────────────── */
  --text-1: var(--n-900);      /* 正文/标题 */
  --text-2: var(--n-700);      /* 次要信息 */
  --text-3: var(--n-500);      /* 辅助说明/占位 */
  --text-invert: #ffffff;
  --text-link: var(--brand-700);
  --text-link-hover: var(--brand-600);

  /* ── 语义色（成对：浅底 + 深字 + 描边，深浅主题各自定义）────── */
  --ok-bg: #e8f5ee;   --ok-fg: #14653f;   --ok-bd: #b6ddc7;
  --warn-bg: #fdf3e2; --warn-fg: #8a5200; --warn-bd: #f0d4a6;
  --danger-bg: #fdeceb; --danger-fg: #9d2119; --danger-bd: #f2c2be;
  --info-bg: var(--brand-50); --info-fg: var(--brand-700); --info-bd: var(--brand-200);
  --muted-bg: var(--n-100); --muted-fg: var(--n-600); --muted-bd: var(--n-200);

  --focus-ring: rgba(29, 77, 125, 0.45);
  --focus-ring-width: 2px;

  /* ── 图表色（无外链依赖，纯 CSS 变量驱动 SVG）──────────────── */
  --chart-1: #1d4d7d;
  --chart-2: #2a679e;
  --chart-3: #4c8fbf;
  --chart-4: #7ba6c9;
  --chart-5: #a9b2be;
  --chart-grid: var(--n-200);

  /* ── 圆角 ───────────────────────────────────────────────────── */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-full: 999px;

  /* ── 间距（4 的倍数）────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* ── 字号 / 行高 ────────────────────────────────────────────── */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* 正文基准 */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.55;
  --lh-loose: 1.75;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
               "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* ── 布局尺寸 ───────────────────────────────────────────────── */
  --sidebar-w: 236px;
  --sidebar-w-compact: 60px;
  --topbar-h: 56px;
  --content-max: 1680px;
  --page-pad-x: var(--s-6);
  --page-pad-y: var(--s-5);
  --table-row-h: 40px;
  --control-h: 32px;
  --control-h-lg: 38px;

  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-skip: 70;

  --t-fast: 120ms ease;
  --t-base: 180ms ease;

  /* 明确禁止投影：语义化别名，便于全局检索"谁违反了纪律" */
  --shadow-none: none;
}

/* ============================================================================
   [DARK-A] 显式深色：html[data-theme='dark']
   —— 与文件末尾 [DARK-B] 的 auto + prefers-color-scheme 块**逐字同步**
   ============================================================================ */
html[data-theme='dark'] {
  color-scheme: dark;

  --surface-1: #0f141a;
  --surface-2: #161d25;
  --surface-3: #1e2731;
  --surface-inset: #121922;
  --surface-hover: #1c242e;
  --surface-active: #1b2c3f;
  --surface-backdrop: rgba(4, 7, 10, 0.66);

  --border-1: #26313c;
  --border-2: #33404e;
  --border-strong: #46545f;
  --border-brand: #4c8fbf;

  --text-1: #e6ebf1;
  --text-2: #b3bdc9;
  --text-3: #8695a4;
  --text-invert: #0b1017;
  --text-link: #7fb4dd;
  --text-link-hover: #a4cbe9;

  --ok-bg: #10291f;   --ok-fg: #6fd39b;   --ok-bd: #235b41;
  --warn-bg: #2c2110; --warn-fg: #e8b45f; --warn-bd: #5c451c;
  --danger-bg: #2e1715; --danger-fg: #f08b82; --danger-bd: #63302b;
  --info-bg: #122334; --info-fg: #7fb4dd; --info-bd: #2b4a66;
  --muted-bg: #1e2731; --muted-fg: #9aa6b3; --muted-bd: #2f3b47;

  --focus-ring: rgba(127, 180, 221, 0.55);

  --chart-1: #4c8fbf;
  --chart-2: #7fb4dd;
  --chart-3: #2a679e;
  --chart-4: #a4cbe9;
  --chart-5: #6b7885;
  --chart-grid: #26313c;
}

/* 显式浅色：与 :root 同值（写出来是为了让"三态"在代码里显式可见） */
html[data-theme='light'] { color-scheme: light; }

/* ============================================================================
   [DARK-B] 跟随系统：html[data-theme='auto'] + prefers-color-scheme: dark
   —— 与 [DARK-A] **逐字同步**
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  html[data-theme='auto'] {
    color-scheme: dark;

    --surface-1: #0f141a;
    --surface-2: #161d25;
    --surface-3: #1e2731;
    --surface-inset: #121922;
    --surface-hover: #1c242e;
    --surface-active: #1b2c3f;
    --surface-backdrop: rgba(4, 7, 10, 0.66);

    --border-1: #26313c;
    --border-2: #33404e;
    --border-strong: #46545f;
    --border-brand: #4c8fbf;

    --text-1: #e6ebf1;
    --text-2: #b3bdc9;
    --text-3: #8695a4;
    --text-invert: #0b1017;
    --text-link: #7fb4dd;
    --text-link-hover: #a4cbe9;

    --ok-bg: #10291f;   --ok-fg: #6fd39b;   --ok-bd: #235b41;
    --warn-bg: #2c2110; --warn-fg: #e8b45f; --warn-bd: #5c451c;
    --danger-bg: #2e1715; --danger-fg: #f08b82; --danger-bd: #63302b;
    --info-bg: #122334; --info-fg: #7fb4dd; --info-bd: #2b4a66;
    --muted-bg: #1e2731; --muted-fg: #9aa6b3; --muted-bd: #2f3b47;

    --focus-ring: rgba(127, 180, 221, 0.55);

    --chart-1: #4c8fbf;
    --chart-2: #7fb4dd;
    --chart-3: #2a679e;
    --chart-4: #a4cbe9;
    --chart-5: #6b7885;
    --chart-grid: #26313c;
  }
}

/* 用户显式选择浅色时，忽略系统深色偏好（上面 :root 已是浅色，这里只是显式声明） */
@media (prefers-color-scheme: dark) {
  html[data-theme='light'] { color-scheme: light; }
}