/* ============================================================================
   单色主题皮肤（黑白灰 + 等比例大圆角）
   ----------------------------------------------------------------------------
   **独立实现，不含任何第三方源码。** 本文件只做一件事：覆盖设计令牌（token）。
   组件全部通过 `var(--*)` 取色取尺寸，所以换掉这一层就能整体换观感，
   与任何第三方项目的模块、组件、封装好的工具函数、业务逻辑都**没有代码关系**。

   取值依据：本项目自己的界面调研结论（见 `docs/` 下的调研文档）。落到代码里的
   只有两类**通用设计参数，不具备著作性**：

     · 颜色字面值 —— 中性灰阶（本身即 Tailwind 标准中性灰）、少量状态色
     · 尺寸与曲线 —— 圆角阶、动效时长与缓动曲线

   设计取向（不是照搬某个产品的表达，而是这套取向本身的取舍）：
     · **单色基底**：品牌色用浅灰白而非彩色
     · **等比例大圆角**：明显大于常规后台的圆角阶
     · **多层阴影 + 末尾 1px 内描边**（"高级浮层"的通用配方，非某产品独有）
     · **成功态用灰度表达**，不占用绿色

   本文件与默认的 `tokens.css`（金色体系）互斥可选：删掉 index.html 里
   `<link href="/css/theme-mono.css">` 即回退，组件代码一行不用改。
   ============================================================================ */

/* ============================ 深色基底 ============================ */
:root,
:root[data-theme='dark'],
:root[data-theme='auto'] {
  /* ---- 三层表面：近纯黑递进 ---- */
  --bg-base: #0a0a0a;
  --bg-sunken: #070707;
  --surface-1: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #1f1f1f;
  --surface-4: #262626;
  --bg-deep: #0a0a0a;
  --bg-panel: var(--surface-1);
  --bg-elevated: var(--surface-2);
  --bg-hover: var(--surface-3);
  --bg-active: var(--surface-4);

  /* ---- hairline：Tailwind 式中性灰 ---- */
  --line-1: #1f1f1f;
  --line-2: #262626;
  --line-3: #333333;
  --border: var(--line-2);
  --border-strong: var(--line-3);

  /* ---- 品牌色＝浅灰白（单色系统的核心特征） ---- */
  --accent: #f5f5f5;
  --accent-bright: #ffffff;
  --accent-dim: #a3a3a3;
  --accent-ink: #0a0a0a;                 /* 浅色块上的文字 */
  --accent-soft: rgba(245, 245, 245, .08);
  --accent-glow: rgba(245, 245, 245, .06);
  --accent-grad: linear-gradient(135deg, #ffffff 0%, #d4d4d4 100%);
  --accent-grad-soft: linear-gradient(90deg, rgba(245,245,245,.28), rgba(245,245,245,.06));
  --border-gold: rgba(245, 245, 245, .22);

  /* ---- 文字 ---- */
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --text-faint: #525252;
  --text-inverse: #0a0a0a;

  /* ---- 状态色（success 走灰，见文件头说明） ---- */
  --success: #a3a3a3;
  --warning: #fb923c;
  --danger: #f87171;
  --info: #22d3ee;
  --neutral: #525252;
  --success-soft: rgba(163, 163, 163, .14);
  --warning-soft: rgba(251, 146, 60, .12);
  --danger-soft: rgba(248, 113, 113, .12);
  --info-soft: rgba(34, 211, 238, .12);

  /* ---- 等比例大圆角（LR-UI） ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- 多层阴影 + 末尾 1px 内描边（"高级浮层"的通用配方，非某产品独有） ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 4px 8px rgba(0, 0, 0, .35),
              0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .5), 0 12px 12px rgba(0, 0, 0, .4),
              0 24px 16px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-4: 0 8px 16px rgba(0, 0, 0, .5), 0 24px 24px rgba(0, 0, 0, .4),
              0 48px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .07);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-sm: var(--shadow-1);

  /* ---- 动效（标准缓动曲线与时长阶） ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;

  /* ---- 控制台：近黑 + 中性文字，仅错误/警告上色 ---- */
  --console-bg: #0a0a0a;
  --console-bar: #141414;
  --console-info: #d4d4d4;
  --console-warn: #fb923c;
  --console-error: #f87171;
  --console-cmd: #22d3ee;
  --console-time: #525252;
  --console-hl: rgba(245, 245, 245, .16);
}

/* ============================ 浅色（:root[data-theme='light']） ============================ */
:root[data-theme='light'] {
  --bg-base: #fafafa;
  --bg-sunken: #f5f5f5;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f5f5f5;
  --surface-4: #e8e8e8;
  --bg-deep: #f5f5f5;
  --line-1: #f0f0f0;
  --line-2: #e8e8e8;
  --line-3: #d4d4d4;

  --accent: #171717;
  --accent-bright: #000000;
  --accent-dim: #525252;
  --accent-ink: #ffffff;
  --accent-soft: rgba(23, 23, 23, .06);
  --accent-glow: rgba(23, 23, 23, .05);
  --accent-grad: linear-gradient(135deg, #404040 0%, #171717 100%);
  --accent-grad-soft: linear-gradient(90deg, rgba(23,23,23,.22), rgba(23,23,23,.05));
  --border-gold: rgba(23, 23, 23, .2);

  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #737373;
  --text-faint: #a3a3a3;
  --text-inverse: #ffffff;

  --success: #525252;
  --warning: #ea580c;
  --danger: #dc2626;
  --info: #0891b2;
  --neutral: #a3a3a3;
  --success-soft: rgba(82, 82, 82, .1);
  --warning-soft: rgba(234, 88, 12, .1);
  --danger-soft: rgba(220, 38, 38, .1);
  --info-soft: rgba(8, 145, 178, .1);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .04),
              0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .06), 0 12px 12px rgba(0, 0, 0, .05),
              0 24px 16px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-4: 0 8px 16px rgba(0, 0, 0, .07), 0 24px 24px rgba(0, 0, 0, .05),
              0 48px 32px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .06);

  --console-bg: #ffffff;
  --console-bar: #f5f5f5;
  --console-info: #262626;
  --console-warn: #ea580c;
  --console-error: #dc2626;
  --console-cmd: #0891b2;
  --console-time: #a3a3a3;
  --console-hl: rgba(23, 23, 23, .1);
}

