/* ============================================================================
   newapi-brand / theme.css — 「黑白」主题预设（mono）
   ----------------------------------------------------------------------------
   v2：黑白不再是全局强制覆盖，而是注册为应用主题系统里的一个预设。

   挂载点：html[data-brand-preset="mono"]（mono.js 维护，React 的预设系统
   只写 body 的 data-theme-preset，碰不到 html，所以两边互不踩）。
   - 默认启用：nginx sub_filter 在 <body> 标签上预置该属性（无闪白），
     mono.js 按用户选择增删。
   - 用户在应用里选了彩色预设（rose-garden 等，存于
     localStorage newapi:theme:v1:preset）→ 自动让位给应用预设。
   - 主题菜单里的「黑白主题 / 原版配色」可随时切换。

   色板设计：Vercel/Linear 式单色 —— 浅色白纸黑字、深色纯黑底白字，
   层次只靠灰度与 1px 边线；图表/状态徽标/Tailwind 色板全部灰阶化。
   ============================================================================ */

/* ── 黑白 · 浅色 ─────────────────────────────────────────────────────── */
html[data-brand-preset='mono'] {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #0a0a0a;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #666666;
  --accent: #f0f0f0;
  --accent-foreground: #0a0a0a;
  --border: #e6e6e6;
  --input: #e6e6e6;
  --ring: #a3a3a3;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #0a0a0a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #ececec;
  --sidebar-accent-foreground: #0a0a0a;
  --sidebar-border: #e8e8e8;
  --sidebar-ring: #a3a3a3;
  --skeleton-base: #f0f0f0;
  --skeleton-highlight: #f9f9f9;
  /* 图表 5 阶灰（深→浅） */
  --chart-1: #111111;
  --chart-2: #4d4d4d;
  --chart-3: #808080;
  --chart-4: #b3b3b3;
  --chart-5: #d9d9d9;
  --overview-accent-1: #111111;
  --overview-accent-2: #6b6b6b;
  --overview-accent-3: #b3b3b3;
  /* 状态色灰阶（黑=最重 → 浅灰=最轻）。要恢复彩色语义，换成：
     destructive#e40014 success#009767 warning#cd8900 info#0084cc neutral#a1a1a1 */
  --destructive: #171717;
  --destructive-foreground: #ffffff;
  --success: #3f3f3f;
  --success-foreground: #ffffff;
  --warning: #5c5c5c;
  --warning-foreground: #ffffff;
  --info: #7a7a7a;
  --info-foreground: #ffffff;
  --neutral: #a3a3a3;
  --neutral-foreground: #0a0a0a;
  /* 可视化条件树（计费规则编辑器）连线/标签 */
  --condition-accent: #525252;
  --condition-label: #171717;
  /* 极简骨架：小圆角 + 无衬线 */
  --radius: 0.5rem;
  --font-body: var(--font-sans);
  color-scheme: light;
}

/* ── 黑白 · 深色 ─────────────────────────────────────────────────────── */
html.dark[data-brand-preset='mono'] {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #121212;
  --card-foreground: #fafafa;
  --popover: #161616;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #0a0a0a;
  --secondary: #1e1e1e;
  --secondary-foreground: #e5e5e5;
  --muted: #191919;
  --muted-foreground: #9e9e9e;
  --accent: #202020;
  --accent-foreground: #fafafa;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #5c5c5c;
  --sidebar: #0d0d0d;
  --sidebar-foreground: #e8e8e8;
  --sidebar-primary: #fafafa;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #1c1c1c;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #5c5c5c;
  --skeleton-base: #1a1a1a;
  --skeleton-highlight: #262626;
  --chart-1: #fafafa;
  --chart-2: #cccccc;
  --chart-3: #9a9a9a;
  --chart-4: #666666;
  --chart-5: #3d3d3d;
  --overview-accent-1: #fafafa;
  --overview-accent-2: #a3a3a3;
  --overview-accent-3: #525252;
  --destructive: #ededed;
  --destructive-foreground: #0a0a0a;
  --success: #d4d4d4;
  --success-foreground: #0a0a0a;
  --warning: #a3a3a3;
  --warning-foreground: #0a0a0a;
  --info: #8f8f8f;
  --info-foreground: #0a0a0a;
  --neutral: #6b6b6b;
  --neutral-foreground: #fafafa;
  --condition-accent: #a3a3a3;
  --condition-label: #e5e5e5;
  --radius: 0.5rem;
  --font-body: var(--font-sans);
  color-scheme: dark;
}

/* ── 黑白 · Tailwind 彩色色板灰阶化 ─────────────────────────────────────
   组件里大量 text-blue-500 / bg-emerald-100 式硬色引用 :root 的 --color-*，
   按感知亮度整体映射为灰，工具类一处覆盖全站生效；浅深模式共用同一映射
   （dark: 变体的亮度差仍可分辨）。仅黑白预设激活时生效。 */
