src/styles/main.css
@import "tailwindcss";

/* 导入主题文件 */
@import "./themes/base.css";
@import "./themes/light.css";
@import "./themes/dark.css";
@import "./themes/cyberpunk.css";
@import "./themes/green.css";  /* 绿色主题 */

/* 导入组件样式文件 */
@import "./components/forms.css";
@import "./components/login.css";  /* 登录页面样式 */

@layer theme {
  /* 主要颜色 - Primary (蓝色系) - 使用 OKLCH 色彩空间 */
  :root {
    --color-primary-50: oklch(97.6% 0.017 241.6);
    --color-primary-100: oklch(94.5% 0.033 241.9);
    --color-primary-200: oklch(91.4% 0.058 242.1);
    --color-primary-300: oklch(85.9% 0.099 242.4);
    --color-primary-400: oklch(76.9% 0.16 245.7);
    --color-primary-500: oklch(67.4% 0.196 250.3);
    --color-primary-600: oklch(58.5% 0.22 254.6);
    --color-primary-700: oklch(52.4% 0.23 259.3);
    --color-primary-800: oklch(44.5% 0.211 262.3);
    --color-primary-900: oklch(36.7% 0.198 262.7);
    --color-primary-950: oklch(24.7% 0.164 264.4);
    
    /* 次要颜色 - Secondary (紫色系) - 使用 OKLCH 色彩空间 */
    --color-secondary-50: oklch(97.3% 0.021 292.2);
    --color-secondary-100: oklch(94.8% 0.039 292.5);
    --color-secondary-200: oklch(90.3% 0.075 290.8);
    --color-secondary-300: oklch(84.8% 0.121 288.7);
    --color-secondary-400: oklch(76.3% 0.172 287.0);
    --color-secondary-500: oklch(67.3% 0.203 285.9);
    --color-secondary-600: oklch(60.1% 0.226 285.5);
    --color-secondary-700: oklch(53.4% 0.231 285.1);
    --color-secondary-800: oklch(44.7% 0.211 285.4);
    --color-secondary-900: oklch(36.0% 0.185 284.4);
    --color-secondary-950: oklch(26.6% 0.162 283.1);
    
    /* 成功颜色 - Green - 使用 OKLCH 色彩空间 */
    --color-green-50: oklch(97.9% 0.018 154.3);
    --color-green-100: oklch(95.7% 0.037 155.0);
    --color-green-200: oklch(92.2% 0.069 155.8);
    --color-green-300: oklch(86.6% 0.117 157.2);
    --color-green-400: oklch(78.7% 0.173 158.6);
    --color-green-500: oklch(70.3% 0.195 158.0);
    --color-green-600: oklch(63.2% 0.186 158.9);
    --color-green-700: oklch(51.5% 0.162 157.7);
    --color-green-800: oklch(42.4% 0.134 157.3);
    --color-green-900: oklch(34.7% 0.109 155.0);
    --color-green-950: oklch(22.2% 0.108 151.2);
    
    /* 危险颜色 - Red - 使用 OKLCH 色彩空间 */
    --color-red-50: oklch(97.5% 0.01 16.5);
    --color-red-100: oklch(95.8% 0.02 18.8);
    --color-red-200: oklch(93.2% 0.043 17.7);
    --color-red-300: oklch(89.8% 0.077 19.6);
    --color-red-400: oklch(83.2% 0.149 19.8);
    --color-red-500: oklch(67.3% 0.236 19.1);
    --color-red-600: oklch(59.4% 0.224 15.2);
    --color-red-700: oklch(51.6% 0.199 11.4);
    --color-red-800: oklch(45.2% 0.167 12.1);
    --color-red-900: oklch(40.0% 0.148 13.9);
    --color-red-950: oklch(29.0% 0.12 14.5);
    
    /* 警告颜色 - Yellow - 使用 OKLCH 色彩空间 */
    --color-yellow-50: oklch(97.8% 0.025 102.6);
    --color-yellow-100: oklch(95.9% 0.051 102.3);
    --color-yellow-200: oklch(92.9% 0.093 102.4);
    --color-yellow-300: oklch(89.4% 0.147 100.9);
    --color-yellow-400: oklch(86.2% 0.186 99.6);
    --color-yellow-500: oklch(82.3% 0.199 94.5);
    --color-yellow-600: oklch(74.6% 0.191 84.6);
    --color-yellow-700: oklch(66.7% 0.182 73.2);
    --color-yellow-800: oklch(59.2% 0.156 68.5);
    --color-yellow-900: oklch(54.3% 0.133 65.9);
    --color-yellow-950: oklch(43.9% 0.139 63.9);
    
    /* 信息颜色 - Blue - 使用 OKLCH 色彩空间 */
    --color-blue-50: oklch(97.3% 0.018 245.2);
    --color-blue-100: oklch(94.0% 0.039 242.8);
    --color-blue-200: oklch(89.8% 0.068 240.9);
    --color-blue-300: oklch(83.3% 0.112 240.2);
    --color-blue-400: oklch(74.0% 0.163 239.8);
    --color-blue-500: oklch(64.8% 0.193 242.2);
    --color-blue-600: oklch(57.4% 0.206 246.0);
    --color-blue-700: oklch(51.7% 0.199 254.3);
    --color-blue-800: oklch(44.9% 0.178 262.4);
    --color-blue-900: oklch(39.9% 0.154 266.0);
    --color-blue-950: oklch(32.7% 0.157 266.6);
    
    /* 灰色 - Gray - 使用 OKLCH 色彩空间 */
    --color-gray-50: oklch(97.6% 0.006 247.0);
    --color-gray-100: oklch(94.7% 0.006 245.6);
    --color-gray-200: oklch(90.4% 0.006 244.6);
    --color-gray-300: oklch(83.8% 0.006 244.7);
    --color-gray-400: oklch(72.7% 0.006 245.2);
    --color-gray-500: oklch(62.9% 0.007 247.2);
    --color-gray-600: oklch(50.6% 0.023 255.5);
    --color-gray-700: oklch(42.8% 0.023 254.7);
    --color-gray-800: oklch(35.0% 0.016 254.1);
    --color-gray-900: oklch(27.5% 0.015 251.5);
    --color-gray-950: oklch(19.2% 0.011 252.9);
    
    /* 基础间距变量 */
    --spacing: 0.25rem;
    
    /* 主题过渡变量 */
    --theme-transition-duration: 0.3s;
    --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-properties: background-color, color, border-color, box-shadow, transform, opacity;
  }
}

