@import "tailwindcss";

/* 简单的图标占位类 */
.i-bell::before { content: "🔔"; display: inline-block; }

/* 全局滚动条稳定，避免页面切换时左右抖动 */
body { scrollbar-gutter: stable both-edges; }

/* 统一阴影层级（与 antd 风格接近） */
.elev-1 { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.elev-2 { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }

/* 通用卡片表面（可在各页面复用） */
.card-surface {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ==========================
   设计规范：根变量与暗色主题
   来源：.cursorules/design.md
   ========================== */
:root {
  /* 颜色 - 主色与中性色 */
  --color-bg: #0D0D0D;             /* 背景：深黑 */
  --color-surface: #1A1A1A;        /* 模块底 */
  --color-text: #F2F2F2;           /* 正文文本 */
  --color-text-secondary: #CCCCCC; /* 次要文本 */
  --color-border: #333333;         /* 边框 */
  --color-primary: #00B030;        /* 主功能色 */
  --color-blue: #1A66E0;           /* 辅助交互蓝 */
  --color-accent: #FF6A30;         /* 强调橙 */

  /* 字号与行高 */
  --font-title-size: 20px;   /* Montserrat 半粗体 */
  --font-body-size: 14px;    /* Inter 常规 */
  --font-small-size: 12px;   /* 辅助文本 */
  --line-height-base: 1.5;

  /* 圆角与阴影 */
  --radius-card: 6px; /* 卡片圆角 */
  --shadow-inset-card: inset 0 2px 4px rgba(0,0,0,0.4);
  --glow-primary: 0 0 6px rgba(0,176,48,0.3);
}

/* 正确的 :root 变量声明（专业科技蓝方案） */
:root {
  /* 主色系 - 科技蓝 */
  --color-primary: #3B82F6;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #2563EB;
  --color-primary-glow: rgba(59, 130, 246, 0.3);

  /* 辅助色 */
  --color-blue: #1A66E0;
  --color-accent: #FF6A30;

  /* 中性色（保持） */
  --color-bg: #0D0D0D;
  --color-surface: #1A1A1A;
  --color-text: #F2F2F2;
  --color-text-secondary: #CCCCCC;
  --color-border: #333333;

  /* 尺寸与阴影（保持） */
  --radius-card: 6px;
  --shadow-inset-card: inset 0 2px 4px rgba(0,0,0,0.4);
  --glow-primary: 0 0 6px var(--color-primary-glow);
}

/* 全局暗色基础 */
html, body, #app {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-body-size);
  line-height: var(--line-height-base);
}

/* 卡片：遵循新规范（默认暗色表面） */
.card-surface--dark {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-inset-card);
}

/* 按钮主色（用于顶部试用按钮等） */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  box-shadow: var(--glow-primary);
  filter: brightness(1.03);
}

/* 次要文本与分割线工具类 */
.text-secondary { color: var(--color-text-secondary); }
.border-base { border-color: var(--color-border); }

/* 覆盖 antd 组件的占位符与主按钮色（全局） */
:root :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector, textarea)::placeholder {
  color: color-mix(in oklab, var(--color-text-secondary) 80%, transparent);
}

:root :where(.ant-btn-primary) {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

:root :where(.ant-btn-primary:hover, .ant-btn-primary:focus) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}