/* Portable data-interface theme. Standard CSS; no framework or build dependency.
 * Usage: ../references/theme.md. Adapt :root scope when integrating.
 */

:root {
  /* ---- 主蓝色阶 ---- */
  --blue-50: #f0f7fe;
  --blue-100: #deedfb;
  --blue-200: #c5e0f8;
  --blue-300: #9cccf4;
  --blue-400: #6eb0ec;
  --blue-500: #4b92e6;
  --blue-600: #3374d9;
  --blue-700: #2d62c8;
  --blue-800: #2b50a2;
  --blue-900: #274581;
  --blue-950: #1c2c4f;

  /* ---- 正向状态绿色阶 ---- */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* ---- 琥珀 / 警告：Tailwind v4 标准色阶 ---- */
  --amber-50: oklch(98.7% 0.022 95.277);
  --amber-100: oklch(96.2% 0.059 95.617);
  --amber-200: oklch(92.4% 0.12 95.746);
  --amber-300: oklch(87.9% 0.169 91.605);
  --amber-400: oklch(82.8% 0.189 84.429);
  --amber-500: oklch(76.9% 0.188 70.08);
  --amber-600: oklch(66.6% 0.179 58.318);
  --amber-700: oklch(55.5% 0.163 48.998);
  --amber-800: oklch(47.3% 0.137 46.201);
  --amber-900: oklch(41.4% 0.112 45.904);
  --amber-950: oklch(27.9% 0.077 45.635);

  /* ---- 橙 / 分类辅助：Tailwind v4 标准色阶 ---- */
  --orange-50: oklch(98% 0.016 73.684);
  --orange-100: oklch(95.4% 0.038 75.164);
  --orange-200: oklch(90.1% 0.076 70.697);
  --orange-300: oklch(83.7% 0.128 66.29);
  --orange-400: oklch(75% 0.183 55.934);
  --orange-500: oklch(70.5% 0.213 47.604);
  --orange-600: oklch(64.6% 0.222 41.116);
  --orange-700: oklch(55.3% 0.195 38.402);
  --orange-800: oklch(47% 0.157 37.304);
  --orange-900: oklch(40.8% 0.123 38.172);
  --orange-950: oklch(26.6% 0.079 36.259);

  /* ---- 红 / 风险：Tailwind v4 标准色阶 ---- */
  --red-50: oklch(97.1% 0.013 17.38);
  --red-100: oklch(93.6% 0.032 17.717);
  --red-200: oklch(88.5% 0.062 18.334);
  --red-300: oklch(80.8% 0.114 19.571);
  --red-400: oklch(70.4% 0.191 22.216);
  --red-500: oklch(63.7% 0.237 25.331);
  --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518);
  --red-800: oklch(44.4% 0.177 26.899);
  --red-900: oklch(39.6% 0.141 25.723);
  --red-950: oklch(25.8% 0.092 26.042);

  /* ---- 青 / 分类辅助：Tailwind v4 标准色阶 ---- */
  --cyan-50: oklch(98.4% 0.019 200.873);
  --cyan-100: oklch(95.6% 0.045 203.388);
  --cyan-200: oklch(91.7% 0.08 205.041);
  --cyan-300: oklch(86.5% 0.127 207.078);
  --cyan-400: oklch(78.9% 0.154 211.53);
  --cyan-500: oklch(71.5% 0.143 215.221);
  --cyan-600: oklch(60.9% 0.126 221.723);
  --cyan-700: oklch(52% 0.105 223.128);
  --cyan-800: oklch(45% 0.085 224.283);
  --cyan-900: oklch(39.8% 0.07 227.392);
  --cyan-950: oklch(30.2% 0.056 229.695);

  /* ---- 冷灰 / 中性：Tailwind v4 标准色阶 ---- */
  --gray-50: oklch(98.5% 0.002 247.839);
  --gray-100: oklch(96.7% 0.003 264.542);
  --gray-200: oklch(92.8% 0.006 264.531);
  --gray-300: oklch(87.2% 0.01 258.338);
  --gray-400: oklch(70.7% 0.022 261.325);
  --gray-500: oklch(55.1% 0.027 264.364);
  --gray-600: oklch(44.6% 0.03 256.802);
  --gray-700: oklch(37.3% 0.034 259.733);
  --gray-800: oklch(27.8% 0.033 256.848);
  --gray-900: oklch(21% 0.034 264.665);
  --gray-950: oklch(13% 0.028 261.692);

  /* ---- 蓝灰 / 图表辅助：Tailwind v4 标准色阶 ---- */
  --slate-50: oklch(98.4% 0.003 247.858);
  --slate-100: oklch(96.8% 0.007 247.896);
  --slate-200: oklch(92.9% 0.013 255.508);
  --slate-300: oklch(86.9% 0.022 252.894);
  --slate-400: oklch(70.4% 0.04 256.788);
  --slate-500: oklch(55.4% 0.046 257.417);
  --slate-600: oklch(44.6% 0.043 257.281);
  --slate-700: oklch(37.2% 0.044 257.287);
  --slate-800: oklch(27.9% 0.041 260.031);
  --slate-900: oklch(20.8% 0.042 265.755);
  --slate-950: oklch(12.9% 0.042 264.695);

  /* ---- 中性灰 / 表面与文字：Tailwind v4 标准色阶 ---- */
  --neutral-50: oklch(98.5% 0 0);
  --neutral-100: oklch(97% 0 0);
  --neutral-200: oklch(92.2% 0 0);
  --neutral-300: oklch(87% 0 0);
  --neutral-400: oklch(70.8% 0 0);
  --neutral-500: oklch(55.6% 0 0);
  --neutral-600: oklch(43.9% 0 0);
  --neutral-700: oklch(37.1% 0 0);
  --neutral-800: oklch(26.9% 0 0);
  --neutral-900: oklch(20.5% 0 0);
  --neutral-950: oklch(14.5% 0 0);

  /* ---- 语义：主色 ---- */
  --ck-primary: var(--blue-600);
  --ck-primary-hover: var(--blue-700);
  --ck-primary-soft: var(--blue-50);
  --ck-primary-line: var(--blue-200);
  --ck-primary-fill: var(--blue-600);
  --ck-primary-fill-soft: var(--blue-300);

  /* ---- 语义：状态（达标 / 警告 / 风险）---- */
  --ck-ok: var(--green-500);
  --ck-ok-text: var(--green-700);
  --ck-ok-bg: var(--green-50);
  --ck-ok-line: var(--green-200);

  --ck-warn: #febc2e;
  --ck-warn-text: #d97706;
  --ck-warn-bg: rgba(254, 188, 46, 0.14);
  --ck-warn-line: #fde68a;
  /* 警告黄填充上的条内文字色：白字对比度不足，用深色 */
  --ck-warn-ink: #5c3b00;

  --ck-bad: #ef4444;
  --ck-bad-text: #b91c1c;
  --ck-bad-bg: #fee2e2;
  --ck-bad-line: #fecaca;

  /* ---- 语义：分类色（趋势第二序列等）---- */
  --ck-cyan: #36cbcb;
  --ck-orange: #ffa133;
  --ck-gray: #acafb4;
  --ck-blue-soft: #85ace8;
  --ck-orange-soft: #ffc785;
  --ck-cyan-soft: #86e0e0;

  /* ---- 图表：固定八色，与图例/分段条共享 ---- */
  --ck-chart-1: #3374d9;
  --ck-chart-2: #ffa133;
  --ck-chart-3: #36cbcb;
  --ck-chart-4: #acafb4;
  --ck-chart-5: #85ace8;
  --ck-chart-6: #ffc785;
  --ck-chart-7: #86e0e0;
  --ck-chart-8: #e4e5e7;

  /* ---- 语义：文字三层 + 反白 ---- */
  --ck-ink: #1a1a1a;
  --ck-text2: #646a73;
  --ck-text3: #bbbfc4;
  --ck-on-fill: #ffffff;

  /* ---- 语义：容器与线 ---- */
  --ck-bg: #f5f5f5;
  --ck-card: #ffffff;
  --ck-surface-soft: #f9f9f9;
  --ck-border: #e3e6ea;
  --ck-divider: #e4e5e7;
  --ck-grid: #f0f0f2;

  /* ---- 字体与图表公共主题 ---- */
  --ck-font-family: 'Manrope', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  --ck-chart-axis-text: var(--ck-text2);
  --ck-chart-axis-line: var(--ck-divider);
  --ck-chart-grid: var(--ck-grid);

  /* ---- 语义：形状与节奏 ---- */
  --ck-radius: 8px;
  --ck-radius-sm: 5px;
  --ck-gap: 16px;
  --ck-gap-tight: 10px;
  --ck-pad: 20px;
  --ck-scrim: rgba(15, 23, 42, 0.32);
  --ck-focus-ring: 0 0 0 2px var(--blue-100);

  /* ---- 局部层级；其他层级映射项目或组件库既有体系 ---- */
  --ck-z-inline: 1;
}

/* 整页窄屏默认仅收紧内容 padding；模块 gutter 始终为 16px。
 * 局部主题须同步改此处作用域，组件重排仍依据实际容器宽度。
 */
@media (max-width: 900px) {
  :root {
    --ck-pad: 14px;
  }
}