/* 引入现代化字体 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");

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

/* 导入自定义Sass样式 */
@import "../styles/main.scss";

/* 导入自定义动画 */
@import "./styles/animations.css";

/* 导入Footer专用动画 */
@import "./styles/footer-animations.css";

/* 导入自定义鼠标样式 */
@import "./styles/cursor.css";

/* CSS自定义属性 */
:root {
  /* 颜色系统 */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-900: #1e3a8a;

  --color-secondary-500: #d946ef;
  --color-secondary-600: #c026d3;

  --color-accent-500: #10b981;
  --color-accent-600: #059669;

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-glass: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );

  /* 阴影 */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
  --shadow-colored: 0 8px 32px rgba(59, 130, 246, 0.12);

  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* 边框圆角 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* 暗色模式变量 */
.dark {
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #171717;
  --color-text-primary: #fafafa;
  --color-text-secondary: #a3a3a3;
}

/* 基础样式重置和优化 */
@layer base {
  * {
    @apply border-neutral-200 dark:border-neutral-700;
  }

  html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50;
    @apply font-sans antialiased;
    @apply transition-colors duration-300;
    line-height: 1.6;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  /* 标题样式优化 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-semibold tracking-tight;
    @apply text-neutral-900 dark:text-neutral-50;
    line-height: 1.2;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  h4 {
    @apply text-xl md:text-2xl;
  }

  h5 {
    @apply text-lg md:text-xl;
  }

  h6 {
    @apply text-base md:text-lg;
  }

  /* 段落样式 */
  p {
    @apply text-neutral-600 dark:text-neutral-300;
    @apply leading-relaxed;
  }

  /* 链接样式 */
  a {
    @apply transition-colors duration-200;
    @apply text-primary-600 hover:text-primary-700;
    @apply dark:text-primary-400 dark:hover:text-primary-300;
  }

  /* 代码样式 */
  code {
    @apply font-mono text-sm;
    @apply bg-neutral-100 dark:bg-neutral-800;
    @apply px-1.5 py-0.5 rounded-md;
    @apply text-neutral-800 dark:text-neutral-200;
  }

  pre {
    @apply font-mono text-sm;
    @apply bg-neutral-50 dark:bg-neutral-900;
    @apply p-4 rounded-lg;
    @apply overflow-x-auto;
    @apply border border-neutral-200 dark:border-neutral-700;
  }

  /* 表单元素样式 */
  input,
  textarea,
  select {
    @apply transition-all duration-200;
    @apply border border-neutral-300 dark:border-neutral-600;
    @apply bg-white dark:bg-neutral-800;
    @apply text-neutral-900 dark:text-neutral-100;
    @apply placeholder-neutral-500 dark:placeholder-neutral-400;
    @apply focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
    @apply focus:outline-none;
  }

  /* 按钮基础样式 */
  button {
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500
      focus:ring-offset-2;
    @apply dark:focus:ring-offset-neutral-900;
  }

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

  ::-webkit-scrollbar-track {
    @apply bg-neutral-100 dark:bg-neutral-800;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 dark:bg-neutral-600;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400 dark:bg-neutral-500;
  }

  /* Firefox 滚动条 */
  html {
    scrollbar-width: thin;
    scrollbar-color: #a3a3a3 #f5f5f5;
  }

  .dark html {
    scrollbar-color: #525252 #262626;
  }

  /* 选择文本样式 */
  ::selection {
    @apply bg-primary-100 text-primary-900;
  }

  .dark ::selection {
    @apply bg-primary-900 text-primary-100;
  }
}

/* 组件样式 */
@layer components {
  /* 玻璃拟态效果 */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-glass);
  }

  .glass-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 渐变文本 */
  .text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: textGradient 4s ease infinite;
  }

  .text-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* 按钮样式 */
  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600;
    @apply text-white font-medium;
    @apply px-6 py-3 rounded-xl;
    @apply shadow-lg shadow-primary-500/25;
    @apply hover:shadow-xl hover:shadow-primary-500/30;
    @apply hover:scale-105 active:scale-95;
    @apply transition-all duration-200;
  }

  .btn-secondary {
    @apply bg-gradient-to-r from-secondary-500 to-secondary-600;
    @apply text-white font-medium;
    @apply px-6 py-3 rounded-xl;
    @apply shadow-lg shadow-secondary-500/25;
    @apply hover:shadow-xl hover:shadow-secondary-500/30;
    @apply hover:scale-105 active:scale-95;
    @apply transition-all duration-200;
  }

  .btn-ghost {
    @apply bg-transparent border border-neutral-300 dark:border-neutral-600;
    @apply text-neutral-700 dark:text-neutral-300;
    @apply hover:bg-neutral-50 dark:hover:bg-neutral-800;
    @apply px-6 py-3 rounded-xl;
    @apply transition-all duration-200;
  }

  /* 卡片样式 */
  .card {
    @apply bg-white dark:bg-neutral-800;
    @apply border border-neutral-200 dark:border-neutral-700;
    @apply rounded-2xl p-6;
    @apply shadow-sm hover:shadow-md;
    @apply transition-all duration-300;
  }

  .card-glass {
    @apply glass;
    @apply rounded-2xl p-6;
    @apply hover:shadow-xl;
    @apply transition-all duration-300;
  }

  /* 输入框样式 */
  .input {
    @apply w-full px-4 py-3;
    @apply border border-neutral-300 dark:border-neutral-600;
    @apply bg-white dark:bg-neutral-800;
    @apply rounded-xl;
    @apply text-neutral-900 dark:text-neutral-100;
    @apply placeholder-neutral-500 dark:placeholder-neutral-400;
    @apply focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
    @apply transition-all duration-200;
  }

  /* 导航样式 */
  .nav-link {
    @apply px-4 py-2 rounded-lg;
    @apply text-neutral-600 dark:text-neutral-300;
    @apply hover:text-neutral-900 dark:hover:text-neutral-100;
    @apply hover:bg-neutral-100 dark:hover:bg-neutral-800;
    @apply transition-all duration-200;
  }

  .nav-link-active {
    @apply bg-primary-50 dark:bg-primary-900/20;
    @apply text-primary-600 dark:text-primary-400;
    @apply font-medium;
  }
}

/* 工具类 */
@layer utilities {
  /* 动画延迟 */
  .animate-delay-100 {
    animation-delay: 100ms;
  }

  .animate-delay-200 {
    animation-delay: 200ms;
  }

  .animate-delay-300 {
    animation-delay: 300ms;
  }

  .animate-delay-500 {
    animation-delay: 500ms;
  }

  /* 文本平衡 */
  .text-balance {
    text-wrap: balance;
  }

  /* 隐藏滚动条但保持滚动功能 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* 响应式容器 */
  .container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* 网格自适应 */
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }

  /* 弹性布局 */
  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }

  /* 文本截断 */
  .text-truncate {
    @apply truncate;
  }

  .text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
