/* 咸鱼电竞设计系统 · 02 Base —— 画布、排版、焦点、滚动条、减少动效
   只设置“安全”的全局属性；不对 button / input 做重置，避免把未改造组件的外观清空。 */
@layer xy.base {
  html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg-canvas);
    color: var(--text-1);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: rgba(244, 179, 207, .32); color: var(--milk); }

  h1, h2, h3, h4 { color: var(--text-1); letter-spacing: .01em; }
  small { color: var(--text-4); }
  a { color: var(--accent); }
  hr { border: 0; border-top: 1px solid var(--hairline); }

  /* 数字：金额、编号、时间统一等宽数字，扫描时列能对齐 */
  .num, .money, .amount, .metric strong, td.num, .tabular { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .latin, .brand-en { font-family: var(--font-accent); font-style: italic; letter-spacing: .02em; }
  .serif { font-family: var(--font-serif); }

  /* 焦点：统一的双环（画布色 + Logo 粉），键盘可见、鼠标不打扰 */
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

  * { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-500); }

  /* 入场动效：只做 opacity/transform；元素默认可见，动画失败也可读 */
  @keyframes xy-rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes xy-fade { from { opacity: 0; } }
  @keyframes xy-pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes xy-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
  @keyframes xy-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}