/* ============================================================
   base.css — 设计令牌与全局重置
   全站颜色/字号在此统一定义，禁止在具体组件里写死色值
   ------------------------------------------------------------
   主题切换：html[data-theme="dark|light|warm"] 覆盖以下变量。
   新增主题只需追加一套覆盖，无需改组件样式。
   ============================================================ */

/* ========== 深色主题（默认） ========== */
:root, html[data-theme="dark"] {
  /* 原生控件（滑块 / 日期选择器 / 滚动条）走深色，见浅色主题里的说明 */
  color-scheme: dark;
  /* 背景层次 */
  --bg-deep: #0A0E1F;
  --bg-card: #151B33;
  --bg-card-2: #1A2240;
  --bg-panel: #0F1530;

  /* 描边 */
  --border: #2A3458;
  --border-soft: rgba(42, 52, 88, .45);

  /* 文字 */
  --text-primary: #FFFFFF;
  --text-secondary: #C3CCE8;
  --text-tertiary: #97A3CC;

  /* 语义色 */
  --blue: #00D4FF;
  --red: #FF4D6D;
  --orange: #FFA63D;
  --green: #00E5A0;
  --purple: #B967DB;
  --amber: #EF9F27;
  --carmine: #FF7790;

  /* 语义色的半透明派生（按钮背景 / chip / 悬停等） */
  --blue-bg: rgba(0, 212, 255, .12);
  --blue-border: rgba(0, 212, 255, .38);
  --blue-bg-hover: rgba(0, 212, 255, .2);
  --blue-border-hover: rgba(0, 212, 255, .62);
  --blue-bg-alt: rgba(0, 212, 255, .15);
  --red-bg: rgba(255, 77, 109, .12);
  --red-border: rgba(255, 77, 109, .45);
  --green-bg: rgba(0, 229, 160, .08);
  --green-bg-alt: rgba(0, 229, 160, .14);
  --green-border: rgba(0, 229, 160, .4);
  --orange-bg: rgba(255, 166, 61, .12);
  --orange-border: rgba(255, 166, 61, .4);
  --amber-bg: rgba(239, 159, 39, .16);
  --carmine-bg: rgba(255, 119, 144, .18);
  --purple-bg: rgba(185, 103, 219, .16);

  /* 深色专用：白色半透明条（进度条 / 内部分割 / 细边框） */
  --white-4: rgba(255, 255, 255, .04);
  --white-5: rgba(255, 255, 255, .05);
  --white-6: rgba(255, 255, 255, .06);
  --white-7: rgba(255, 255, 255, .07);
  --green-chip-gray-bg: rgba(151, 163, 204, .18);

  /* 遮罩层（钻探抽屉 / 弹窗） */
  --mask-bg: rgba(4, 7, 18, .6);
  --mask-shadow: -16px 0 40px rgba(0, 0, 0, .5);

  /* 渐变卡片 */
  --gradient-teal-start: #0F6E64;
  --gradient-teal-end: #0B564F;
  --gradient-amber-start: #D08B4A;
  --gradient-amber-end: #C27A3C;
  --gradient-orange-start: #D9551E;
  --gradient-orange-end: #C24615;

  /* 图表 */
  --chart-grid: rgba(42, 52, 88, 0.5);
  --chart-tick: #C3CCE8;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Menlo", monospace;

  /* 尺寸 */
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 14px;
  --max-width: 1600px;

  /* 移动端状态栏 */
  --status-bar-bg: #0A0E1F;
}

