qinqinghuisheng/src/index.css

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

@layer utilities {
  /* 隐藏滚动条但保持滚动功能 */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
}

@layer base {
  /* 全局高对比度基线 WCAG AA+ */
  body {
    @apply antialiased;
  }

  /* 老人端专用样式 */
  .elderly-mode {
    @apply text-elderly-base leading-relaxed-plus;
  }

  /* 大按钮基础样式 */
  .btn-elderly {
    @apply min-h-touch-lg min-w-touch-lg text-elderly-lg font-bold rounded-2xl
           shadow-lg active:scale-95 transition-transform duration-150;
  }

  /* 无障碍焦点环 */
  *:focus-visible {
    @apply outline-none ring-4 ring-primary-400 ring-offset-2;
  }
}

@layer components {
  /* 卡片基础样式 */
  .card {
    @apply bg-white rounded-2xl shadow-lg p-6;
  }

  /* 老人端卡片 - 更大间距和字体 */
  .card-elderly {
    @apply card p-8 text-elderly-base;
  }

  /* 警示级别 */
  .alert-low {
    @apply bg-warning-light text-gray-900;
  }

  .alert-medium {
    @apply bg-warning-medium text-white;
  }

  .alert-high {
    @apply bg-warning-high text-white;
  }
}

/* 动画 - 避免频闪 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes breathe {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.animate-fade-in {
  animation: fadeIn 300ms ease-in-out;
}

.animate-breathe {
  animation: breathe 2s ease-in-out infinite;
}