/* 自定义工具类 */

/* 引入变量文件 */
@import './variables.css';

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  .text-shadow {
    text-shadow: 0 2px 4px var(--color-shadow);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 8px var(--color-shadow-lg);
  }
  
  .transition-custom {
    transition: all var(--transition-custom);
  }
  
  .transition-fast {
    transition: all var(--transition-fast);
  }
  
  .transition-slow {
    transition: all var(--transition-slow);
  }
  
  /* 自定义滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thumb-primary {
    scrollbar-color: var(--color-primary-light) var(--color-background-secondary);
  }
  
  .scrollbar-track-gray-100 {
    scrollbar-track-color: var(--color-background-secondary);
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
    border-radius: var(--panel-border-radius);
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-light);
    border-radius: var(--panel-border-radius);
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-hover);
  }
  
  /* 响应式工具类 */
  .card-hover-effect {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }
  
  .btn-primary-effect {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-md;
  }
  
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .backdrop-blur-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  .backdrop-blur-lg {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* 自定义表格样式 */
  .table-hover-effect {
    @apply transition-colors duration-200 hover:bg-gray-50;
  }
}