/* 斗词场 · 设计变量
 * 风格：白色调 + 简洁科技风（白底、浅灰分隔、青蓝/靛紫强调、大留白、弱阴影）
 * 动效：平滑过渡（统一使用 --ease-* 与 --dur-*，禁止硬编码贝塞尔曲线）
 *
 * 关键约束：
 *   1. 任何文字元素都必须能追溯到 --c-text / --c-text-2 / --c-text-3（reset.css 已给 body 设默认色）
 *   2. 浅底上的强调色一律用 -ink 后缀的深色版本，保证对比度 >= 4.5:1
 */

:root {
  color-scheme: light;

  /* ---- 底色：白 / 浅灰 ---- */
  --c-bg: #f4f6fb;
  --c-bg-2: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f1f4fa;
  --c-surface-3: #e6ebf5;
  --c-glass: rgba(15, 23, 42, .04);
  --c-line: #e6eaf2;
  --c-line-strong: #cfd8e8;

  /* ---- 文字 ---- */
  --c-text: #131a2b;
  --c-text-2: #4a5670;
  --c-text-3: #5f6a85;   /* 白底对比度约 5.1:1，可用于小字 */

  /* ---- 强调色：青蓝 / 靛紫（-ink 为浅底可读的深色版本） ---- */
  --c-primary: #14b8a6;
  --c-primary-ink: #0b6b62;
  --c-primary-2: #2563eb;
  --c-primary-2-ink: #1d4ed8;
  --c-violet: #6d4aff;
  --c-violet-ink: #5334c9;

  --c-peer: #2563eb;     /* 我方：蓝 */
  --c-peer-ink: #1d4ed8;
  --c-rival: #f97316;    /* 对手：橙 */
  --c-rival-ink: #b03a08;
  --c-gold: #f59e0b;
  --c-gold-ink: #8a5300;
  --c-silver: #94a3b8;
  --c-bronze: #b45309;
  --c-danger: #dc2626;
  --c-danger-ink: #b91c1c;
  --c-ok: #16a34a;
  --c-ok-ink: #15803d;

  /* ---- 渐变 ---- */
  --g-primary: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
  --g-peer: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  --g-rival: linear-gradient(135deg, #fdba74 0%, #f97316 100%);
  --g-gold: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  --g-glass: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .55) 100%);
  --g-bg: radial-gradient(70% 40% at 6% -6%, rgba(20, 184, 166, .10) 0%, transparent 60%),
          radial-gradient(60% 36% at 96% 2%, rgba(124, 92, 255, .10) 0%, transparent 62%),
          linear-gradient(180deg, #f7f9fd 0%, #eef2f9 100%);
  --g-grid: linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);

  /* ---- 圆角 ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

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

  /* ---- 字号 ---- */
  --f-xs: 11px;
  --f-sm: 12px;
  --f-md: 14px;
  --f-lg: 16px;
  --f-xl: 20px;
  --f-2xl: 26px;
  --f-3xl: 34px;

  /* ---- 动效（平滑、克制：140~460ms） ---- */
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --dur-4: 460ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1);
  --tr-fast: var(--dur-1) var(--ease-out);
  --tr-base: var(--dur-2) var(--ease-out);
  --tr-slow: var(--dur-3) var(--ease-out);
  --tr-spring: var(--dur-4) var(--ease-spring);

  /* ---- 阴影 / 光效（浅色主题：以柔影代替发光） ---- */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
  --sh-2: 0 10px 34px rgba(16, 24, 40, .12);
  --glow-primary: 0 6px 18px rgba(37, 99, 235, .22);
  --glow-peer: 0 4px 14px rgba(37, 99, 235, .20);
  --glow-rival: 0 4px 14px rgba(249, 115, 22, .20);
  --z-tab: 20;
  --z-overlay: 40;
  --z-toast: 60;

  --tab-h: 58px;
  --top-h: 50px;
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}