/* 
  PromptForGood - 全局主题与设计系统 (Design System)
  基于 Element Plus 变量覆盖与原生 CSS 变量
  核心理念：稳定性与信任感 (Stability & Trust)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  /* === Element Plus 主题变量覆盖 (稳定性与信任感方案) === */
  /* 主色：Navy 900 - 深沉、专业、值得信赖 */
  --el-color-primary: #1E3A8A;
  --el-color-primary-light-3: #1D4ED8;
  --el-color-primary-light-5: #3B82F6;
  --el-color-primary-light-7: #93C5FD;
  --el-color-primary-light-8: #DBEAFE;
  --el-color-primary-light-9: #EFF6FF;
  --el-color-primary-dark-2: #172554;
  
  /* 语义色 */
  --el-color-success: #059669;       /* Emerald 600: 稳健的成功色 */
  --el-color-warning: #B45309;       /* Amber 700: 沉稳的灵感提示色 */
  --el-color-danger: #991B1B;        /* Red 800: 庄重的警告色 */
  
  /* 基础组件规范 */
  --el-border-radius-base: 6px;      /* 稍小的圆角，增加结构的严谨感 */
  --el-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* === 自定义系统变量 (语义化) === */
  --primary: var(--el-color-primary);
  --primary-hover: var(--el-color-primary-light-3);
  --primary-light: var(--el-color-primary-light-9);

  --secondary: #334155;              /* Slate 700: 冷静、中立的辅助色 */
  --secondary-light: #F1F5F9;

  --accent: var(--el-color-warning); /* 强调色，主要用于灵感和提示 */

  /* 中性色 (更具质感的 Slate 灰度) */
  --bg: #F8FAFC;                     /* 全局背景色 */
  --surface: #FFFFFF;                /* 卡片、容器背景色 */
  --text-primary: #0F172A;           /* Slate 900: 极佳的阅读对比度 */
  --text-secondary: #475569;         /* Slate 600 */
  --border: #CBD5E1;                 /* Slate 300: 明确的边界感 */

  /* 状态颜色快捷方式 */
  --success: var(--el-color-success);
  --warning: var(--el-color-warning);
  --error: var(--el-color-danger);
}

/* === 全局基础样式 === */
body {
  margin: 0;
  background: var(--bg);
  font-family: var(--el-font-family);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* === 通用布局组件 === */

.container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

/* 区块间距与动画 */
.section {
  margin-bottom: 48px;
  animation: km-fadeIn 0.5s ease-in-out backwards;
}

@keyframes km-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 标题样式 */
.title {
  font-size: 22px;
  margin-bottom: 24px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.01em;
}

.title::before {
  content: '';
  display: block;
  width: 4px;
  height: 20px;
  background: var(--primary);
  border-radius: 2px;
}

/* 卡片样式 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-light);
}

/* 网格布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* 稳重、专业风格的提示框 */
.tip-box {
  background: var(--primary-light);
  color: var(--primary);
  padding: 18px 24px;
  border-radius: 10px;
  border-left: 5px solid var(--primary);
  margin-bottom: 32px;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* === 响应式基础样式 === */
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
  }
  
  body {
    font-size: var(--font-size-base);
  }
  
  .container {
    padding: 0 16px;
    margin: 20px auto;
  }
}