/* 基础动画效果 */
@keyframes neon-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px 0px currentColor; }
  50% { box-shadow: 0 0 15px 2px currentColor; }
  100% { box-shadow: 0 0 5px 0px currentColor; }
}

/* 波浪效果动画 */
@keyframes wave-animation {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* 淡入淡出动画 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 颜色脉冲动画 */
@keyframes color-pulse {
  0% { filter: saturate(1); }
  50% { filter: saturate(1.5); }
  100% { filter: saturate(1); }
}

/* 主题切换动画 */
@keyframes theme-morph {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg); }
  100% { filter: hue-rotate(0deg); }
}

/* 流动边框动画 */
@keyframes flow-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* 全局主题过渡效果 */
body {
  transition-property: var(--theme-transition-properties);
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-timing);
}

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

::-webkit-scrollbar-track {
  background: color-mix(in oklab, black 5%, transparent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, rgb(120, 120, 120) 50%, transparent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, rgb(100, 100, 100) 70%, transparent);
}

/* 导入组件样式文件 */
@import "./components/forms.css";

/* 波浪效果应用 */
.wave-anim-item {
  animation: wave-animation 3s ease infinite;
}

.wave-anim-delay-1 {
  animation-delay: 0.1s;
}

.wave-anim-delay-2 {
  animation-delay: 0.2s;
}

.wave-anim-delay-3 {
  animation-delay: 0.3s;
}

.wave-anim-delay-4 {
  animation-delay: 0.4s;
}

.wave-anim-delay-5 {
  animation-delay: 0.5s;
}

/* 玻璃拟态效果 */
.glass-morphism {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, white 8%, transparent);
}

/* 根据主题设置不同的背景色 */
html[data-theme="light"] .glass-morphism {
  background: color-mix(in oklab, white 75%, transparent);
  border: 1px solid color-mix(in oklab, black 10%, transparent);
}

html[data-theme="dark"] .glass-morphism {
  background: color-mix(in oklab, oklch(19.2% 0.042 255.3) 60%, transparent);
  border: 1px solid color-mix(in oklab, white 8%, transparent);
}

html[data-theme="cyberpunk"] .glass-morphism {
  background: color-mix(in oklab, oklch(8% 0.04 280) 70%, transparent);
  border: 1px solid color-mix(in oklab, oklch(100% 0.9 320) 20%, transparent);
  box-shadow: 0 0 10px color-mix(in oklab, oklch(100% 0.9 320) 20%, transparent);
}

html[data-theme="green"] .glass-morphism {
  background: color-mix(in oklab, oklch(90% 0.08 150) 70%, transparent);
  border: 1px solid color-mix(in oklab, oklch(50% 0.2 150) 20%, transparent);
}

