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

@layer base {
  /* 基础样式重置 */
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-900 bg-white;
    line-height: 1.6;
  }
  
  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
  
  /* 焦点样式 */
  *:focus {
    outline: none;
  }
  
  /* 选择文本颜色 */
  ::selection {
    @apply bg-primary text-white;
  }
  
  ::-moz-selection {
    @apply bg-primary text-white;
  }
}

@layer components {
  /* 容器样式 */
  .container {
    @apply mx-auto px-4;
    max-width: 1200px;
  }
  
  @screen sm {
    .container {
      @apply px-6;
    }
  }
  
  @screen lg {
    .container {
      @apply px-8;
    }
  }
  
  /* 标题样式 */
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
  }
  
  .section-subtitle {
    @apply text-lg text-gray-600 mb-8;
  }
  
  /* 按钮变体 */
  .btn-ghost {
    @apply bg-transparent text-gray-700 border border-gray-300 hover:bg-gray-50 hover:border-gray-400;
  }
  
  .btn-outline {
    @apply bg-transparent text-primary border-2 border-primary hover:bg-primary hover:text-white;
  }
  
  .btn-gradient {
    @apply bg-gradient-to-r from-primary to-secondary text-white hover:from-primary-700 hover:to-secondary-700;
  }
  
  /* 卡片变体 */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }
  
  .card-bordered {
    @apply border border-gray-200 hover:border-primary-200;
  }
  
  /* 表单样式 */
  .form-group {
    @apply mb-6;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-input {
    @apply input-field;
  }
  
  .form-textarea {
    @apply input-field resize-vertical min-h-[120px];
  }
  
  .form-select {
    @apply input-field appearance-none bg-no-repeat bg-right bg-[length:20px] pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
  
  .form-checkbox {
    @apply h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary focus:ring-2;
  }
  
  .form-radio {
    @apply h-4 w-4 text-primary border-gray-300 focus:ring-primary focus:ring-2;
  }
  
  /* 导航样式 */
  .nav-link {
    @apply text-gray-700 hover:text-primary font-medium transition-colors duration-200;
  }
  
  .nav-link.active {
    @apply text-primary;
  }
  
  /* 分页样式 */
  .pagination-link {
    @apply px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 hover:bg-gray-50 hover:text-gray-700;
  }
  
  .pagination-link.active {
    @apply bg-primary text-white border-primary;
  }
  
  /* 标签样式 */
  .tag {
    @apply inline-block px-3 py-1 text-sm font-medium rounded-full;
  }
  
  .tag-primary {
    @apply bg-primary-100 text-primary-800;
  }
  
  .tag-secondary {
    @apply bg-gray-100 text-gray-800;
  }
  
  .tag-accent {
    @apply bg-accent-100 text-accent-800;
  }
  
  /* 徽章样式 */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply bg-primary-100 text-primary-800;
  }
  
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-error {
    @apply bg-red-100 text-red-800;
  }
  
  /* 加载动画 */
  .loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary;
  }
  
  /* 文本截断 */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 响应式文本 */
  .text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
  }
  
  .heading-responsive {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }
  
  /* 阴影效果 */
  .shadow-colored {
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
  }
  
  /* 渐变文本 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
  
  /* 玻璃效果 */
  .glass {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* 悬浮效果 */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-2;
  }
  
  /* 脉冲效果 */
  .pulse-ring {
    @apply absolute inline-flex h-full w-full rounded-full bg-primary opacity-75 animate-ping;
  }
}

@layer utilities {
  /* 自定义间距 */
  .space-y-18 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 4.5rem;
  }
  
  /* 自定义宽度 */
  .w-18 {
    width: 4.5rem;
  }
  
  .h-18 {
    height: 4.5rem;
  }
  
  /* 自定义字体粗细 */
  .font-extralight {
    font-weight: 200;
  }
  
  /* 自定义边框 */
  .border-dashed-2 {
    border-width: 2px;
    border-style: dashed;
  }
  
  /* 自定义背景 */
  .bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  /* 打印样式 */
  @media print {
    .print-hidden {
      display: none !important;
    }
    
    .print-visible {
      display: block !important;
    }
  }
  
  /* 屏幕阅读器专用 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  
  /* 动画工具 */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }
  
  /* 自定义动画关键帧 */
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* 悬停状态 */
  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  }
  
  .hover-rotate:hover {
    transform: rotate(5deg);
  }
  
  /* 焦点状态 */
  .focus-ring:focus {
    @apply ring-2 ring-primary ring-opacity-50 ring-offset-2;
  }
  
  /* 过渡效果 */
  .transition-base {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .transition-slow {
    @apply transition-all duration-500 ease-in-out;
  }
  
  /* 响应式显示 */
  .show-on-mobile {
    @apply block sm:hidden;
  }
  
  .hide-on-mobile {
    @apply hidden sm:block;
  }
  
  .show-on-desktop {
    @apply hidden lg:block;
  }
  
  .hide-on-desktop {
    @apply block lg:hidden;
  }
}