/* ============================================================================
   web/assets/theme.css —— 煤炭供应链智慧化管理平台 · 全站双色系（浅/深）Token
   ----------------------------------------------------------------------------
   设计规范：一套语义化 Token 支撑「浅色（默认）/ 深色」一键切换。
   组件只引用 var()，永不写死色值 —— 切换=换主题变量，不改结构。
   载入顺序：theme.css 必须早于 styles.css，避免首帧错色。
   ========================================================================== */

/* ============ 浅色（默认） ============ */
:root{
  /* —— 背景层级 —— */
  --bg-page:#F4F7FC; --bg-sunken:#EEF3FB; --bg-elevated:#FFFFFF; --card-bg:#FFFFFF;
  --card-border:#E3EAF4; --border:#D8E1EE; --border-strong:#C9D5E6; --divider:#EEF1F6; --bg-hover:#F0F5FD;
  /* —— 文本 —— */
  --text-1:#0F1F38; --text-2:#4A5B75; --text-3:#8494AC; --text-disabled:#B4C0D2;
  /* —— 品牌 —— */
  --brand-1:#1A6DFF; --brand-2:#38BDF8; --brand-hover:#0F5CE6;
  --brand-soft:#EAF2FF; --brand-bd:#C3DBFF;
  --brand-grad:linear-gradient(135deg,#1A6DFF 0%,#38BDF8 100%);
  /* —— 语义色 —— */
  --success:#16A34A; --warning:#F59E0B; --danger:#EF4444; --info:#3B82F6;
  --success-soft:#E7F7EF; --success-bd:#B7E7CF;
  --warning-soft:#FEF4E2; --warning-bd:#F6DDA6;
  --danger-soft:#FDECEE; --danger-bd:#F6C4CA;
  --info-soft:#EAF2FF; --info-bd:#C3DBFF;
  /* 涨跌语义（A 股习惯：红涨绿跌；两套一致） */
  --c-up:#EF4444; --c-down:#16A34A;
  /* —— 阴影 / 玻璃 —— */
  --shadow-card:0 4px 16px rgba(20,40,80,.08);
  --shadow-pop:0 12px 32px rgba(20,40,80,.14);
  --sh-1:0 1px 3px rgba(20,40,80,.06); --sh-2:var(--shadow-card); --sh-3:var(--shadow-pop);
  --glow:none; --sh-glow:0 0 0 3px #EAF2FF;
  --glass-bg:rgba(255,255,255,.85); --glass-border:rgba(20,40,80,.08); --glass-blur:12px;
  --focus-ring:0 0 0 3px #EAF2FF;
  /* —— 图表色板（顺序固定，色义一致）—— */
  --chart-1:#1A6DFF; --chart-2:#38BDF8; --chart-3:#16A34A; --chart-4:#F59E0B; --chart-5:#8B5CF6; --chart-6:#EC4899;
  /* —— 品牌上的文字 —— */
  --on-brand:#FFFFFF; --on-brand-ink:#FFFFFF; --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.92);
  /* —— 结构（两套一致）—— */
  --r-card:12px; --r-card-lg:16px; --r-tag:6px; --r-btn:8px;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:160ms; --t-mid:240ms; --t-slow:360ms;

  /* ======== 兼容层：旧变量名全部指向语义层（存量样式引用） ======== */
  --bg-0:var(--bg-page); --bg-1:var(--bg-sunken); --bg-2:var(--card-bg); --bg-3:var(--bg-elevated);
  --brand:var(--brand-1); --brand2:var(--brand-2); --grad:var(--brand-grad); --g-brand:var(--brand-grad);
  --ok:var(--success); --warn:var(--warning); --amber:var(--warning);
  --tx-1:var(--text-1); --tx-2:var(--text-2); --tx-3:var(--text-3);
  --txt:var(--text-1); --txt2:var(--text-2); --txt3:var(--text-3);
  --line:var(--border); --line2:var(--border-strong);
  --c-bg:var(--bg-page); --c-surface:var(--card-bg); --c-surface-2:var(--bg-elevated);
  --c-border:var(--card-border); --c-border-strong:var(--border-strong);
  --c-text:var(--text-1); --c-text-2:var(--text-2); --c-text-3:var(--text-3); --c-text-disabled:var(--text-disabled);
  --c-primary:var(--brand-1); --c-primary-hover:var(--brand-hover); --c-primary-active:var(--brand-1);
  --c-cyan:var(--brand-2); --c-cyan-light:var(--brand-2);
  --c-navy:var(--bg-sunken); --c-midnight:var(--bg-page);
  --c-success:var(--success); --c-warning:var(--warning); --c-danger:var(--danger); --c-info:var(--info);
  --g-navy:linear-gradient(135deg,#EAF1FB 0%,#DCE7F7 100%);
  --g-img-mask:linear-gradient(180deg,rgba(15,31,56,0),rgba(15,31,56,.35));
  --bg:var(--bg-page); --bg2:var(--bg-elevated); --panel:var(--card-bg); --panel2:var(--bg-elevated);
  --shadow:var(--sh-2); --r:var(--r-card);
  --c-scrim:rgba(15,31,56,.28);
  --grid-line:rgba(26,109,255,.05);
  --glow-1:rgba(26,109,255,.16); --glow-2:rgba(56,189,248,.10);
  --overlay-strong:rgba(255,255,255,.55);
  --img-veil:linear-gradient(180deg,rgba(15,31,56,.06) 0%,rgba(15,31,56,.34) 100%);
  color-scheme:light;
}

/* ============ 深色 ============ */
html[data-theme="dark"]{
  --bg-page:#0A0F1C; --bg-sunken:#0F1626; --bg-elevated:#1B2740; --card-bg:#141D30;
  --card-border:#22304A; --border:#2A3A57; --border-strong:#2C3D5C; --divider:#1B2740; --bg-hover:#22304A;
  --text-1:#E8F1FF; --text-2:#A6B8D4; --text-3:#6B7C99; --text-disabled:#46566E;
  --brand-1:#2E9BFF; --brand-2:#22D3EE; --brand-hover:#4AAEFF;
  --brand-soft:rgba(46,155,255,.14); --brand-bd:rgba(46,155,255,.30);
  --brand-grad:linear-gradient(135deg,#2E9BFF 0%,#22D3EE 100%);
  --success:#2FD8A0; --warning:#FFB020; --danger:#FF5C6C; --info:#4A9EFF;
  --success-soft:#123027; --success-bd:#1F5A44;
  --warning-soft:#241E10; --warning-bd:#3A2E14;
  --danger-soft:#2A1418; --danger-bd:#4A2028;
  --info-soft:rgba(74,158,255,.14); --info-bd:rgba(74,158,255,.32);
  --c-up:#FF5C6C; --c-down:#2FD8A0;
  --shadow-card:0 8px 24px rgba(0,0,0,.45);
  --shadow-pop:0 16px 48px rgba(0,0,0,.55);
  --sh-1:0 2px 8px rgba(0,0,0,.35); --sh-2:var(--shadow-card); --sh-3:var(--shadow-pop);
  --glow:0 0 24px rgba(46,155,255,.35); --sh-glow:0 0 0 3px rgba(46,155,255,.28);
  --glass-bg:rgba(20,29,48,.72); --glass-border:rgba(120,180,255,.14); --glass-blur:16px;
  --focus-ring:0 0 0 3px rgba(46,155,255,.35);
  --chart-1:#2E9BFF; --chart-2:#22D3EE; --chart-3:#2FD8A0; --chart-4:#FFB020; --chart-5:#A78BFA; --chart-6:#FF7AC6;
  --on-brand:#0A0F1C; --on-brand-ink:#141D30; --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.92);
  --g-navy:linear-gradient(135deg,#0B1330 0%,#12233F 100%);
  --g-img-mask:linear-gradient(180deg,rgba(10,15,28,.42) 0%,rgba(10,15,28,.86) 100%);
  --c-scrim:rgba(10,15,28,.55);
  --grid-line:rgba(46,155,255,.05);
  --glow-1:rgba(46,155,255,.16); --glow-2:rgba(34,211,238,.10);
  --overlay-strong:rgba(20,29,48,.55);
  --img-veil:linear-gradient(180deg,rgba(10,15,28,.32) 0%,rgba(10,15,28,.62) 100%);
  color-scheme:dark;
}

/* ============ 切换过渡（防"半亮半暗"突兀） ============ */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)!important;
}

/* ============ 主题切换按钮 ============ */
.themebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:36px;height:36px;
  border-radius:10px;background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-2);
  cursor:pointer;transition:all var(--t-fast) var(--ease);font-size:16px;line-height:1}
.themebtn:hover{color:var(--brand-1);border-color:var(--brand-1);transform:translateY(-1px)}
.themebtn .tt{display:none}
.themebtn.wide{width:auto;padding:0 12px;height:34px}
.themebtn.wide .tt{display:inline;font-size:12.5px;font-weight:600}

/* ============ 打印固定浅色 ============ */
@media print{
  html,html[data-theme="dark"]{color-scheme:light}
  :root,html[data-theme="dark"]{
    --bg-page:#FFFFFF;--bg-sunken:#F4F7FC;--bg-elevated:#FFFFFF;--card-bg:#FFFFFF;
    --card-border:#D8E1EE;--border:#D8E1EE;--divider:#EEF1F6;--bg-hover:#F0F5FD;
    --text-1:#0F1F38;--text-2:#4A5B75;--text-3:#8494AC;--brand-1:#1A6DFF;--brand-2:#38BDF8;
  }
}