/* ========== 浅色主题 ========== */
html[data-theme="light"] {
  /* 原生控件（滑块轨道 / 日期选择器 / 下拉 / 滚动条）跟着主题走。
     不声明 color-scheme 时它们跟随操作系统：浅色页面 + 深色系统偏好
     会出现「黑滑块、黑日期图标」这种明显不对的观感（2026-09-18 发现）。 */
  color-scheme: light;
  --bg-deep: #F2F4F8;
  --bg-card: #FFFFFF;
  --bg-card-2: #F7F9FC;
  --bg-panel: #EEF1F7;

  --border: #D8DEE8;
  --border-soft: rgba(100, 120, 160, .18);

  --text-primary: #1A2036;
  --text-secondary: #4A5472;
  --text-tertiary: #7A859E;

  --blue: #0091D6;
  --red: #E03A5A;
  --orange: #E08830;
  --green: #00B87A;
  --purple: #9A4FC0;
  --amber: #D49020;
  --carmine: #E05A78;

  /* 浅色半透明派生：深色语义色 + 较高 alpha 才能在白底上显形 */
  --blue-bg: rgba(0, 145, 214, .10);
  --blue-border: rgba(0, 145, 214, .45);
  --blue-bg-hover: rgba(0, 145, 214, .16);
  --blue-border-hover: rgba(0, 145, 214, .7);
  --blue-bg-alt: rgba(0, 145, 214, .13);
  --red-bg: rgba(224, 58, 90, .10);
  --red-border: rgba(224, 58, 90, .45);
  --green-bg: rgba(0, 184, 122, .08);
  --green-bg-alt: rgba(0, 184, 122, .14);
  --green-border: rgba(0, 184, 122, .45);
  --orange-bg: rgba(224, 136, 48, .12);
  --orange-border: rgba(224, 136, 48, .45);
  --amber-bg: rgba(212, 144, 32, .14);
  --carmine-bg: rgba(224, 90, 120, .15);
  --purple-bg: rgba(154, 79, 192, .14);

  /* 浅色专用：灰色半透明条（替代深色下的白色半透明） */
  --white-4: rgba(0, 0, 0, .04);
  --white-5: rgba(0, 0, 0, .05);
  --white-6: rgba(0, 0, 0, .06);
  --white-7: rgba(0, 0, 0, .07);
  --green-chip-gray-bg: rgba(122, 133, 158, .12);

  --mask-bg: rgba(25, 35, 60, .35);
  --mask-shadow: -16px 0 40px rgba(0, 0, 0, .15);

  /* 浅色渐变卡片：整体提亮，保持色调方向 */
  --gradient-teal-start: #159687;
  --gradient-teal-end: #117A6E;
  --gradient-amber-start: #E8A55E;
  --gradient-amber-end: #D48E44;
  --gradient-orange-start: #E86530;
  --gradient-orange-end: #D05428;

  --chart-grid: rgba(100, 120, 160, 0.25);
  --chart-tick: #4A5472;

  --status-bar-bg: #FFFFFF;
}

/* ========== 暖米主题 ========== */
html[data-theme="warm"] {
  color-scheme: light; /* 暖米也是浅底，原生控件同样要走浅色 */
  --bg-deep: #F5F0E8;
  --bg-card: #FDFBF5;
  --bg-card-2: #F3EEE3;
  --bg-panel: #EDE7D9;

  --border: #D5CDBE;
  --border-soft: rgba(140, 120, 90, .18);

  --text-primary: #2D2518;
  --text-secondary: #5C4F3A;
  --text-tertiary: #8A7C62;

  /* 暖色调语义色：偏琥珀/陶土 */
  --blue: #2E7DA0;
  --red: #C84A4A;
  --orange: #C87840;
  --green: #3E8E6A;
  --purple: #8A5A9E;
  --amber: #B87A28;
  --carmine: #C8556E;

  --blue-bg: rgba(46, 125, 160, .10);
  --blue-border: rgba(46, 125, 160, .45);
  --blue-bg-hover: rgba(46, 125, 160, .16);
  --blue-border-hover: rgba(46, 125, 160, .7);
  --blue-bg-alt: rgba(46, 125, 160, .13);
  --red-bg: rgba(200, 74, 74, .10);
  --red-border: rgba(200, 74, 74, .45);
  --green-bg: rgba(62, 142, 106, .08);
  --green-bg-alt: rgba(62, 142, 106, .14);
  --green-border: rgba(62, 142, 106, .45);
  --orange-bg: rgba(200, 120, 64, .12);
  --orange-border: rgba(200, 120, 64, .45);
  --amber-bg: rgba(184, 122, 40, .14);
  --carmine-bg: rgba(200, 85, 110, .15);
  --purple-bg: rgba(138, 90, 158, .14);

  --white-4: rgba(80, 60, 40, .05);
  --white-5: rgba(80, 60, 40, .06);
  --white-6: rgba(80, 60, 40, .08);
  --white-7: rgba(80, 60, 40, .10);
  --green-chip-gray-bg: rgba(140, 120, 90, .15);

  --mask-bg: rgba(60, 45, 30, .3);
  --mask-shadow: -16px 0 40px rgba(60, 45, 30, .2);

  --gradient-teal-start: #4A8C7A;
  --gradient-teal-end: #3D7365;
  --gradient-amber-start: #C8955A;
  --gradient-amber-end: #B07E44;
  --gradient-orange-start: #C86838;
  --gradient-orange-end: #B05A2E;

  --chart-grid: rgba(140, 120, 90, 0.22);
  --chart-tick: #5C4F3A;

  --status-bar-bg: #FDFBF5;
}

/* ============================================================
   图表调色板（三主题通用色板，语义色值已随主题变化）
   ============================================================ */
:root {
  --palette-1: var(--blue);
  --palette-2: var(--orange);
  --palette-3: var(--green);
  --palette-4: var(--purple);
  --palette-5: var(--carmine);
  --palette-6: var(--amber);
  --palette-7: var(--red);
  --palette-8: #5F8FFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 16px 24px;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* 主题切换时，卡片/边框的平滑过渡 */
.dashboard, .dash-header, .sidebar, .side-domain, .side-company-head,
.side-item, .refresh-btn, .drill-panel, .kpi-card, .fund-card,
.rev-kpi, .rev-channel, .receivable-card, .payable-card {
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}