assets/styles/_variables.css

/* ============================================
   CSS Variables & Theme System
   ============================================ */

/* 主题颜色变量 - Apple Design System */
:root {
  /* 深色主题 (iOS Dark Mode Inspired) */
  --bg-color: #000000;
  /* Pure Black background */
  --sidebar-bg: #1c1c1e;
  /* System Gray 6 */
  --secondary-bg: #2c2c2e;
  /* System Gray 5 */

  /* 卡片背景 - 仪表盘卡片 */
  --card-bg-gradient-1: #1c1c1e;
  --card-bg-gradient-2: #1c1c1e;

  /* 站点卡片 - 提升亮度以区分层级 (Optimize: Use System Gray 5 for cards on black bg) */
  --site-card-bg-gradient-1: #2c2c2e;
  --site-card-bg-gradient-2: #2c2c2e;
  --site-card-hover-bg: #3a3a3c;
  /* System Gray 4 for hover */

  /* 文字颜色 */
  --text-color: #ffffff;
  --text-muted: #8e8e93;
  /* System Gray */
  --text-bright: #ffffff;

  /* 边框与阴影 */
  --border-color: rgba(255, 255, 255, 0.12);
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* 功能色 */
  --highlight-bg: rgba(118, 148, 185, 0.3);
  /* Restore original Highlight */
  --scrollbar-color: rgba(255, 255, 255, 0.2);
  --scrollbar-hover-color: rgba(255, 255, 255, 0.3);

  /* 恢复原有强调色 (Restore Original Accent) */
  --accent-color: #7694b9;
  --accent-hover: #6684a9;
  --accent-rgb: 118, 148, 185;

  --nav-item-color: #98989d;
  --success-color: #30d158;
  --error-color: #ff453a;
  --white-color: #ffffff;

  /* 恢复原有渐变 (Restore Original Gradient) */
  --gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
  --gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);

  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
  --app-height: 100vh;

  /* Spacing System */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  --page-max-width: 1300px;

  /* UI Tuning - Apple Style (Kept) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions - Kept iOS Spring */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --card-bg-rgb: 28, 28, 30;
}

/* 浅色主题 - 恢复原有配色 (Restored Morandi/Warm) */
html.theme-preload,
body.light-theme {
  --bg-color: #e0e0d8;
  --sidebar-bg: #f0f0eb;
  --secondary-bg: #e6e6e1;
  /* Slightly darker than sidebar for hover state */
  --card-bg-gradient-1: #f0f0eb;
  --card-bg-gradient-2: #e9e9e4;
  --site-card-bg-gradient-1: #ffffff;
  --site-card-bg-gradient-2: #f4f5f0;
  --site-card-hover-bg: linear-gradient(145deg, #fafaf8, #eef0eb);

  --text-color: #333333;
  --text-muted: #666666;
  --text-bright: #000000;

  --border-color: rgba(0, 0, 0, 0.08);
  --shadow-color: rgba(0, 0, 0, 0.1);

  --highlight-bg: rgba(118, 148, 185, 0.15);
  --scrollbar-color: rgba(0, 0, 0, 0.1);
  --scrollbar-hover-color: rgba(0, 0, 0, 0.2);

  --accent-color: #7694b9;
  --accent-hover: #6684a9;
  --accent-rgb: 118, 148, 185;

  --nav-item-color: #666666;
  --success-color: #4caf50;
  --error-color: #f44336;
  --white-color: #ffffff;

  /* Restore original gradients */
  --gradient-color: linear-gradient(135deg, #7694b9 0%, #a855f7 50%, #ff6b6b 100%);
  --gradient-color-simple: linear-gradient(135deg, #7694b9 0%, #a855f7 100%);

  --card-bg-rgb: 240, 240, 235;
}

/* 预加载主题 - 在JS完全加载前显示正确的主题 */
html.theme-preload body {
  background-color: #e0e0d8;
  color: #333333;
}

/* 预加载侧边栏状态 - 在JS完全加载前显示正确的侧边栏宽度 */
html.sidebar-collapsed-preload .sidebar {
  width: var(--sidebar-collapsed-width);
}

html.sidebar-collapsed-preload main.content {
  margin-left: var(--sidebar-collapsed-width);
}

/* 控制页面预加载状态 */
html.preload .layout {
  opacity: 0;
}

html.preload * {
  transition: none !important;
}