/* ===== CSS 变量定义 ===== */
:root {
  /* 主色调 - 现代蓝紫渐变 */
  --primary-blue: #4f46e5;
  --primary-light: #6366f1;
  --primary-dark: #3730a3;
  
  /* 次要色调 */
  --secondary-purple: #7c3aed;
  --secondary-light: #8b5cf6;
  --secondary-dark: #5b21b6;
  
  /* 强调色 */
  --accent-blue: #06b6d4;
  --accent-cyan: #0891b2;
  --accent-teal: #0d9488;
  
  /* 状态色 */
  --success-green: #10b981;
  --warning-yellow: #f59e0b;
  --danger-red: #ef4444;
  
  /* 中性色 */
  --white: #ffffff;
  --light-gray: #f8fafc;
  --medium-gray: #e2e8f0;
  --dark-gray: #64748b;
  --darker-gray: #334155;
  --black: #0f172a;

  /* 背景色 */
  --bg-primary: var(--white);
  --bg-secondary: var(--light-gray);
  --bg-tertiary: var(--medium-gray);
  
  /* 文本色 */
  --text-primary: var(--black);
  --text-secondary: var(--dark-gray);
  --text-tertiary: var(--darker-gray);
  
  /* 边框色 */
  --border-color: var(--medium-gray);
  --border-hover: var(--dark-gray);
}

/* 暗黑模式 */
[data-theme="dark"] {
  /* 主色调保持不变，但调整亮度 */
  --primary-blue: #6366f1;
  --primary-light: #8b5cf6;
  --primary-dark: #4f46e5;
  
  /* 次要色调 */
  --secondary-purple: #8b5cf6;
  --secondary-light: #a78bfa;
  --secondary-dark: #7c3aed;
  
  /* 强调色 */
  --accent-blue: #22d3ee;
  --accent-cyan: #06b6d4;
  --accent-teal: #14b8a6;
  
  /* 中性色 - 暗黑主题 */
  --white: #ffffff;
  --light-gray: #1e293b;
  --medium-gray: #334155;
  --dark-gray: #cbd5e1;
  --darker-gray: #e2e8f0;
  --black: #0f172a;
  
  /* 背景色 - 暗黑主题 */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  
  /* 文本色 - 暗黑主题 */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  
  /* 边框色 - 暗黑主题 */
  --border-color: #334155;
  --border-hover: #475569;
}

:root {
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-purple) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-teal) 100%);
    --gradient-accent: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-cyan) 100%);
    --gradient-warm: linear-gradient(135deg, var(--warning-yellow) 0%, var(--danger-red) 100%);
    
    /* 背景渐变 */
    --bg-gradient: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    
    /* 边框和阴影 */
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --box-shadow: 0 10px 25px rgba(79, 70, 229, 0.15);
    --box-shadow-hover: 0 20px 40px rgba(79, 70, 229, 0.25);
    
    /* 动画 */
    --transition-speed: 0.3s;
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* 暗黑模式下的背景动画 */
body[data-theme="dark"] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    background-size: 400% 400%;
    animation: darkGradientShift 20s ease infinite;
}

@keyframes darkGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 正常模式下的背景动画 */
body:not([data-theme="dark"]) {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    background-size: 400% 400%;
    animation: lightGradientShift 20s ease infinite;
}

@keyframes lightGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 选择文本样式 */
::selection {
    background: var(--primary-blue);
    color: var(--white);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}