/* 跟随系统 + 系统偏好亮色 → 用本皮肤的浅色（原来的 'auto' 是纸面金） */
@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] {
    --bg-base: #fafafa;
    --bg-sunken: #f5f5f5;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f5f5f5;
    --surface-4: #e8e8e8;
    --bg-deep: #f5f5f5;
    --line-1: #f0f0f0;
    --line-2: #e8e8e8;
    --line-3: #d4d4d4;
    --accent: #171717;
    --accent-bright: #000000;
    --accent-dim: #525252;
    --accent-ink: #ffffff;
    --accent-soft: rgba(23, 23, 23, .06);
    --accent-grad: linear-gradient(135deg, #404040 0%, #171717 100%);
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-muted: #737373;
    --text-faint: #a3a3a3;
    --text-inverse: #ffffff;
    --success: #525252;
    --warning: #ea580c;
    --danger: #dc2626;
    --info: #0891b2;
    --neutral: #a3a3a3;
    --success-soft: rgba(82, 82, 82, .1);
    --warning-soft: rgba(234, 88, 12, .1);
    --danger-soft: rgba(220, 38, 38, .1);
    --info-soft: rgba(8, 145, 178, .1);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .04),
                0 0 0 1px rgba(0, 0, 0, .05);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, .06), 0 12px 12px rgba(0, 0, 0, .05),
                0 24px 16px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .05);
    --shadow-4: 0 8px 16px rgba(0, 0, 0, .07), 0 24px 24px rgba(0, 0, 0, .05),
                0 48px 32px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .06);
    --console-bg: #ffffff;
    --console-bar: #f5f5f5;
    --console-info: #262626;
    --console-warn: #ea580c;
    --console-error: #dc2626;
    --console-cmd: #0891b2;
    --console-time: #a3a3a3;
    --console-hl: rgba(23, 23, 23, .1);
  }
}

/* ============================ 少数组件级补充 ============================
   只改"token 表达不了"的地方：等比例大圆角在小控件上的观感、以及单色系统下
   主按钮与状态徽标的做法（单色系统下主按钮用浅灰白底 + 深色字）。 */

:root .btn.primary {
  box-shadow: var(--shadow-1);
}
/* 单色系统里"运行中"不再靠绿色，靠亮点 + 文案 */
:root .badge.running .dot {
  background: var(--text-primary);
}
:root .badge.stopped .dot {
  background: var(--neutral);
}
:root .card,
:root .modal {
  /* 大圆角（阴影由 token 的 --shadow-* 提供，这里只统一圆角） */
  border-radius: var(--r-lg);
}
:root .stat,
:root .metric {
  border-radius: var(--r-md);
  /* 统计卡原来不带阴影（只有 .card 有），在大圆角 + 多层阴影体系里
     会显得"贴"在背景上；补一层最轻的，保持与卡片同一套真实感语言。 */
  box-shadow: var(--shadow-1);
}
:root .inst-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
:root .console-box,
:root .table-wrap {
  border-radius: var(--r-lg);
}
:root .btn,
:root .badge,
:root input,
:root select,
:root textarea {
  border-radius: var(--r-sm);
}
:root .btn.pill,
:root .badge.pill {
  border-radius: var(--r-pill);
}

/* 角色徽标：单色系统下用灰阶区分，不靠四色（保留可读性对比） */
:root .badge.role-super { color: var(--text-primary); border-color: var(--line-3); }
:root .badge.role-admin { color: var(--text-secondary); border-color: var(--line-3); }
:root .badge.role-user { color: var(--text-secondary); border-color: var(--line-2); }
:root .badge.role-viewer { color: var(--text-faint); border-color: var(--line-2); }