/* =========================================================
   云端小游戏聚合平台 · Design Tokens v2.0（双轨）
   前端 = 新粗野主义 × 街机游戏风（body 默认 / [data-ui="front"]）
   后端 = 简洁现代后台风（body[data-ui="admin"]）
   两套令牌通过 data-ui 隔离，互不污染。
   铁律：全站禁 emoji；后端卡片零 box-shadow；前端只用硬偏移阴影。
   ========================================================= */

/* ---------- 0. 共享基座 ---------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 4px 基准间距 */
  --space-0: 0px; --space-4: 4px; --space-8: 8px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-56: 56px; --space-72: 72px;

  --content-max: 1200px;
  --content-text: 720px;
  --gutter: 16px;
  --container: 100%;
  --pad: 16px;

  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* =========================================================
   前端 · 新粗野主义 × 街机（默认主题）
   ========================================================= */
body,
body[data-ui="front"] {
  /* 品牌色 */
  --nb-paper:   #F3EFE2;   /* 页面底色（奶油纸） */
  --nb-ink:     #1A1A1A;   /* 描边 / 正文主色（近黑） */
  --nb-white:   #FFFFFF;   /* 卡片底 / 反白 */

  --nb-blue:    #2456FF;   /* 主品牌 · 游戏主按钮 */
  --nb-blue-ink: #FFFFFF;
  --nb-yellow:  #FFD200;   /* 强调 / 等级 / 高亮 */
  --nb-yellow-ink: #1A1A1A;
  --nb-pink:    #FF4F9A;   /* 次要按钮 / 促销 */
  --nb-pink-ink: #FFFFFF;
  --nb-green:   #1FD45B;   /* 成功 / 在线 / 可玩 */
  --nb-green-ink: #1A1A1A;
  --nb-orange:  #FF6B35;   /* 警告 / 下载 */
  --nb-orange-ink: #FFFFFF;
  --nb-red:     #FF3B30;   /* 危险 / 下架 / 封禁 */
  --nb-red-ink: #FFFFFF;

  --nb-muted:   #6B6555;   /* 次要文字（纸面灰褐） */

  /* 语义映射 */
  --success: var(--nb-green);  --success-bg: #E2F9E8;  --success-ink: #0E7A34;
  --warning: var(--nb-orange); --warning-bg: #FFE9D8;  --warning-ink: #B44308;
  --danger:  var(--nb-red);    --danger-bg:  #FFE0DE;  --danger-ink:  #B01E14;
  --info:    var(--nb-blue);   --info-bg:    #E5ECFF;  --info-ink:    #1734B0;

  /* 粗野主义核心 */
  --nb-line:   3px;                  /* 描边厚度 */
  --nb-shadow:  4px 4px 0 0 #1A1A1A; /* 硬偏移阴影（无模糊） */
  --nb-shadow-lg: 6px 6px 0 0 #1A1A1A;

  --radius: 12px;
  --radius-sm: 8px;

  /* 排版 */
  --fs-display: 44px; --lh-display: 1.06; --fw-display: 900; --ls-display: -0.02em;
  --fs-h1: 32px; --lh-h1: 1.15; --fw-h1: 900; --ls-h1: -0.02em;
  --fs-h2: 24px; --lh-h2: 1.25; --fw-h2: 800; --ls-h2: -0.01em;
  --fs-h3: 20px; --lh-h3: 1.35; --fw-h3: 800;
  --fs-body: 16px; --lh-body: 1.7; --fw-body: 400;
  --fs-body-s: 14px; --lh-body-s: 1.55; --fw-body-s: 500;
  --fs-caption: 13px; --lh-caption: 1.45; --fw-caption: 600;
  --fs-tiny: 12px; --lh-tiny: 1.4; --fw-tiny: 700;

  --section-gap: 56px;
  --icon-size: 56px;
}

/* =========================================================
   后端 · 简洁现代（[data-ui="admin"]）
   ========================================================= */
body[data-ui="admin"] {
  --bg:      #F6F7F9;   /* 页面底 */
  --surface: #FFFFFF;   /* 卡片 / 抽屉 / 顶栏 */
  --border:  #E6E8EE;   /* 1px 描边 */

  --text-1:  #1F2329;   /* 主文本 */
  --text-2:  #6B7280;   /* 次要文本 */
  --text-3:  #9CA3AF;   /* 弱化 / 占位 */

  --accent:      #4F46E5;   /* 主色（靛蓝） */
  --accent-hover:#4338CA;
  --accent-ink:  #FFFFFF;
  --accent-soft: #EEF0FF;   /* 选中项浅底 */

  --success: #16A34A; --success-bg: #ECFDF3; --success-ink: #0E7A34;
  --warning: #D97706; --warning-bg: #FFF8EB; --warning-ink: #A15807;
  --danger:  #DC2626; --danger-bg:  #FEF2F2; --danger-ink:  #B91C1C;
  --info:    #2563EB; --info-bg:    #EFF6FF; --info-ink:    #1D4ED8;

  --radius: 14px;
  --radius-sm: 8px;

  --fs-h1: 26px; --fw-h1: 700;
  --fs-h2: 18px; --fw-h2: 600;
  --fs-body: 14px; --fs-body-s: 13px;
  --fs-caption: 12px; --fs-tiny: 12px;

  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
}

/* ---------- 断点（间距微调） ---------- */
@media (min-width: 768px)  { :root { --pad: 24px; } }
@media (min-width: 1280px) { :root { --container: 1200px; } }

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--nb-ink, #1A1A1A);
  background-color: var(--nb-paper, #F3EFE2);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--nb-ink, #1A1A1A);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}