/**
 * CityPulse - CSS 变量定义（简洁现代风 · Notion/Linear 风格）
 * 配色：克制蓝灰品牌色 + 极少渐变 + 细边框 + 充足留白
 * 浅色主题为默认，[data-theme="dark"] 覆盖暗色变量
 */

:root {
  /* ===== 品牌色（克制蓝灰系） ===== */
  --brand: #111827;              /* 主品牌：近黑深灰（Linear 风）*/
  --brand-hover: #374151;        /* hover 稍浅 */
  --brand-soft: #F3F4F6;         /* 品牌浅底（95% 灰）*/
  --brand-border: #E5E7EB;       /* 细边框色 */

  --accent: #2563EB;             /* 点缀蓝：链接/按钮强调，克制使用 */
  --accent-hover: #1D4ED8;
  --accent-soft: #EFF6FF;

  --success: #059669;
  --warning: #D97706;
  --error:   #DC2626;

  /* ===== Hero 背景（极简：几乎纯白，极淡网格） ===== */
  --hero-bg: #FFFFFF;
  --hero-grid-color: rgba(17, 24, 39, 0.04);  /* 极淡网格点缀 */
  /* 文字高亮：简单加粗，避免花哨渐变 */
  --highlight-color: #2563EB;

  /* ===== 浅色主题（默认） ===== */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F9FAFB;       /* 极浅灰，区块背景区分 */
  --bg-card:      #FFFFFF;
  --bg-muted:     #F3F4F6;       /* input / tag 底 */

  --text-primary:   #111827;     /* 主文字：近黑 */
  --text-secondary: #6B7280;     /* 次级：中灰 */
  --text-tertiary:  #9CA3AF;     /* 更弱：浅灰 */

  --border:         #E5E7EB;     /* 细边框 */
  --border-strong:  #D1D5DB;     /* 强边框，极少用 */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-card: var(--shadow-sm);  /* 卡片：非常淡的阴影 */
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.08); /* hover：只加深一点 */

  /* ===== 导航栏（极简：白底 + 细线，不加毛玻璃） ===== */
  --nav-bg:      rgba(255, 255, 255, 0.92);
  --nav-border:  var(--border);
  --nav-text:    var(--text-primary);
  --nav-text-hover: var(--accent);

  /* Hero 文字（Hero 现在是浅底 → 文字直接用主色） */
  --hero-text:        var(--text-primary);
  --hero-text-soft:   var(--text-secondary);
  --hero-text-muted:  var(--text-tertiary);
  --hero-badge-bg:    var(--bg-muted);
  --hero-badge-border: var(--border);
  --hero-search-bg:   #FFFFFF;
  --hero-search-border: var(--border);

  /* ===== 兼容别名（供 admin/dashboard 旧代码使用，跟随新风格） ===== */
  --color-primary: var(--accent);     /* 旧 --color-primary → 新点缀蓝 */
  --color-error:   var(--error);
  --highlight:     var(--highlight-color);
  --surface-muted: var(--bg-muted);
  --surface-card:  var(--bg-card);

  /* ===== 字体 ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
               system-ui, sans-serif;

  /* ===== 字号：Notion 风更紧凑 ===== */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 28px;
  --text-2xl: 52px;

  /* ===== 行高 ===== */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ===== 字重 ===== */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ===== 间距 ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;
  --space-9: 120px;

  /* ===== 圆角：克制（小圆角为主）===== */
  --radius-xs: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 14px;
  --radius-full: 9999px;

  /* ===== 过渡 ===== */
  --transition: 150ms ease;
  --transition-slow: 250ms ease;

  /* ===== 布局 ===== */
  --nav-height: 60px;
  --container-max: 1160px;
}

/* ===== 暗色主题覆盖（保持简洁） ===== */
[data-theme="dark"] {
  --brand: #F9FAFB;
  --brand-hover: #E5E7EB;
  --brand-soft: #1F2937;
  --brand-border: #374151;

  --accent: #3B82F6;
  --accent-hover: #60A5FA;
  --accent-soft: #1E3A5F;

  --bg-primary:   #0B1220;
  --bg-secondary: #111827;
  --bg-card:      #111827;
  --bg-muted:     #1F2937;

  --text-primary:   #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-tertiary:  #6B7280;

  --border:        #1F2937;
  --border-strong: #374151;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.5);

  --nav-bg:     rgba(11, 18, 32, 0.92);
  --nav-border: var(--border);
  --nav-text:   var(--text-primary);
  --nav-text-hover: var(--accent);

  --hero-bg: var(--bg-primary);
  --hero-grid-color: rgba(156, 163, 175, 0.06);
  --highlight-color: #60A5FA;
}