.glass-morphism-light {
  background: color-mix(in oklab, white 10%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, white 5%, transparent);
}

/* 霓虹边框效果 */
.neon-border {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.neon-border::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, 
    var(--color-neon-blue), 
    purple, 
    cyan, 
    var(--color-neon-pink));
  background-size: 400% 400%;
  animation: neon-glow 8s ease infinite;
}

/* 主题变化强调动画 */
.theme-emphasis {
  animation: theme-morph 1s ease;
}

/* 流动边框 */
.flow-border {
  position: relative;
  overflow: hidden;
}

.flow-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  background: linear-gradient(90deg, 
    var(--color-accent), 
    var(--color-accent-light), 
    var(--color-accent), 
    var(--color-accent-light)) border-box;
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: flow-border 3s linear infinite;
}

/* 发光文本效果 */
.glow-text {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* 交互元素悬停效果 */
.interactive-element {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.interactive-element:hover {
  transform: translateY(-2px);
}

/* 动画元素 */
.animate-wave {
  animation: wave-animation 2s ease-in-out infinite;
}

.animate-color-pulse {
  animation: color-pulse 3s ease-in-out infinite;
}

@layer utilities {
  /* 实用颜色工具类 - 主要颜色 */
  .bg-primary-50 { background-color: var(--color-primary-50); }
  .bg-primary-100 { background-color: var(--color-primary-100); }
  .bg-primary-200 { background-color: var(--color-primary-200); }
  .bg-primary-300 { background-color: var(--color-primary-300); }
  .bg-primary-400 { background-color: var(--color-primary-400); }
  .bg-primary-500 { background-color: var(--color-primary-500); }
  .bg-primary-600 { background-color: var(--color-primary-600); }
  .bg-primary-700 { background-color: var(--color-primary-700); }
  .bg-primary-800 { background-color: var(--color-primary-800); }
  .bg-primary-900 { background-color: var(--color-primary-900); }
  .bg-primary-950 { background-color: var(--color-primary-950); }
  
  /* 实用颜色工具类 - 次要颜色 */
  .bg-secondary-50 { background-color: var(--color-secondary-50); }
  .bg-secondary-100 { background-color: var(--color-secondary-100); }
  .bg-secondary-200 { background-color: var(--color-secondary-200); }
  .bg-secondary-300 { background-color: var(--color-secondary-300); }
  .bg-secondary-400 { background-color: var(--color-secondary-400); }
  .bg-secondary-500 { background-color: var(--color-secondary-500); }
  .bg-secondary-600 { background-color: var(--color-secondary-600); }
  .bg-secondary-700 { background-color: var(--color-secondary-700); }
  .bg-secondary-800 { background-color: var(--color-secondary-800); }
  .bg-secondary-900 { background-color: var(--color-secondary-900); }
  .bg-secondary-950 { background-color: var(--color-secondary-950); }
  
  /* 实用颜色工具类 - 绿色 */
  .bg-green-50 { background-color: var(--color-green-50); }
  .bg-green-100 { background-color: var(--color-green-100); }
  .bg-green-200 { background-color: var(--color-green-200); }
  .bg-green-300 { background-color: var(--color-green-300); }
  .bg-green-400 { background-color: var(--color-green-400); }
  .bg-green-500 { background-color: var(--color-green-500); }
  .bg-green-600 { background-color: var(--color-green-600); }
  .bg-green-700 { background-color: var(--color-green-700); }
  .bg-green-800 { background-color: var(--color-green-800); }
  .bg-green-900 { background-color: var(--color-green-900); }
  .bg-green-950 { background-color: var(--color-green-950); }
  
  /* 实用颜色工具类 - 红色 */
  .bg-red-50 { background-color: var(--color-red-50); }
  .bg-red-100 { background-color: var(--color-red-100); }
  .bg-red-200 { background-color: var(--color-red-200); }
  .bg-red-300 { background-color: var(--color-red-300); }
  .bg-red-400 { background-color: var(--color-red-400); }
  .bg-red-500 { background-color: var(--color-red-500); }
  .bg-red-600 { background-color: var(--color-red-600); }
  .bg-red-700 { background-color: var(--color-red-700); }
  .bg-red-800 { background-color: var(--color-red-800); }
  .bg-red-900 { background-color: var(--color-red-900); }
  .bg-red-950 { background-color: var(--color-red-950); }
  
  /* 实用颜色工具类 - 黄色 */
  .bg-yellow-50 { background-color: var(--color-yellow-50); }
  .bg-yellow-100 { background-color: var(--color-yellow-100); }
  .bg-yellow-200 { background-color: var(--color-yellow-200); }
  .bg-yellow-300 { background-color: var(--color-yellow-300); }
  .bg-yellow-400 { background-color: var(--color-yellow-400); }
  .bg-yellow-500 { background-color: var(--color-yellow-500); }
  .bg-yellow-600 { background-color: var(--color-yellow-600); }
  .bg-yellow-700 { background-color: var(--color-yellow-700); }
  .bg-yellow-800 { background-color: var(--color-yellow-800); }
  .bg-yellow-900 { background-color: var(--color-yellow-900); }
  .bg-yellow-950 { background-color: var(--color-yellow-950); }
  
  /* 实用颜色工具类 - 蓝色 */
  .bg-blue-50 { background-color: var(--color-blue-50); }
  .bg-blue-100 { background-color: var(--color-blue-100); }
  .bg-blue-200 { background-color: var(--color-blue-200); }
  .bg-blue-300 { background-color: var(--color-blue-300); }
  .bg-blue-400 { background-color: var(--color-blue-400); }
  .bg-blue-500 { background-color: var(--color-blue-500); }
  .bg-blue-600 { background-color: var(--color-blue-600); }
  .bg-blue-700 { background-color: var(--color-blue-700); }
  .bg-blue-800 { background-color: var(--color-blue-800); }
  .bg-blue-900 { background-color: var(--color-blue-900); }
  .bg-blue-950 { background-color: var(--color-blue-950); }
  
  /* 实用颜色工具类 - 灰色 */
  .bg-gray-50 { background-color: var(--color-gray-50); }
  .bg-gray-100 { background-color: var(--color-gray-100); }
  .bg-gray-200 { background-color: var(--color-gray-200); }
  .bg-gray-300 { background-color: var(--color-gray-300); }
  .bg-gray-400 { background-color: var(--color-gray-400); }
  .bg-gray-500 { background-color: var(--color-gray-500); }
  .bg-gray-600 { background-color: var(--color-gray-600); }
  .bg-gray-700 { background-color: var(--color-gray-700); }
  .bg-gray-800 { background-color: var(--color-gray-800); }
  .bg-gray-900 { background-color: var(--color-gray-900); }
  .bg-gray-950 { background-color: var(--color-gray-950); }
  
  /* 文本颜色工具类 */
  .text-white { color: white; }
  .text-gray-700 { color: var(--color-gray-700); }
  
  /* 聚焦环样式 */
  .focus\:ring-primary-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary-500) 25%, transparent); }
  .focus\:ring-secondary-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-secondary-500) 25%, transparent); }
  .focus\:ring-green-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-green-500) 25%, transparent); }
  .focus\:ring-red-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-red-500) 25%, transparent); }
  .focus\:ring-yellow-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-yellow-500) 25%, transparent); }
  .focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-blue-500) 25%, transparent); }
  
  /* 悬停背景颜色 */
  .hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
  .hover\:bg-secondary-700:hover { background-color: var(--color-secondary-700); }
  .hover\:bg-green-700:hover { background-color: var(--color-green-700); }
  .hover\:bg-red-700:hover { background-color: var(--color-red-700); }
  .hover\:bg-yellow-700:hover { background-color: var(--color-yellow-700); }
  .hover\:bg-blue-700:hover { background-color: var(--color-blue-700); }
  .hover\:bg-gray-50:hover { background-color: var(--color-gray-50); }
  
  /* 边框样式 */
  .border { border-width: 1px; }
  .border-gray-300 { border-color: var(--color-gray-300); }
  
  /* 环偏移 */
  .focus\:ring-offset-2:focus { box-shadow: 0 0 0 2px white; }
}

/* 标题渐变样式 - 移除不需要的渐变样式 */
.gradient-text {
  color: var(--color-primary-600);
  font-weight: 600;
  text-shadow: none;
}

/* 不同主题下的标题颜色 */
html[data-theme="light"] .gradient-text {
  color: var(--color-primary-700);
}

html[data-theme="dark"] .gradient-text {
  color: var(--color-primary-400);
}

html[data-theme="cyberpunk"] .gradient-text {
  color: #ff2cf0;
  text-shadow: 0 0 10px #ff2cf0, 0 0 20px #00eeff;
}

html[data-theme="green"] .gradient-text {
  color: var(--color-green-600);
}

/* 确保滚动条正确显示 */
.overflow-auto {
  overflow: auto !important;
}

/* 确保flex布局中的内容能够正确计算高度 */
.flex-1 {
  flex: 1 1 0% !important;
  min-height: 0;
}

/* 确保页面组件能够正确适应父容器高度 */
.router-view-container {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 页面组件默认样式 */
.page-component {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
} 