/* 非关键CSS延迟加载 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 导入组件样式 */
@import './critical.css';
@import './animations.css';
@import './components.css';

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.75rem;
    
    /* 新增渐变色彩变量 */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 262.1 83.3% 57.8%;
    
    /* 暗色模式渐变 - 更暗的色调 */
    --gradient-primary: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
    --gradient-secondary: linear-gradient(135deg, #d946ef 0%, #e11d48 100%);
    --gradient-success: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    --gradient-warning: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-dark: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .dark body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    color: hsl(var(--foreground));
  }
}

@layer components {
  /* 浅色主题优化 */
  .light-theme {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  }
  
  /* 响应式设计优化 */
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  @media (min-width: 640px) {
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  
  @media (min-width: 1024px) {
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
  
  /* 基础按钮样式 */
  .btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }
  
  .btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
  }
  
  .btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }
  
  .btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
  }
  
  /* 基础卡片样式 */
  .card {
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }
  
  /* 选择器样式 */
  .select-trigger {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .select-trigger:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.1);
  }
  
  .select-trigger:focus {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
  }
  
  .select-content {
    animation: select-in 0.15s ease-out;
  }
  
  .select-item {
    transition: all 0.15s ease-out;
  }
  
  .select-item:hover {
    background-color: hsl(var(--accent) / 0.5);
  }
  
  .select-item[data-highlighted] {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  /* 响应式底部间距 */
  .mobile-bottom-spacing {
    padding-bottom: 5rem; /* 为移动端底部导航留出空间 */
  }
  
  @media (min-width: 1024px) {
    .mobile-bottom-spacing {
      padding-bottom: 0; /* 桌面端不需要额外间距 */
    }
  }
}

@layer utilities {
  /* 优化文本渲染 */
  .text-balance {
    text-wrap: balance;
  }
  
  /* 优化滚动条 */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: hsl(var(--muted));
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground));
    border-radius: 3px;
  }
  
  /* 优化焦点样式 */
  .focus-visible:focus-visible {
    outline: none;
    ring: 2px solid hsl(var(--ring));
    ring-offset: 2px;
  }
}