/* ============================================================
   扫雷大作战 · 主题与设计令牌
   所有原始色值集中在这一个 :root 区块里，主题切换只做 var() 映射。
   ============================================================ */

:root {
  /* —— 基础中性色 —— */
  --pal-ink: #101418;
  --pal-paper: #ffffff;

  /* —— 糖果像素 · 亮色 —— */
  --pal-candy-l-bg: #fff4e0;
  --pal-candy-l-surface: #fffdf8;
  --pal-candy-l-fg: #37284d;
  --pal-candy-l-muted: #7b6b93;
  --pal-candy-l-line: #3d2b57;
  --pal-candy-l-cover: #ffcfe3;
  --pal-candy-l-open: #fff0f7;
  --pal-candy-l-accent: #f04e8a;
  --pal-candy-l-accent2: #7a5cff;
  --pal-candy-l-flag: #ff8a3d;
  --pal-candy-l-danger: #e23b52;
  --pal-candy-l-gold: #f7b731;
  --pal-candy-l-good: #1fa981;

  /* —— 糖果像素 · 暗色 —— */
  --pal-candy-d-bg: #171021;
  --pal-candy-d-surface: #21172f;
  --pal-candy-d-fg: #fff2fb;
  --pal-candy-d-muted: #b7a5cc;
  --pal-candy-d-line: #0b0612;
  --pal-candy-d-cover: #583676;
  --pal-candy-d-open: #2a1e3b;
  --pal-candy-d-accent: #ff7eb0;
  --pal-candy-d-accent2: #b79bff;
  --pal-candy-d-flag: #ffb15c;
  --pal-candy-d-danger: #ff6b7f;
  --pal-candy-d-gold: #ffd15c;
  --pal-candy-d-good: #59e0b0;

  /* —— 糖果像素 · 护眼 —— */
  --pal-candy-e-bg: #eef4e3;
  --pal-candy-e-surface: #fafcf3;
  --pal-candy-e-fg: #2c3a2d;
  --pal-candy-e-muted: #6b7a67;
  --pal-candy-e-line: #46523f;
  --pal-candy-e-cover: #d5e4bd;
  --pal-candy-e-open: #f4f8ea;
  --pal-candy-e-accent: #558b4f;
  --pal-candy-e-accent2: #a06a4a;
  --pal-candy-e-flag: #b5722c;
  --pal-candy-e-danger: #b3443f;
  --pal-candy-e-gold: #c39a21;
  --pal-candy-e-good: #3f8a63;

  /* —— 校园涂鸦 · 亮色 —— */
  --pal-doodle-l-bg: #f8f3e6;
  --pal-doodle-l-surface: #fffdf7;
  --pal-doodle-l-fg: #28231b;
  --pal-doodle-l-muted: #6d6353;
  --pal-doodle-l-line: #2e2820;
  --pal-doodle-l-cover: #efe2bf;
  --pal-doodle-l-open: #fffdf7;
  --pal-doodle-l-accent: #2f62d8;
  --pal-doodle-l-accent2: #d95b2f;
  --pal-doodle-l-flag: #c43d3d;
  --pal-doodle-l-danger: #c02a2a;
  --pal-doodle-l-gold: #e8b923;
  --pal-doodle-l-good: #2f8a5b;

  /* —— 校园涂鸦 · 暗色 —— */
  --pal-doodle-d-bg: #1d1a15;
  --pal-doodle-d-surface: #27231c;
  --pal-doodle-d-fg: #f7f0e0;
  --pal-doodle-d-muted: #b4a891;
  --pal-doodle-d-line: #0e0c09;
  --pal-doodle-d-cover: #4c4434;
  --pal-doodle-d-open: #302b22;
  --pal-doodle-d-accent: #7fa8ff;
  --pal-doodle-d-accent2: #ff9363;
  --pal-doodle-d-flag: #ff7676;
  --pal-doodle-d-danger: #ff6b6b;
  --pal-doodle-d-gold: #ffd166;
  --pal-doodle-d-good: #69d99b;

  /* —— 校园涂鸦 · 护眼 —— */
  --pal-doodle-e-bg: #e9eee1;
  --pal-doodle-e-surface: #f7faef;
  --pal-doodle-e-fg: #283225;
  --pal-doodle-e-muted: #62705c;
  --pal-doodle-e-line: #3b4636;
  --pal-doodle-e-cover: #dbe3ca;
  --pal-doodle-e-open: #f5f9ec;
  --pal-doodle-e-accent: #356a92;
  --pal-doodle-e-accent2: #9c5837;
  --pal-doodle-e-flag: #a04747;
  --pal-doodle-e-danger: #9c3434;
  --pal-doodle-e-gold: #ad861d;
  --pal-doodle-e-good: #367552;

  /* —— 清爽科技 · 亮色 —— */
  --pal-tech-l-bg: #eef4f7;
  --pal-tech-l-surface: #ffffff;
  --pal-tech-l-fg: #0e2230;
  --pal-tech-l-muted: #5a7280;
  --pal-tech-l-line: #c9dae2;
  --pal-tech-l-cover: #dde9ef;
  --pal-tech-l-open: #f7fbfd;
  --pal-tech-l-accent: #0e9488;
  --pal-tech-l-accent2: #ef6c35;
  --pal-tech-l-flag: #e0474c;
  --pal-tech-l-danger: #d3271a;
  --pal-tech-l-gold: #e8a519;
  --pal-tech-l-good: #0f9d63;

  /* —— 清爽科技 · 暗色 —— */
  --pal-tech-d-bg: #08131a;
  --pal-tech-d-surface: #0f1f29;
  --pal-tech-d-fg: #e6f4f9;
  --pal-tech-d-muted: #89a6b3;
  --pal-tech-d-line: #20343f;
  --pal-tech-d-cover: #1a2f3b;
  --pal-tech-d-open: #0d1a21;
  --pal-tech-d-accent: #2ed3c0;
  --pal-tech-d-accent2: #ff8a4c;
  --pal-tech-d-flag: #ff6b71;
  --pal-tech-d-danger: #ff6b5e;
  --pal-tech-d-gold: #f7c948;
  --pal-tech-d-good: #34d399;

  /* —— 清爽科技 · 护眼 —— */
  --pal-tech-e-bg: #e8efe9;
  --pal-tech-e-surface: #f4f8f3;
  --pal-tech-e-fg: #182a24;
  --pal-tech-e-muted: #5b7066;
  --pal-tech-e-line: #bfd0c6;
  --pal-tech-e-cover: #d3e2d8;
  --pal-tech-e-open: #f1f7f2;
  --pal-tech-e-accent: #26867a;
  --pal-tech-e-accent2: #a85f38;
  --pal-tech-e-flag: #a84a4a;
  --pal-tech-e-danger: #a63a30;
  --pal-tech-e-gold: #a9821c;
  --pal-tech-e-good: #2c8259;

  /* —— 非颜色令牌 —— */
  --font-mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --radius-card: 26px;
  --radius-panel: 20px;
  --radius-board: 18px;
  --radius-cell: 9px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --lift: 3px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --speed: 180ms;
}

