/* ==========================================================================
   UGC 数据中枢 v2 · Design Tokens
   三层结构：① 原子色板（不直接使用）→ ② 语义变量（组件只用这一层）→ ③ 组件私有变量
   主题：<html data-theme="light|dark">，由 index.html 首帧脚本在渲染前写入，避免闪烁
   涨跌：<html data-trend="cn|intl">，cn = 涨红跌绿（默认，中国习惯），intl = 涨绿跌红
   ========================================================================== */

:root {
  /* ---------- ① 原子色板 ---------- */
  --gray-0: #ffffff;
  --gray-25: #fbfbfc;
  --gray-50: #f7f8fa;
  --gray-100: #f1f3f6;
  --gray-150: #eaedf1;
  --gray-200: #e1e5eb;
  --gray-300: #cdd3dc;
  --gray-400: #9ba3b1;
  --gray-500: #6c7586;
  --gray-600: #4d5565;
  --gray-700: #363c48;
  --gray-800: #23272f;
  --gray-850: #1b1e25;
  --gray-900: #15171c;
  --gray-950: #0c0d10;

  --blue-50: #eef3ff;
  --blue-100: #dde6ff;
  --blue-400: #6f8dff;
  --blue-500: #4a6cf7;
  --blue-600: #3554e0;
  --blue-700: #2a43b8;

  --green-50: #ecfbf2;
  --green-400: #3fd68b;
  --green-500: #17b26a;
  --green-600: #0e9356;
  --green-700: #0a7444;

  --amber-50: #fff8e8;
  --amber-400: #f8c14a;
  --amber-500: #f0a20b;
  --amber-600: #c97f02;
  --amber-700: #9a5f05;

  --red-50: #fff1f0;
  --red-400: #ff7a78;
  --red-500: #f0443d;
  --red-600: #d32f2a;
  --red-700: #a8231f;

  --violet-500: #7c6cf0;

  /* ---------- 平台识别色（全站唯一出处） ---------- */
  --platform-lvzhou: #00a886;
  --platform-kk: #3a63c4;
  --platform-dota2: #d0453c;
  --platform-roblox: #e5781f;
  --platform-genshin: #7c6cf0;
  --platform-growth: #4a6cf7;

  /* ---------- 排版 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;     /* 正文基准：数据密集型界面 13px */
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --leading-tight: 1.2;
  --leading-snug: 1.38;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.011em;
  --tracking-tighter: -0.022em;
  --tracking-caps: 0.06em;

  /* ---------- 间距（4px 栅格） ---------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 圆角 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* ---------- 布局 ---------- */
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 60px;
  --header-height: 52px;
  --content-max: 1600px;
  --content-padding: 24px;
  --bento-gap: 16px;

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 40;
  --z-sidebar: 50;
  --z-drawer: 70;
  --z-overlay: 80;
  --z-popover: 90;
  --z-toast: 100;
}

/* ==========================================================================
   ② 语义变量 · 亮色主题
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--gray-50);
  --bg-subtle: var(--gray-100);
  --bg-sunken: var(--gray-150);
  --surface: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-overlay: rgba(255, 255, 255, 0.86);
  --surface-hover: var(--gray-50);
  --surface-active: var(--gray-100);
  --surface-inverse: var(--gray-900);

  --border: var(--gray-200);
  --border-subtle: var(--gray-150);
  --border-strong: var(--gray-300);

  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  /* 亮色：muted 6.2:1、subtle 5.0:1（卡片白底）——原 subtle 仅 2.5:1，低于 WCAG AA 4.5:1 */
  --text-muted: #586271;
  /* 作者建联状态点：浅绿=已建联，深绿=已签约 */
  --link-dot: #34c759;
  --link-dot-strong: #0f7b3d;
  --link-dot-pending: #f0a020;
  /* 建联状态标签：已建联=浅绿底深绿字，可联系=浅黄底棕字 */
  --link-tag-bg: #dff5e4;
  --link-tag-fg: #12703a;
  --link-tag-pending-bg: #fff2d6;
  --link-tag-pending-fg: #8a5a00;
  --text-subtle: #667085;
  --text-inverse: var(--gray-0);

  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-fg: #ffffff;
  --accent-soft: var(--blue-50);
  --accent-soft-fg: var(--blue-700);
  --accent-border: var(--blue-100);

  --success: var(--green-600);
  --success-soft: var(--green-50);
  --success-fg: var(--green-700);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-50);
  --warning-fg: var(--amber-700);
  --danger: var(--red-500);
  --danger-soft: var(--red-50);
  --danger-fg: var(--red-700);
  --info: var(--blue-500);
  --info-soft: var(--blue-50);
  --info-fg: var(--blue-700);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(53, 84, 224, 0.42);

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.06), 0 20px 48px rgba(16, 24, 40, 0.14);
  --shadow-card-hover: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);

  --skeleton-base: var(--gray-150);
  --skeleton-shine: rgba(255, 255, 255, 0.72);
  --scrollbar: var(--gray-300);
  --backdrop: rgba(15, 18, 24, 0.36);
  --selection: rgba(74, 108, 247, 0.18);

  /* 图表专用：网格线、坐标轴、提示框 */
  --chart-grid: var(--gray-150);
  --chart-axis: var(--gray-400);
  --chart-tooltip-bg: var(--gray-900);
  --chart-tooltip-fg: var(--gray-0);
}

