/* ═══════════════════════════════════════════════════════════════
 * tokens.css — 小游戏合集设计变量（导航页与所有游戏共用）
 *
 * 风格：温馨像素 Cozy Pixel
 * 规范与用法见根目录 DESIGN.md
 *
 * 引入方式：
 *   导航页   <link rel="stylesheet" href="./assets/tokens.css">
 *   游戏     <link rel="stylesheet" href="../assets/tokens.css">
 *
 * 主题：默认日间；<html data-theme="dark"> 切到夜间；
 *       未显式设置时跟随系统 prefers-color-scheme。
 * ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
 * 1. 原始色阶（只供语义层取用，业务代码不要直接用）
 *    暖土色系：赭石 / 苔绿 / 蜜黄 / 陶土 / 浆果 / 灰蓝
 * ─────────────────────────────────────────────────────────────── */
:root {
  /* 墨（暖黑，带褐调，不要用纯黑） */
  --px-ink-900: #17110d;
  --px-ink-800: #1f1813;
  --px-ink-700: #2b2116;
  --px-ink-600: #3b2f25;
  --px-ink-500: #55443a;

  /* 纸（暖白，带米调，不要用纯白） */
  --px-paper-50:  #fdf8ee;
  --px-paper-100: #f4ecdc;
  --px-paper-200: #ece0c9;
  --px-paper-300: #d5c3a6;
  --px-paper-400: #b39d7c;

  /* 强调色 */
  --px-clay-500:  #b84d24;  /* 陶土橙 —— 主色（日间） */
  --px-clay-600:  #a8471f;
  --px-clay-400:  #e8823f;  /* 陶土橙 —— 主色（夜间，提亮） */
  --px-moss-500:  #527030;  /* 苔绿 —— 辅色（日间） */
  --px-moss-400:  #8fb45c;
  --px-honey-500: #d3961f;  /* 蜜黄 —— 仅作填充，配墨色文字 */
  --px-honey-400: #e9b455;
  --px-berry-500: #a83a52;  /* 浆果 —— 危险 */
  --px-berry-400: #d4617a;
  --px-sky-500:   #356a84;  /* 灰蓝 —— 信息 */
  --px-sky-400:   #6fa3bd;
}

/* ───────────────────────────────────────────────────────────────
 * 2. 语义色 —— 日间（默认）
 * ─────────────────────────────────────────────────────────────── */
:root {
  --bg:            var(--px-paper-100);
  --bg-alt:        var(--px-paper-200);
  --surface:       var(--px-paper-50);
  --surface-alt:   #f0e4cf;
  --line:          var(--px-paper-300);
  --line-strong:   var(--px-paper-400);

  --text:          var(--px-ink-700);
  --text-muted:    #6a5741;
  --text-dim:      #7a664c;

  --primary:       var(--px-clay-500);
  --primary-hover: var(--px-clay-600);
  --on-primary:    #fff8ee;

  --accent:        var(--px-moss-500);
  --honey:         var(--px-honey-500);
  --on-honey:      var(--px-ink-700);
  --danger:        var(--px-berry-500);
  --info:          var(--px-sky-500);

  --shadow-color:  #cbb694;
  --highlight:     rgba(255, 255, 255, .55);
  --scrim:         rgba(43, 33, 22, .55);
  --grid-line:     rgba(43, 33, 22, .045);
}

/* ───────────────────────────────────────────────────────────────
 * 3. 语义色 —— 夜间
 *    ⚠ 下面两块值必须保持一致（一块给 data-theme，一块给系统偏好）
 * ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            var(--px-ink-800);
  --bg-alt:        var(--px-ink-900);
  --surface:       #251d17;
  --surface-alt:   #2e241c;
  --line:          #3b2f25;
  --line-strong:   var(--px-ink-500);

  --text:          #f3e7d5;
  --text-muted:    #b6a289;
  --text-dim:      #97846c;

  --primary:       var(--px-clay-400);
  --primary-hover: #f2955a;
  --on-primary:    #1a1410;

  --accent:        var(--px-moss-400);
  --honey:         var(--px-honey-400);
  --on-honey:      #1a1410;
  --danger:        var(--px-berry-400);
  --info:          var(--px-sky-400);

  --shadow-color:  #0d0906;
  --highlight:     rgba(255, 255, 255, .07);
  --scrim:         rgba(10, 7, 5, .72);
  --grid-line:     rgba(255, 237, 214, .035);
}

/* 未显式指定主题时跟随系统 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--px-ink-800);
    --bg-alt:        var(--px-ink-900);
    --surface:       #251d17;
    --surface-alt:   #2e241c;
    --line:          #3b2f25;
    --line-strong:   var(--px-ink-500);

    --text:          #f3e7d5;
    --text-muted:    #b6a289;
    --text-dim:      #97846c;

    --primary:       var(--px-clay-400);
    --primary-hover: #f2955a;
    --on-primary:    #1a1410;

    --accent:        var(--px-moss-400);
    --honey:         var(--px-honey-400);
    --on-honey:      #1a1410;
    --danger:        var(--px-berry-400);
    --info:          var(--px-sky-400);

    --shadow-color:  #0d0906;
    --highlight:     rgba(255, 255, 255, .07);
    --scrim:         rgba(10, 7, 5, .72);
    --grid-line:     rgba(255, 237, 214, .035);
  }
}

/* ───────────────────────────────────────────────────────────────
 * 4. 字体
 *    像素风不靠像素字体（中文没有可靠的像素字重），
 *    靠「等宽标签 + 硬边几何 + 整数网格」。见 DESIGN.md §3
 * ─────────────────────────────────────────────────────────────── */
:root {
  --font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;

  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular",
               "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --tracking-label: .14em;   /* 等宽小标签 */
  --tracking-tight: -.015em; /* 大标题 */
}

/* ───────────────────────────────────────────────────────────────
 * 5. 间距（4 的倍数，只用这几档）
 * ─────────────────────────────────────────────────────────────── */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
}

/* ───────────────────────────────────────────────────────────────
 * 6. 形状：直角 + 2px 描边 + 硬阴影（无模糊）
 * ─────────────────────────────────────────────────────────────── */
:root {
  --radius: 0;          /* 像素风：一律直角 */
  --border-w: 2px;
  --shadow-off: 3px;    /* 硬阴影偏移 */
  --shadow-off-lg: 5px;

  --shadow: var(--shadow-off) var(--shadow-off) 0 var(--shadow-color);
  --shadow-lg: var(--shadow-off-lg) var(--shadow-off-lg) 0 var(--shadow-color);
  --shadow-inset: inset 0 0 0 1px var(--highlight);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

/* ───────────────────────────────────────────────────────────────
 * 7. 动效（克制：只动 transform / opacity）
 * ─────────────────────────────────────────────────────────────── */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* ───────────────────────────────────────────────────────────────
 * 8. 像素工具类（导航页与游戏都可直接用）
 * ─────────────────────────────────────────────────────────────── */

/* 8px 像素网格背景 */
.px-grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* 位图放大不插值 */
.px-sprite,
img.px-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 等宽小标签：像素 UI 的主要「字体表情」 */
.px-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* 硬边容器 */
.px-frame {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* 抖动网点（像素画的过渡手法，替代渐变） */
.px-dither {
  background-image:
    repeating-conic-gradient(
      var(--dither-a, transparent) 0% 25%,
      var(--dither-b, transparent) 0% 50%
    );
  background-size: 4px 4px;
}

/* 全局兜底 */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

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