/**
 * 漫画网站设计系统 - CSS 变量定义
 * 支持明暗主题切换
 */

:root {
  /* ========== 主色调 ========== */
  --primary: #e91e63;
  --primary-light: #ff6090;
  --primary-dark: #b0003a;
  --primary-rgb: 233, 30, 99;
  --primary-gradient: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
  
  /* ========== 辅助色 ========== */
  --secondary: #9c27b0;
  --accent: #00bcd4;
  --accent-gold: #ffd700;
  
  /* ========== 状态色 ========== */
  --success: #4caf50;
  --success-light: #81c784;
  --warning: #ff9800;
  --warning-light: #ffb74d;
  --danger: #f44336;
  --danger-light: #e57373;
  --info: #2196f3;
  --info-light: #64b5f6;

  /* ========== 字体 ========== */
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'ZCOOL KuaiLe', var(--font-sans);
  --font-mono: 'Fira Code', 'Source Code Pro', monospace;
  
  /* ========== 字体大小 ========== */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;

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

  /* ========== 间距 ========== */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* ========== 圆角 ========== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ========== 阴影 ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ========== 过渡动画 ========== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== Z-index 层级 ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ========== 容器宽度 ========== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ========== 漫画卡片比例 ========== */
  --card-ratio: 4 / 3;
  --cover-ratio: 3 / 4;

  /* ========== 导航栏高度 ========== */
  --header-height: 60px;
  --header-height-mobile: 50px;

  /* ========== 侧边栏宽度 ========== */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
}

/* ========== 响应式断点媒体查询 ========== */
/* 
  sm: 640px
  md: 768px
  lg: 1024px
  xl: 1200px
  2xl: 1400px
*/