/* ==========================================================================
   variables.css — 设计令牌（Design Tokens）
   全站唯一的「样式事实来源」：颜色、字体、间距、圆角、阴影、动效曲线。
   任何组件都只引用变量，不写死颜色 / 尺寸，方便整体换肤。
   ========================================================================== */

:root {
  /* ---------- 品牌色：火焰渐变 ---------- */
  --brand:        #FF6A1A;
  --brand-hot:    #FF3D00;
  --brand-warm:   #FFB020;
  --brand-pink:   #FF2E63;
  --brand-grad:   linear-gradient(135deg, #FF3D00 0%, #FF8A00 48%, #FFC53D 100%);
  --brand-grad-s: linear-gradient(135deg, #FF3D00 0%, #FF8A00 100%);
  --brand-soft:   rgba(255, 106, 26, .14);

  /* ---------- 语义色 ---------- */
  --ok:    #2ED573;
  --warn:  #FFB020;
  --bad:   #FF4757;
  --info:  #38BDF8;

  /* ---------- 间距阶梯（4px 基准） ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;

  /* ---------- 圆角 ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ---------- 字体 ---------- */
  --font-sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
               'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-display: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;

  /* 字号阶梯（1.25 倍率，clamp 实现流体缩放） */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   clamp(19px, 1.4vw, 21px);
  --fs-xl:   clamp(23px, 2.2vw, 28px);
  --fs-2xl:  clamp(28px, 3.4vw, 40px);
  --fs-3xl:  clamp(34px, 5vw, 56px);

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.7;

  /* ---------- 容器 ---------- */
  --container: 1220px;
  --container-narrow: 860px;
  --header-h: 68px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .26s;
  --dur-slow: .45s;

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-menu: 200;
  --z-toast: 500;
}

/* ==========================================================================
   暗色主题（默认）—— 游戏电竞基调
   ========================================================================== */
:root,
[data-theme='dark'] {
  --bg:          #08080C;
  --bg-2:        #0C0C12;
  --bg-elev:     #12121A;

  --surface:     rgba(255, 255, 255, .045);
  --surface-2:   rgba(255, 255, 255, .075);
  --surface-3:   rgba(255, 255, 255, .11);
  --surface-solid: #14141C;

  --border:        rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);

  --text:      #F3F3F6;
  --text-dim:  #A4A4B2;
  --text-mute: #6B6B7A;
  --text-on-brand: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .7);
  --glow:      0 0 0 1px rgba(255, 106, 26, .35), 0 8px 32px -8px rgba(255, 106, 26, .45);

  --header-bg: rgba(8, 8, 12, .72);
  --mesh-1: rgba(255, 61, 0, .16);
  --mesh-2: rgba(255, 176, 32, .10);
  --mesh-3: rgba(56, 189, 248, .07);
  color-scheme: dark;
}

/* ==========================================================================
   亮色主题 —— 同一套版式，干净可读
   ========================================================================== */
[data-theme='light'] {
  --bg:          #FBFBFD;
  --bg-2:        #F4F4F8;
  --bg-elev:     #FFFFFF;

  --surface:     #FFFFFF;
  --surface-2:   #F5F5F9;
  --surface-3:   #ECECF2;
  --surface-solid: #FFFFFF;

  --border:        rgba(18, 18, 30, .10);
  --border-strong: rgba(18, 18, 30, .20);

  --text:      #131320;
  --text-dim:  #55556A;
  --text-mute: #8B8B9E;
  --text-on-brand: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(18, 18, 40, .06);
  --shadow-md: 0 8px 24px -8px rgba(18, 18, 40, .14);
  --shadow-lg: 0 24px 60px -20px rgba(18, 18, 40, .22);
  --glow:      0 0 0 1px rgba(255, 106, 26, .3), 0 8px 28px -10px rgba(255, 106, 26, .35);

  --header-bg: rgba(251, 251, 253, .78);
  --mesh-1: rgba(255, 61, 0, .10);
  --mesh-2: rgba(255, 176, 32, .12);
  --mesh-3: rgba(56, 189, 248, .08);
  color-scheme: light;
}

/* 用户在系统层声明「减少动效」时，全站关闭动画 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur: 0s;
    --dur-slow: 0s;
  }
}