/* ============================================================
   语义映射 · 糖果像素
   ============================================================ */
:root[data-theme="candy"][data-mode="light"] {
  --bg: var(--pal-candy-l-bg);
  --surface: var(--pal-candy-l-surface);
  --fg: var(--pal-candy-l-fg);
  --muted: var(--pal-candy-l-muted);
  --line: var(--pal-candy-l-line);
  --cover: var(--pal-candy-l-cover);
  --open: var(--pal-candy-l-open);
  --accent: var(--pal-candy-l-accent);
  --accent-2: var(--pal-candy-l-accent2);
  --flag-color: var(--pal-candy-l-flag);
  --danger: var(--pal-candy-l-danger);
  --gold: var(--pal-candy-l-gold);
  --good: var(--pal-candy-l-good);
  --on-accent: var(--pal-paper);
}

:root[data-theme="candy"][data-mode="dark"] {
  --bg: var(--pal-candy-d-bg);
  --surface: var(--pal-candy-d-surface);
  --fg: var(--pal-candy-d-fg);
  --muted: var(--pal-candy-d-muted);
  --line: var(--pal-candy-d-line);
  --cover: var(--pal-candy-d-cover);
  --open: var(--pal-candy-d-open);
  --accent: var(--pal-candy-d-accent);
  --accent-2: var(--pal-candy-d-accent2);
  --flag-color: var(--pal-candy-d-flag);
  --danger: var(--pal-candy-d-danger);
  --gold: var(--pal-candy-d-gold);
  --good: var(--pal-candy-d-good);
  --on-accent: var(--pal-ink);
}

:root[data-theme="candy"][data-mode="eye"] {
  --bg: var(--pal-candy-e-bg);
  --surface: var(--pal-candy-e-surface);
  --fg: var(--pal-candy-e-fg);
  --muted: var(--pal-candy-e-muted);
  --line: var(--pal-candy-e-line);
  --cover: var(--pal-candy-e-cover);
  --open: var(--pal-candy-e-open);
  --accent: var(--pal-candy-e-accent);
  --accent-2: var(--pal-candy-e-accent2);
  --flag-color: var(--pal-candy-e-flag);
  --danger: var(--pal-candy-e-danger);
  --gold: var(--pal-candy-e-gold);
  --good: var(--pal-candy-e-good);
  --on-accent: var(--pal-paper);
}

