@tailwind base;
@tailwind components;
@tailwind utilities;

/* FontAwesome 图标预加载优化 */
.fontawesome-i2svg-active body .icon-container .icon {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.fontawesome-i2svg-pending body .icon-container .icon {
  opacity: 0;
}

:root {
  /* 主题色 */
  --color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
  --color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
  --color-primary-light: 129, 140, 248; /* #818CF8 - 亮紫色 */
  
  /* 背景色系 */
  --color-bg-main: 18, 24, 39; /* #121827 - 深炭黑 */
  --color-bg-card: 30, 41, 59; /* #1E293B - 暗灰蓝 */
  --color-bg-secondary: 45, 55, 72; /* #2D3748 - 深靛蓝 */
  
  /* 文字颜色 */
  --color-text-primary: 241, 245, 249; /* #F1F5F9 - 银月白 */
  --color-text-secondary: 203, 213, 225; /* #CBD5E1 - 淡灰蓝 */
  --color-text-tertiary: 148, 163, 184; /* #94A3B8 - 冷钢灰 */
  
  /* 点缀色 */
  --color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
  --color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
  --color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
  
  /* 块级元素背景色 */
  --color-block: 38, 53, 72; /* #263548 - 深灰蓝色块 */
  --color-block-strong: 45, 55, 72; /* #2D3748 - 更深的块色 */
  --color-block-hover: 61, 74, 92; /* #3D4A5C - 悬停态块色 */
  
  /* 边框和阴影 */
  --color-border: rgba(99, 102, 241, 0.15);
  --color-shadow: rgba(0, 0, 0, 0.25);
  --purple-glow: rgba(99, 102, 241, 0.15);
}

/* 浅色主题变量 */
[data-theme='light'] {
  /* 主题色保持不变，以保持品牌一致性 */
  --color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
  --color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
  --color-primary-light: 124, 58, 237; /* #7C3AED - 更深的紫色，提高对比度 */
  
  /* 背景色系 */
  --color-bg-main: 249, 250, 251; /* #F9FAFB - 浅灰背景 */
  --color-bg-card: 255, 255, 255; /* #FFFFFF - 纯白卡片 */
  --color-bg-secondary: 243, 244, 246; /* #F3F4F6 - 次级灰背景 */
  
  /* 文字颜色 */
  --color-text-primary: 17, 24, 39; /* #111827 - 近黑色 */
  --color-text-secondary: 55, 65, 81; /* #374151 - 深灰色 */
  --color-text-tertiary: 107, 114, 128; /* #6B7280 - 中灰色 */
  
  /* 点缀色保持不变 */
  --color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
  --color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
  --color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
  
  /* 块级元素背景色 */
  --color-block: 241, 245, 249; /* #F1F5F9 - 浅灰色块 */
  --color-block-strong: 226, 232, 240; /* #E2E8F0 - 更强调的块色 */
  --color-block-hover: 203, 213, 225; /* #CBD5E1 - 悬停态块色 */
  
  /* 边框和阴影 */
  --color-border: rgba(99, 102, 241, 0.2);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --purple-glow: rgba(99, 102, 241, 0.2);
}

/* 全局样式 */
body {
  color: rgb(var(--color-text-primary));
  background: rgb(var(--color-bg-main));
  min-height: 100vh;
  transition: color 0.3s ease, background-color 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

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

::-webkit-scrollbar-track {
  background: rgba(var(--color-bg-secondary), 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary), 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-hover), 0.6);
}

/* Firefox滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-primary), 0.4) rgba(var(--color-bg-secondary), 0.3);
}

/* 主题通用样式类 */
@layer utilities {
  /* 文本颜色类 */
  .text-primary {
    color: rgb(var(--color-text-primary));
  }

  .text-secondary {
    color: rgb(var(--color-text-secondary));
  }

  .text-tertiary {
    color: rgb(var(--color-text-tertiary));
  }

  .text-purple {
    color: rgb(var(--color-primary-light));
  }

  .text-error {
    color: rgb(var(--color-error));
  }

  .text-success {
    color: rgb(var(--color-success));
  }

  .text-warning {
    color: rgb(var(--color-warning));
  }

  /* 背景色类 */
  .bg-main {
    background-color: rgb(var(--color-bg-main));
  }

  .bg-card {
    background-color: rgb(var(--color-bg-card));
  }

  .bg-secondary {
    background-color: rgb(var(--color-bg-secondary));
  }

  .bg-block {
    background-color: rgb(var(--color-block));
  }

  .bg-block-strong {
    background-color: rgb(var(--color-block-strong));
  }

  .bg-block-hover {
    background-color: rgb(var(--color-block-hover));
  }

  .bg-purple-glow {
    background-color: var(--purple-glow);
  }
}

/* 通用组件样式 */
@layer components {
  /* 卡片基础样式 */
  .card {
    @apply rounded-lg border shadow-lg transition-all duration-300;
    background-color: rgb(var(--color-bg-card));
    border-color: rgba(var(--color-primary), 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 卡片悬停效果 */
  .card:hover {
    border-color: rgba(var(--color-primary), 0.3);
    background-color: color-mix(in srgb, rgb(var(--color-bg-card)) 95%, rgb(var(--color-primary)) 5%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
  
  /* 主按钮样式 */
  .btn-primary {
    @apply bg-gradient-to-r text-white rounded-md px-4 py-2 font-medium transition-all duration-200;
    background-image: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-primary-hover)));
  }
  
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary), 0.3);
  }
  
  /* 次按钮样式 */
  .btn-secondary {
    @apply rounded-md px-4 py-2 font-medium transition-all duration-200 border;
    background-color: rgb(var(--color-bg-secondary));
    color: rgb(var(--color-primary-light));
    border-color: rgb(var(--color-primary));
  }
  
  .btn-secondary:hover {
    background-color: rgba(var(--color-primary), 0.1);
    border-color: rgb(var(--color-primary-hover));
  }
  
  /* 输入框样式 */
  .input-field {
    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
    background-color: rgb(var(--color-bg-card));
    border-color: rgba(var(--color-primary), 0.2);
    color: rgb(var(--color-text-primary));
  }
  
  .input-field:focus {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
  }
  
  /* 文本区域样式 */
  .textarea-field {
    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2 resize-none;
    background-color: rgb(var(--color-bg-card));
    border-color: rgba(var(--color-primary), 0.2);
    color: rgb(var(--color-text-primary));
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  }
  
  .textarea-field:focus {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
  }

  /* 选择框样式 */
  .select-field {
    @apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
    background-color: rgb(var(--color-bg-card));
    border-color: rgba(var(--color-primary), 0.2);
    color: rgb(var(--color-text-primary));
  }

  .select-field:focus {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
  }

  /* 小按钮样式 */
  .btn-sm {
    @apply px-2 py-1 text-sm rounded transition-all duration-200;
  }

  /* 复选框样式 */
  .form-checkbox {
    @apply w-4 h-4 rounded border-2 transition-all duration-200;
    border-color: rgba(var(--color-primary), 0.3);
    background-color: rgb(var(--color-bg-card));
  }

  .form-checkbox:checked {
    background-color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
  }

  /* 边框颜色类 */
  .border-border {
    border-color: rgba(var(--color-primary), 0.2);
  }

  .border-primary {
    border-color: rgb(var(--color-primary));
  }

  .border-error {
    border-color: rgb(var(--color-error));
  }

  .border-success {
    border-color: rgb(var(--color-success));
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}