/* variables.css - 统一配色方案 */
:root {
  /* 主色调 */
  --primary-color: #2c3e50;
  --accent-color: #3498db;
  --accent-hover: #2980b9;
  
  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f0f2f5;
  --bg-hover: #e9ecef;
  
  /* 文字颜色 */
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --text-tertiary: #95a5a6;
  --text-muted: #adb5bd;
  
  /* 边框和阴影 */
  --border-color: #e9ecef;
  --border-hover: #dee2e6;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Crimson Pro", "Noto Serif SC", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  
  /* 间距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  
  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 布局高度 */
  --header-height: 60px;
  --category-nav-height: 60px;
  --sticky-offset: 120px;
  
  /* 分类颜色 */
  --category-life: #e74c3c;
  --category-thought: #9b59b6;
  --category-engineering: #f39c12;
  --category-code: #3498db;
  --category-ai: #1abc9c;
  
  /* 错误颜色 */
  --color-error: #dc2626;
  --color-error-soft: #fee2e2;
  
  /* 强调色上的文字颜色 */
  --color-on-accent: #ffffff;
  
  /* Hero Banner 组件 */
  --hero-banner-bg-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --color-on-hero-banner: #ffffff;
  --color-on-hero-banner-secondary: rgba(255, 255, 255, 0.85);
  --color-on-hero-banner-tertiary: rgba(255, 255, 255, 0.9);
  
  /* 侧边栏名称 */
  --sidebar-name-bg: linear-gradient(135deg, #6b7d9a 0%, #5a6d80 100%);
  --sidebar-name-color: #ffffff;
  --sidebar-name-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  /* 归档页面特定变量 */
  --archive-title-color: #f59e0b;
  --archive-title-shadow: rgba(245, 158, 11, 0.4);
  --archive-timeline-gradient: linear-gradient(180deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
  --archive-accent-pink: #ec4899;
  --archive-year-header-bg: linear-gradient(135deg, #e4e9f2 0%, #f5f5f5 100%);
  --archive-post-item-bg: #fcfcfc;
  --archive-post-node-border: #1a1d29;
  /* 归档页面半透明强调色 */
  --archive-accent-orange-10: rgba(245, 158, 11, 0.1);
  --archive-accent-orange-15: rgba(245, 158, 11, 0.15);
  --archive-accent-orange-20: rgba(245, 158, 11, 0.2);
  --archive-accent-orange-30: rgba(245, 158, 11, 0.3);
  --archive-accent-orange-40: rgba(245, 158, 11, 0.4);
  --archive-accent-pink-10: rgba(236, 72, 153, 0.1);
  --archive-accent-pink-20: rgba(236, 72, 153, 0.2);
  --archive-accent-pink-40: rgba(236, 72, 153, 0.4);
  --archive-date-bg: rgba(100, 116, 139, 0.1);
  --archive-date-border: rgba(100, 116, 139, 0.2);
  
  /* 特殊元素颜色 */
  --label-bg: #BF1827;
  --label-color: #ffffff;
  --cover-overlay-start: rgba(68, 68, 68, 0.6);
  --cover-overlay-end: rgba(0, 0, 0, 0.9);
  --mobile-menu-bg: rgba(51, 51, 51, 0.98);
  --navigation-wrapper-bg: rgba(51, 51, 51, 0.98);
  --navigation-wrapper-border: rgba(255, 255, 255, 0.15);
  
  /* cover 颜色变体 */
  --cover-blue: rgba(37, 104, 163, 0.6);
  --cover-blue-end: rgba(18, 51, 80, 0.8);
  --cover-green: rgba(21, 111, 120, 0.6);
  --cover-green-end: rgba(6, 31, 33, 0.8);
  --cover-purple: rgba(73, 50, 82, 0.6);
  --cover-purple-end: rgba(17, 11, 19, 0.8);
  --cover-red: rgba(119, 31, 18, 0.6);
  --cover-red-end: rgba(30, 8, 5, 0.8);
  --cover-orange: rgba(174, 80, 4, 0.6);
  --cover-orange-end: rgba(74, 34, 2, 0.8);
  --cover-slate: rgba(61, 66, 96, 0.6);
  --cover-slate-end: rgba(21, 23, 34, 0.8);
}

[data-theme="dark"] {
  /* 主色调 */
  --primary-color: #ecf0f1;
  --accent-color: #5dade2;
  --accent-hover: #3498db;
  
  /* 背景色 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-hover: #404040;
  
  /* 文字颜色 */
  --text-primary: #ecf0f1;
  --text-secondary: #bdc3c7;
  --text-tertiary: #95a5a6;
  --text-muted: #7f8c8d;
  
  /* 边框和阴影 */
  --border-color: #404040;
  --border-hover: #4a4a4a;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  
  /* 分类颜色（暗色模式下稍微调亮） */
  --category-life: #e57373;
  --category-thought: #ba68c8;
  --category-engineering: #ffb74d;
  --category-code: #64b5f6;
  --category-ai: #4db6ac;
  
  /* 错误颜色（暗色模式） */
  --color-error: #ef4444;
  --color-error-soft: #451a1a;
  
  /* 侧边栏名称（暗色模式） */
  --sidebar-name-bg: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  --sidebar-name-color: var(--text-primary);
  --sidebar-name-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  /* Hero Banner 组件（暗色模式） */
  --hero-banner-bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  
  /* 归档页面特定变量（暗色模式） */
  --archive-title-color: #fbbf24;
  --archive-title-shadow: rgba(251, 191, 36, 0.5);
  --archive-timeline-gradient: linear-gradient(180deg, #fbbf24 0%, #f472b6 50%, #a78bfa 100%);
  --archive-accent-pink: #f472b6;
  --archive-year-header-bg: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  --archive-post-item-bg: #2d2d2d;
  --archive-post-node-border: #1a1a1a;
  /* 归档页面半透明强调色（暗色模式） */
  --archive-accent-orange-10: rgba(251, 191, 36, 0.15);
  --archive-accent-orange-15: rgba(251, 191, 36, 0.2);
  --archive-accent-orange-20: rgba(251, 191, 36, 0.25);
  --archive-accent-orange-30: rgba(251, 191, 36, 0.35);
  --archive-accent-orange-40: rgba(251, 191, 36, 0.45);
  --archive-accent-pink-10: rgba(244, 114, 182, 0.15);
  --archive-accent-pink-20: rgba(244, 114, 182, 0.25);
  --archive-accent-pink-40: rgba(244, 114, 182, 0.45);
  --archive-date-bg: rgba(148, 163, 184, 0.15);
  --archive-date-border: rgba(148, 163, 184, 0.25);
}

.home-container {
    width: 100%;
    min-height: 100vh;
    padding-top: 2.5rem;
}

@media (min-width: 1200px) {
    .home-container {
        margin-left: 280px;
        width: calc(100% - 280px);
        padding-top: 2.5rem;
    }
    
    .site-header {
        margin-left: 280px;
        width: calc(100% - 280px);
    }
}