/* ============================================================
   语义映射 · 校园涂鸦
   ============================================================ */
:root[data-theme="doodle"][data-mode="light"] {
  --bg: var(--pal-doodle-l-bg);
  --surface: var(--pal-doodle-l-surface);
  --fg: var(--pal-doodle-l-fg);
  --muted: var(--pal-doodle-l-muted);
  --line: var(--pal-doodle-l-line);
  --cover: var(--pal-doodle-l-cover);
  --open: var(--pal-doodle-l-open);
  --accent: var(--pal-doodle-l-accent);
  --accent-2: var(--pal-doodle-l-accent2);
  --flag-color: var(--pal-doodle-l-flag);
  --danger: var(--pal-doodle-l-danger);
  --gold: var(--pal-doodle-l-gold);
  --good: var(--pal-doodle-l-good);
  --on-accent: var(--pal-paper);
}

:root[data-theme="doodle"][data-mode="dark"] {
  --bg: var(--pal-doodle-d-bg);
  --surface: var(--pal-doodle-d-surface);
  --fg: var(--pal-doodle-d-fg);
  --muted: var(--pal-doodle-d-muted);
  --line: var(--pal-doodle-d-line);
  --cover: var(--pal-doodle-d-cover);
  --open: var(--pal-doodle-d-open);
  --accent: var(--pal-doodle-d-accent);
  --accent-2: var(--pal-doodle-d-accent2);
  --flag-color: var(--pal-doodle-d-flag);
  --danger: var(--pal-doodle-d-danger);
  --gold: var(--pal-doodle-d-gold);
  --good: var(--pal-doodle-d-good);
  --on-accent: var(--pal-ink);
}

:root[data-theme="doodle"][data-mode="eye"] {
  --bg: var(--pal-doodle-e-bg);
  --surface: var(--pal-doodle-e-surface);
  --fg: var(--pal-doodle-e-fg);
  --muted: var(--pal-doodle-e-muted);
  --line: var(--pal-doodle-e-line);
  --cover: var(--pal-doodle-e-cover);
  --open: var(--pal-doodle-e-open);
  --accent: var(--pal-doodle-e-accent);
  --accent-2: var(--pal-doodle-e-accent2);
  --flag-color: var(--pal-doodle-e-flag);
  --danger: var(--pal-doodle-e-danger);
  --gold: var(--pal-doodle-e-gold);
  --good: var(--pal-doodle-e-good);
  --on-accent: var(--pal-paper);
}

/* ============================================================
   语义映射 · 清爽科技
   ============================================================ */
:root[data-theme="tech"][data-mode="light"] {
  --bg: var(--pal-tech-l-bg);
  --surface: var(--pal-tech-l-surface);
  --fg: var(--pal-tech-l-fg);
  --muted: var(--pal-tech-l-muted);
  --line: var(--pal-tech-l-line);
  --cover: var(--pal-tech-l-cover);
  --open: var(--pal-tech-l-open);
  --accent: var(--pal-tech-l-accent);
  --accent-2: var(--pal-tech-l-accent2);
  --flag-color: var(--pal-tech-l-flag);
  --danger: var(--pal-tech-l-danger);
  --gold: var(--pal-tech-l-gold);
  --good: var(--pal-tech-l-good);
  --on-accent: var(--pal-paper);
}

:root[data-theme="tech"][data-mode="dark"] {
  --bg: var(--pal-tech-d-bg);
  --surface: var(--pal-tech-d-surface);
  --fg: var(--pal-tech-d-fg);
  --muted: var(--pal-tech-d-muted);
  --line: var(--pal-tech-d-line);
  --cover: var(--pal-tech-d-cover);
  --open: var(--pal-tech-d-open);
  --accent: var(--pal-tech-d-accent);
  --accent-2: var(--pal-tech-d-accent2);
  --flag-color: var(--pal-tech-d-flag);
  --danger: var(--pal-tech-d-danger);
  --gold: var(--pal-tech-d-gold);
  --good: var(--pal-tech-d-good);
  --on-accent: var(--pal-ink);
}

