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

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply bg-ink-100 text-ink-800 antialiased;
    font-feature-settings: 'tnum' 1; /* 数字等宽:比分/百分比不跳动 */
  }

  /* 统一焦点环,键盘可达性 */
  :focus-visible {
    @apply outline-none ring-2 ring-brand-500/40 ring-offset-1 ring-offset-white;
  }

  /* 细滚动条 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply rounded-pill bg-ink-300/70;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-ink-400;
  }

  /* 尊重「减少动态效果」偏好 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* ── 卡片 ── */
  .card {
    @apply rounded-card border border-ink-200 bg-white shadow-card;
  }

  /* ── 按钮 ── */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-3.5 py-2
           text-sm font-medium transition-colors duration-150
           disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary {
    @apply btn bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800;
  }
  .btn-ghost {
    @apply btn border border-ink-200 bg-white text-ink-700 hover:bg-ink-50 hover:border-ink-300;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* ── 表单控件 ── */
  .field {
    @apply rounded-lg border border-ink-200 bg-white px-3 py-2 text-sm text-ink-800
           transition-colors hover:border-ink-300
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20;
  }

  /* ── 状态胶囊 ── */
  .pill {
    @apply inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-2xs font-medium;
  }

  /* ── 骨架屏 ── */
  .skeleton {
    @apply rounded bg-gradient-to-r from-ink-200 via-ink-100 to-ink-200
           bg-[length:200%_100%] animate-shimmer;
  }

  /* ── 分段控件(模式切换) ── */
  .segment {
    @apply rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150;
  }
  .segment-on {
    @apply bg-white text-brand-700 shadow-sm;
  }
  .segment-off {
    @apply text-ink-500 hover:text-ink-700;
  }
}