/* ==========================================================================
   ② 语义变量 · 暗色主题（低眩光：不用纯黑、降低大面积对比，提亮语义色）
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--gray-950);
  --bg-subtle: #111317;
  --bg-sunken: #08090b;
  --surface: #121419;
  --surface-raised: #171a20;
  --surface-overlay: rgba(18, 20, 25, 0.84);
  --surface-hover: #1a1d24;
  --surface-active: #20242c;
  --surface-inverse: var(--gray-100);

  --border: #24282f;
  --border-subtle: #1c1f25;
  --border-strong: #323843;

  --text: #e8eaee;
  --text-secondary: #b3bac6;
  /* 暗色：muted 7.2:1、subtle 4.9:1——原 subtle 仅 3.1:1 */
  --text-muted: #99a2b1;
  --link-dot: #3ddc6a;
  --link-dot-strong: #1f9d55;
  --link-dot-pending: #f5b53f;
  --link-tag-bg: rgba(61, 220, 106, 0.16);
  --link-tag-fg: #7fe0a0;
  --link-tag-pending-bg: rgba(245, 181, 63, 0.16);
  --link-tag-pending-fg: #f3c877;
  --text-subtle: #7a8494;
  --text-inverse: var(--gray-900);

  --accent: var(--blue-400);
  --accent-hover: #8aa2ff;
  --accent-fg: #0b0f1d;
  --accent-soft: rgba(111, 141, 255, 0.12);
  --accent-soft-fg: #a9bbff;
  --accent-border: rgba(111, 141, 255, 0.26);

  --success: var(--green-400);
  --success-soft: rgba(63, 214, 139, 0.11);
  --success-fg: #7ee6b0;
  --warning: var(--amber-400);
  --warning-soft: rgba(248, 193, 74, 0.11);
  --warning-fg: #fad27f;
  --danger: var(--red-400);
  --danger-soft: rgba(255, 122, 120, 0.11);
  --danger-fg: #ffa3a1;
  --info: var(--blue-400);
  --info-soft: rgba(111, 141, 255, 0.11);
  --info-fg: #a9bbff;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(111, 141, 255, 0.55);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-card-hover: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0, 0, 0, 0.35);

  --skeleton-base: #1c1f26;
  --skeleton-shine: rgba(255, 255, 255, 0.05);
  --scrollbar: #2c313a;
  --backdrop: rgba(0, 0, 0, 0.6);
  --selection: rgba(111, 141, 255, 0.28);

  --chart-grid: #1f232a;
  --chart-axis: #5d6573;
  --chart-tooltip-bg: #e8eaee;
  --chart-tooltip-fg: #121419;

  /* 暗色下平台色整体提亮一档，保证在深底上可读 */
  --platform-lvzhou: #22c7a1;
  --platform-kk: #6f93f0;
  --platform-dota2: #f06a60;
  --platform-roblox: #ff9a47;
  --platform-genshin: #a497ff;
  --platform-growth: #6f8dff;
}

/* ==========================================================================
   涨跌语义（排名上升 = 涨）
   ========================================================================== */
:root,
[data-trend="cn"] {
  --trend-up: var(--danger);
  --trend-up-soft: var(--danger-soft);
  --trend-up-fg: var(--danger-fg);
  --trend-down: var(--success);
  --trend-down-soft: var(--success-soft);
  --trend-down-fg: var(--success-fg);
}
[data-trend="intl"] {
  --trend-up: var(--success);
  --trend-up-soft: var(--success-soft);
  --trend-up-fg: var(--success-fg);
  --trend-down: var(--danger);
  --trend-down-soft: var(--danger-soft);
  --trend-down-fg: var(--danger-fg);
}
:root {
  --trend-flat: var(--text-muted);
  --trend-flat-soft: var(--bg-subtle);
}

@media (max-width: 1024px) {
  :root {
    --content-padding: 16px;
    --bento-gap: 12px;
  }
}