:root[data-theme="tech"][data-mode="eye"] {
  --bg: var(--pal-tech-e-bg);
  --surface: var(--pal-tech-e-surface);
  --fg: var(--pal-tech-e-fg);
  --muted: var(--pal-tech-e-muted);
  --line: var(--pal-tech-e-line);
  --cover: var(--pal-tech-e-cover);
  --open: var(--pal-tech-e-open);
  --accent: var(--pal-tech-e-accent);
  --accent-2: var(--pal-tech-e-accent2);
  --flag-color: var(--pal-tech-e-flag);
  --danger: var(--pal-tech-e-danger);
  --gold: var(--pal-tech-e-gold);
  --good: var(--pal-tech-e-good);
  --on-accent: var(--pal-paper);
}

/* ============================================================
   派生色 · 全部由语义变量混合而来
   ============================================================ */
:root {
  --surface-2: color-mix(in srgb, var(--surface) 88%, var(--bg));
  --surface-3: color-mix(in srgb, var(--surface) 72%, var(--bg));
  --cover-2: color-mix(in srgb, var(--cover) 72%, var(--line));
  --cover-3: color-mix(in srgb, var(--cover) 88%, var(--surface));
  --open-2: color-mix(in srgb, var(--open) 88%, var(--muted));
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --flag-soft: color-mix(in srgb, var(--flag-color) 16%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --good-soft: color-mix(in srgb, var(--good) 14%, transparent);
  --gold-soft: color-mix(in srgb, var(--gold) 18%, transparent);
  --grid-line: color-mix(in srgb, var(--line) 16%, transparent);
  --grid-line-strong: color-mix(in srgb, var(--line) 28%, transparent);
  --shadow: color-mix(in srgb, var(--line) 22%, transparent);
  --shadow-strong: color-mix(in srgb, var(--line) 38%, transparent);
  --shadow-soft: color-mix(in srgb, var(--line) 12%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent-2) 75%, var(--line));
  --scrim: color-mix(in srgb, var(--line) 42%, transparent);
  --field-bg: color-mix(in srgb, var(--surface) 82%, var(--bg));

  --n1: var(--accent);
  --n2: var(--good);
  --n3: var(--danger);
  --n4: color-mix(in srgb, var(--accent-2) 78%, var(--fg));
  --n5: color-mix(in srgb, var(--danger) 66%, var(--fg));
  --n6: color-mix(in srgb, var(--accent) 54%, var(--good));
  --n7: var(--fg);
  --n8: var(--muted);
}

/* ============================================================
   主题个性 · 字体 / 圆角 / 立体感
   ============================================================ */
:root[data-theme="candy"] {
  --font-display: ui-rounded, "Arial Rounded MT Bold", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --radius-card: 26px;
  --radius-panel: 20px;
  --radius-board: 18px;
  --radius-cell: 9px;
  --lift: 3px;
}

:root[data-theme="doodle"] {
  --font-display: "Comic Sans MS", "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", cursive, sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --radius-card: 22px;
  --radius-panel: 18px;
  --radius-board: 16px;
  --radius-cell: 7px;
  --lift: 2px;
}

:root[data-theme="tech"] {
  --font-display: "DIN Alternate", "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --radius-card: 18px;
  --radius-panel: 14px;
  --radius-board: 12px;
  --radius-cell: 5px;
  --lift: 1px;
}

/* 主题预览卡里的迷你棋盘，固定使用各主题亮色调色板 */
.preview-candy {
  --p-bg: var(--pal-candy-l-bg);
  --p-surface: var(--pal-candy-l-surface);
  --p-fg: var(--pal-candy-l-fg);
  --p-line: var(--pal-candy-l-line);
  --p-cover: var(--pal-candy-l-cover);
  --p-open: var(--pal-candy-l-open);
  --p-accent: var(--pal-candy-l-accent);
  --p-flag: var(--pal-candy-l-flag);
}

.preview-doodle {
  --p-bg: var(--pal-doodle-l-bg);
  --p-surface: var(--pal-doodle-l-surface);
  --p-fg: var(--pal-doodle-l-fg);
  --p-line: var(--pal-doodle-l-line);
  --p-cover: var(--pal-doodle-l-cover);
  --p-open: var(--pal-doodle-l-open);
  --p-accent: var(--pal-doodle-l-accent);
  --p-flag: var(--pal-doodle-l-flag);
}

.preview-tech {
  --p-bg: var(--pal-tech-l-bg);
  --p-surface: var(--pal-tech-l-surface);
  --p-fg: var(--pal-tech-l-fg);
  --p-line: var(--pal-tech-l-line);
  --p-cover: var(--pal-tech-l-cover);
  --p-open: var(--pal-tech-l-open);
  --p-accent: var(--pal-tech-l-accent);
  --p-flag: var(--pal-tech-l-flag);
}