/* ============================================
   CSS 变量定义文件 - variables.css
   08_黑料社区数据可视化与交互信息图站
   ============================================ */

:root {
  /* 主色调：用于核心数据高亮、重要图表元素、关键操作按钮，传递警示与聚焦感 */
  --primary: #FF6384;
  /* 辅色：用于次要数据对比、分类标签、链接文字，提供理性的科技感 */
  --secondary: #36A2EB;
  /* 背景色：纯白背景，最大化提升图表对比度，保持页面干净整洁 */
  --bg: #FFFFFF;
  /* 卡片背景色：极浅的灰色，用于区分不同的数据模块和图表容器，增加层次感 */
  --card-bg: #F8F9FA;
  /* 强调色：用于特殊标记、警告提示、趋势线的高光点，吸引用户注意力 */
  --accent: #FFCE56;
  /* 文字色：深灰色，确保长篇数据分析报告的阅读舒适度 */
  --text: #1A1A1A;
  /* 辅助文字色：用于图表坐标轴、图例、数据源引用标注等次要信息 */
  --text-light: #6C757D;
  /* 边框色：用于模块分割线、表格边框，轻量化设计 */
  --border: #E9ECEF;

  /* 图表专用色板 - 用于多系列数据的区分 */
  --chart-color-1: #FF6384;
  --chart-color-2: #36A2EB;
  --chart-color-3: #FFCE56;
  --chart-color-4: #4BC0C0;
  --chart-color-5: #9966FF;
  --chart-color-6: #FF9F40;
  --chart-color-7: #C9CBCF;

  /* 间距系统 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* 字体系统 */
  --font-heading: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', monospace;

  /* 字号系统 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* 过渡 */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* 层级 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* 暗黑模式预留（通过 data-theme 属性切换） */
[data-theme="dark"] {
  --bg: #1A1A2E;
  --card-bg: #16213E;
  --text: #E8E8E8;
  --text-light: #A0A0A0;
  --border: #2A2A4A;
}