/* ============================================================
   m3-tokens.css — Material 3 色彩角色 / 字体 / 层级令牌
   绝杀令: 禁止 linear-gradient、backdrop-filter、带颜色的发光阴影
   ============================================================ */
:root {
  /* 色彩角色 (2.1) */
  --md-surface: #141218;
  --md-surface-container-low: #1D1B20;
  --md-surface-container: #211F26;
  --md-surface-container-high: #2B2930;
  --md-on-surface: #E6E0E9;
  --md-on-surface-variant: #CAC4D0;
  --md-primary: #D0BCFF;
  --md-on-primary: #141218;
  --md-outline: #938F99;
  --md-outline-variant: #49454F;
  --md-error: #F2B8B5;

  /* 状态层 (M3 state layer, 纯白 8%/12% 叠加) */
  --md-state-hover: rgba(230, 224, 233, 0.08);
  --md-state-press: rgba(230, 224, 233, 0.12);
  --md-scrim: rgba(0, 0, 0, 0.32);

  /* 形状 */
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-full: 9999px;

  /* 字体 */
  --font-sans: "Segoe UI", "Roboto", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --type-title-large: 22px;
  --type-title-medium: 16px;
  --type-body-medium: 14px;
  --type-body-small: 12px;
  --type-label-large: 14px;
  --type-headline-small: 24px;

  /* 阴影 (仅黑色中性阴影, 无颜色发光) */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.5);
  --elevation-3: 0 4px 12px rgba(0, 0, 0, 0.55);

  /* 动效曲线 (第六章) */
  --ease-entrance: cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --ease-emphasized-accel: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  /* 6.5 形变: 只动 border-radius, effects 曲线, 控制点 y ∈ [0,1] 无过冲 */
  --morph: border-radius 120ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --dur-entrance: 400ms;
  --dur-sheet-open: 300ms;
  --dur-sheet-close: 200ms;
  --dur-focus: 250ms;
  --dur-zoom: 600ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; }

::selection { background: var(--md-primary); color: var(--md-on-primary); }

/* 滚动条 (M3 风格细滚动条) */
* { scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}