/**
 * tokens.css - 设计变量（颜色 / 字号 / 间距 / 圆角 / 动效时长）
 * 约定：所有组件只引用变量，不写魔法值，便于统一换肤
 */

:root {
  /* 颜色 */
  --c-bg: #0f1220;
  --c-bg-soft: #171b2e;
  --c-surface: #1e2338;
  --c-surface-2: #262c45;
  --c-border: #333a58;
  --c-text: #eef1fa;
  --c-text-dim: #a3aac6;
  --c-primary: #4f7cff;
  --c-primary-soft: rgba(79, 124, 255, 0.16);
  --c-accent: #ffb648;
  --c-success: #35c48c;
  --c-danger: #ff5f6d;

  /* 字号 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 40px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* 圆角与阴影 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.36);

  /* 动效 */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}