/* ============================================================================
   外观令牌 —— 全站唯一的「皮肤」文件
   ----------------------------------------------------------------------------
   模仿自 www.fangzk.com 的「家庭工作台」，变量名保持一致，
   两站的组件写法可以互相照抄。

   ★ 想改颜色 / 圆角 / 阴影 / 字号，**只改这个文件**，别的地方都不用动。

   风格：**深空指挥中心**
     · 主色走青蓝（cyan → blue 渐变），保留 caot 原站「绿」的血统但往青蓝推
     · 深色是默认：近黑的深蓝底 + 发光描边 + 细网格
     · 圆角整体收锐（4/6/10px），比圆润的消费级风格更像仪表盘
     · 数字一律等宽字体，读起来像读数
   ============================================================================ */

:root {
  /* ---------- 主色（按钮、选中、强调） ---------- */
  --ac:        #0891b2;   /* ← 想换主色只改这几行 */
  --ac-2:      #0e7490;   /* 深一档：hover */
  --ac-3:      #155e75;   /* 再深一档：active */
  --ac-soft:   rgba(8,145,178,.09);
  --ac-line:   rgba(8,145,178,.34);
  --ac-ink:    #0e7490;   /* 主色文字 */
  /* 渐变与发光：科技感主要来自这两个 */
  --ac-grad:   linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);
  --ac-grad-2: linear-gradient(135deg,#22d3ee 0%,#6366f1 100%);
  --glow:      0 0 0 1px rgba(8,145,178,.22), 0 6px 22px rgba(8,145,178,.16);
  --glow-sm:   0 0 0 1px rgba(8,145,178,.18);
  /* hero 渐变：下面第二段 :root,html[data-theme=dark] 会覆盖成深色版 */
  --hero-grad: linear-gradient(135deg,#0a2c40 0%,#111f4d 55%,#161a3f 100%);
  --hero-edge: rgba(34,211,238,.35);

  /* ---------- 背景与面板（三层） ---------- */
  --bg:        #eef3f9;   /* 页面底 */
  --bg-2:      #f6f9fd;   /* 次级底：侧栏、输入框 */
  --panel:     #ffffff;   /* 卡片面 */
  --panel-2:   #f1f5fb;   /* 卡片内嵌面 */
  --overlay:   rgba(9,17,30,.48);
  /* 网格底纹与光斑（body 上铺一层） */
  --grid:      rgba(8,145,178,.075);
  --aura-1:    rgba(6,182,212,.10);
  --aura-2:    rgba(99,102,241,.09);

  /* ---------- 描边 ---------- */
  --line:      #dbe4f0;
  --line-2:    #c3d2e6;

  /* ---------- 文字（三级） ---------- */
  --tx:        #0b1526;
  --tx-2:      #4a5a72;
  --tx-3:      #7b8ba3;

  /* ---------- 语义色 ---------- */
  --ok:        #059669;   --ok-2:   #047857;
  --ok-soft:   #e6f7f1;   --ok-line:#b8e6d5;
  --warn:      #b45309;   --warn-soft:#fdf3e3;
  --bad:       #dc2626;   --bad-soft:#fdecec;
  --info:      #0369a1;   --info-soft:#e6f2fb;

  /* ---------- 圆角（收锐 = 更像仪表盘） ---------- */
  --r-sm:      4px;
  --r:         6px;
  --r-lg:      10px;
  --r-full:    999px;

  /* ---------- 间距（8px 体系） ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---------- 字号 ---------- */
  --fs-xs: 11px;  --fs-sm: 12.5px; --fs-md: 13.5px;
  --fs-lg: 15.5px; --fs-xl: 18px;  --fs-2xl: 22px; --fs-3xl: 28px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgba(11,21,38,.05);
  --sh-2: 0 2px 10px rgba(11,21,38,.08), 0 1px 2px rgba(11,21,38,.04);
  --sh-3: 0 16px 40px rgba(11,21,38,.16);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --t-fast: .13s;  --t-mid: .22s;

  /* ---------- 尺寸 ---------- */
  --side-w: 218px;
  --side-w-mini: 64px;
  --top-h: 56px;
  --content-max: 1180px;

  /* ---------- 字体 ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================================
   ★ 默认主题：深色（深空指挥中心）
   ----------------------------------------------------------------------------
   为什么把深色设成默认：用户要「更科技」。深色是科技感最强的读法，
   而且数字密集的仪表盘在深底上更好读。
   ★ 想改回「跟随系统」：见 assets/js/core/store.js 的 bootstrap()，
     把那段「没有本地选择时用 dark」的判断删掉即可（一处）。
   ============================================================================ */
:root,
html[data-theme="dark"] {
  --bg: #05080f;
  --bg-2: #080d17;
  --panel: #0c1420;
  --panel-2: #111c2c;
  --overlay: rgba(0,0,0,.66);

  --grid: rgba(34,211,238,.055);
  --aura-1: rgba(34,211,238,.13);
  --aura-2: rgba(99,102,241,.12);

  --line: #1b2739;
  --line-2: #2a3a52;

  --tx: #e8f0fb;
  --tx-2: #93a6c0;
  --tx-3: #5d708c;

  --ac: #22d3ee;
  --ac-2: #67e8f9;
  --ac-3: #a5f3fc;
  --ac-soft: rgba(34,211,238,.13);
  --ac-line: rgba(34,211,238,.38);
  --ac-ink: #67e8f9;
  --ac-grad: linear-gradient(135deg,#22d3ee 0%,#3b82f6 100%);
  --ac-grad-2: linear-gradient(135deg,#22d3ee 0%,#818cf8 100%);
  --glow: 0 0 0 1px rgba(34,211,238,.28), 0 6px 26px rgba(34,211,238,.20);
  --glow-sm: 0 0 0 1px rgba(34,211,238,.22);
  /* 首页 hero：深色下**不做高饱和整块渐变**（那看起来像消费级横幅），
     走「深蓝面板 + 左上角一点青」——更像指挥中心的一块屏 */
  --hero-grad: linear-gradient(135deg,#0a2c40 0%,#111f4d 55%,#161a3f 100%);
  --hero-edge: rgba(34,211,238,.35);

  --ok: #34d399;  --ok-2: #6ee7b7;  --ok-soft: rgba(52,211,153,.14);
  --ok-line: rgba(52,211,153,.32);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.14);
  --bad: #fb7185;  --bad-soft: rgba(251,113,133,.14);
  --info: #38bdf8; --info-soft: rgba(56,189,248,.14);

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 2px 12px rgba(0,0,0,.55);
  --sh-3: 0 18px 48px rgba(0,0,0,.7);
}

/* 浅色也做成「科技浅」：冷调、清晰的发丝线，不是暖白 */
html[data-theme="light"] {
  --bg: #eef3f9;
  --bg-2: #f6f9fd;
  --panel: #ffffff;
  --panel-2: #f1f5fb;
  --overlay: rgba(9,17,30,.48);
  --grid: rgba(8,145,178,.075);
  --aura-1: rgba(6,182,212,.10);
  --aura-2: rgba(99,102,241,.09);
  --line: #dbe4f0;
  --line-2: #c3d2e6;
  --tx: #0b1526;
  --tx-2: #4a5a72;
  --tx-3: #7b8ba3;
  --ac: #0891b2;
  --ac-2: #0e7490;
  --ac-3: #155e75;
  --ac-soft: rgba(8,145,178,.09);
  --ac-line: rgba(8,145,178,.34);
  --ac-ink: #0e7490;
  --ac-grad: linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);
  --ac-grad-2: linear-gradient(135deg,#22d3ee 0%,#6366f1 100%);
  --glow: 0 0 0 1px rgba(8,145,178,.22), 0 6px 22px rgba(8,145,178,.16);
  --glow-sm: 0 0 0 1px rgba(8,145,178,.18);
  --hero-grad: linear-gradient(135deg,#06b6d4 0%,#4f46e5 100%);
  --hero-edge: rgba(255,255,255,.28);
}