html[data-brand-preset='mono'] {
  --color-red-50: #eaeaea;   --color-red-100: #d3d3d3;   --color-red-200: #b4b4b4;
  --color-red-300: #898989;   --color-red-400: #5a5a5a;   --color-red-500: #434343;
  --color-red-600: #333333;   --color-red-700: #232323;   --color-red-800: #191919;
  --color-red-900: #131313;   --color-red-950: #060606;   --color-orange-100: #e0e0e0;
  --color-orange-300: #9a9a9a;   --color-orange-500: #5c5c5c;   --color-orange-700: #2f2f2f;
  --color-orange-800: #1e1e1e;   --color-orange-900: #151515;   --color-amber-50: #f6f6f6;
  --color-amber-100: #e6e6e6;   --color-amber-200: #cfcfcf;   --color-amber-300: #b3b3b3;
  --color-amber-400: #989898;   --color-amber-500: #7a7a7a;   --color-amber-600: #515151;
  --color-amber-700: #303030;   --color-amber-800: #1f1f1f;   --color-amber-900: #161616;
  --color-amber-950: #080808;   --color-yellow-400: #a5a5a5;   --color-yellow-500: #888888;
  --color-yellow-600: #595959;   --color-lime-500: #848484;   --color-green-300: #b9b9b9;
  --color-green-400: #939393;   --color-green-500: #747474;   --color-green-600: #4f4f4f;
  --color-green-700: #313131;   --color-green-800: #1f1f1f;   --color-emerald-50: #f3f3f3;
  --color-emerald-100: #e2e2e2;   --color-emerald-200: #cacaca;   --color-emerald-300: #ababab;
  --color-emerald-400: #848484;   --color-emerald-500: #686868;   --color-emerald-600: #444444;
  --color-emerald-700: #2c2c2c;   --color-emerald-800: #1c1c1c;   --color-emerald-900: #141414;
  --color-emerald-950: #070707;   --color-teal-300: #b0b0b0;   --color-teal-500: #6b6b6b;
  --color-teal-800: #1d1d1d;   --color-cyan-100: #e5e5e5;   --color-cyan-300: #b4b4b4;
  --color-cyan-500: #6d6d6d;   --color-cyan-700: #2d2d2d;   --color-cyan-800: #1f1f1f;
  --color-cyan-900: #161616;   --color-sky-50: #f0f0f0;   --color-sky-200: #c2c2c2;
  --color-sky-300: #9d9d9d;   --color-sky-400: #787878;   --color-sky-500: #5e5e5e;
  --color-sky-700: #282828;   --color-sky-900: #151515;   --color-sky-950: #090909;
  --color-blue-50: #ebebeb;   --color-blue-100: #d3d3d3;   --color-blue-200: #b6b6b6;
  --color-blue-300: #909090;   --color-blue-400: #636363;   --color-blue-500: #454545;
  --color-blue-600: #2e2e2e;   --color-blue-700: #212121;   --color-blue-800: #171717;
  --color-blue-900: #121212;   --color-blue-950: #080808;   --color-indigo-100: #d1d1d1;
  --color-indigo-500: #363636;   --color-indigo-800: #131313;   --color-indigo-900: #0f0f0f;
  --color-violet-100: #d9d9d9;   --color-violet-300: #8d8d8d;   --color-violet-400: #5c5c5c;
  --color-violet-500: #3a3a3a;   --color-violet-600: #282828;   --color-violet-700: #1e1e1e;
  --color-violet-800: #161616;   --color-violet-900: #101010;   --color-violet-950: #070707;
  --color-purple-300: #939393;   --color-purple-500: #3f3f3f;   --color-purple-700: #202020;
  --color-pink-500: #474747;   --color-rose-50: #e9e9e9;   --color-rose-100: #d6d6d6;
  --color-rose-200: #b7b7b7;   --color-rose-300: #898989;   --color-rose-400: #5c5c5c;
  --color-rose-500: #444444;   --color-rose-600: #353535;   --color-rose-700: #252525;
  --color-rose-800: #1a1a1a;   --color-rose-900: #141414;   --color-rose-950: #060606;
}

/* ── 黑白 · 细节打磨（仅预设激活时）──────────────────────────────────── */

/* lucide 线性图标统一减细一档 */
html[data-brand-preset='mono'] svg.lucide {
  stroke-width: 1.75;
}

/* 滚动条极简灰 */
html[data-brand-preset='mono'] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, 0.45) transparent;
}
html[data-brand-preset='mono'] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-brand-preset='mono'] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-brand-preset='mono'] ::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.45);
  border-radius: 4px;
}
html[data-brand-preset='mono'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 127, 127, 0.7);
}

/* 选区反色 */
html[data-brand-preset='mono'] ::selection {
  background: #0a0a0a;
  color: #ffffff;
}
html.dark[data-brand-preset='mono'] ::selection {
  background: #fafafa;
  color: #0a0a0a;
}

/* 装饰性渐变/光晕（页头 hero 的内联 oklch 硬色）去色 */
html[data-brand-preset='mono'] [class*='radial-gradient'],
html[data-brand-preset='mono'] [class*='linear-gradient'],
html[data-brand-preset='mono'] [style*='radial-gradient'],
html[data-brand-preset='mono'] [style*='linear-gradient'] {
  filter: grayscale(1);
}

/* 字体渲染 */
html[data-brand-preset='mono'] body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 品牌图标（与主题无关，恒定生效）────────────────────────────────── */
/* logo 是黑色符号，深色模式整体反白 */
html.dark img[src$='/logo.png'],
html.dark img[src$='/logo.svg'] {
  filter: invert(1);
}
html.dark [style*='/logo.png'] {
  filter: invert(1);
}