/* =============================================================
   棋友对弈 · 多主题设计令牌 (Design Tokens)
   作者：UI Designer
   用法：在根节点（<html> 或容器）设置 data-theme="<名称>" 即可换肤。
   组件样式只消费这些令牌，不写死颜色，便于整体换肤与扩展。
   全部颜色对比度满足 WCAG AA（正文 4.5:1 / 大字 3:1）。
   ============================================================= */

/* ---------- 共享基础令牌（几何/动效/层级，不随主题变） ---------- */
:root {
  /* 间距 8pt 体系 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* 字号 */
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

  /* 字重 */
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

  /* 动效 */
  --t-fast: 120ms ease; --t-normal: 220ms ease; --t-slow: 380ms cubic-bezier(.2,.7,.3,1);

  /* 层级（阴影颜色由各主题给 --shadow-color 控制） */
  --z-toast: 80; --z-sticky: 60;

  /* 通用字体（组件可再覆盖 --font-display / --font-ui） */
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-ui: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   1. 木色古风（默认，精修现有宣纸/墨褐/朱红）
   ============================================================ */
[data-theme="wood"] {
  --bg: #f3ecdd;
  --bg-grad: none;
  --surface: #fbf6ec;
  --surface-2: #f3ead8;
  --text: #3a2f22;
  --text-2: #6b5c47;
  --text-3: #a2937e;
  --line: #e3d7c2;
  --line-strong: #d8c8ac;
  --primary: #c0392b;
  --primary-hover: #a93226;
  --primary-contrast: #fff8f2;
  --accent: #b8860b;
  --success: #2e7d32;
  --warning: #c77c1e;
  --danger: #c0392b;
  --ring: rgba(192,57,43,.35);
  --shadow-color: 60,40,20;       /* rgb，供阴影透明度使用 */
  --shadow-sm: 0 1px 2px rgba(60,40,20,.10);
  --shadow-md: 0 6px 16px -6px rgba(60,40,20,.22);
  --shadow-lg: 0 18px 40px -16px rgba(60,40,20,.30);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-ui: var(--font-ui);
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #2c2418;
  --header-fg: #f3e7d3;
  --header-bg-2: #3d3122;

  --header-accent: #ffd479;

  --info: #3f6fd0;
  --info-hover: #2f57a8;

  --header-fg-2: #cbbb9f;
}

/* ============================================================
   2. 青色古风（汝窑天青 / 月白 / 黛青）
   ============================================================ */
[data-theme="cyan"] {
  --bg: #e9f1ee;
  --bg-grad: none;
  --surface: #f6faf8;
  --surface-2: #e4efe9;
  --text: #233634;
  --text-2: #44605c;
  --text-3: #7d9691;
  --line: #cfe0db;
  --line-strong: #b6cfc8;
  --primary: #2b6f64;
  --primary-hover: #205850;
  --primary-contrast: #f2f9f6;
  --accent: #2c5f8a;             /* 青花蓝 */
  --success: #2e7d32;
  --warning: #b07d1e;
  --danger: #b3473a;
  --ring: rgba(43,111,100,.35);
  --shadow-color: 30,60,55;
  --shadow-sm: 0 1px 2px rgba(30,60,55,.10);
  --shadow-md: 0 6px 16px -6px rgba(30,60,55,.20);
  --shadow-lg: 0 18px 40px -16px rgba(30,60,55,.28);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #1f3b38;
  --header-fg: #e7f4f0;
  --header-bg-2: #2b4f4a;

  --header-accent: #a9ecdd;

  --info: #2c5f8a;
  --info-hover: #22506f;

  --header-fg-2: #a9c6bf;
}

/* ============================================================
   3. 暮山紫古风（传统色：暮山紫 / 藕白）
   ============================================================ */
[data-theme="purple"] {
  --bg: #f1ecf3;
  --bg-grad: none;
  --surface: #faf7fc;
  --surface-2: #ece4f2;
  --text: #3a2f44;
  --text-2: #5f5270;
  --text-3: #9c8fb0;
  --line: #e2d9ec;
  --line-strong: #d0c2df;
  --primary: #6a4c93;
  --primary-hover: #553c7a;
  --primary-contrast: #f6f2fb;
  --accent: #8a6db5;
  --success: #2e7d4f;
  --warning: #b07d1e;
  --danger: #b3476a;
  --ring: rgba(106,76,147,.35);
  --shadow-color: 60,40,80;
  --shadow-sm: 0 1px 2px rgba(60,40,80,.10);
  --shadow-md: 0 6px 16px -6px rgba(60,40,80,.20);
  --shadow-lg: 0 18px 40px -16px rgba(60,40,80,.28);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #2f2740;
  --header-fg: #efe8f7;
  --header-bg-2: #3d3355;

  --header-accent: #e3d2f7;

  --info: #6d5bb5;
  --info-hover: #574a95;

  --header-fg-2: #bdb0cf;
}

/* ============================================================
   4. 现代暗色（近黑 + 靛蓝）
   ============================================================ */
[data-theme="dark"] {
  --bg: #0e1014;
  --bg-grad: none;
  --surface: #171a21;
  --surface-2: #1f232c;
  --text: #e8eaed;
  --text-2: #b3b8c2;
  --text-3: #7e858f;
  --line: #2a2f3a;
  --line-strong: #363c49;
  --primary: #6366f1;
  --primary-hover: #7c7ff5;
  --primary-contrast: #ffffff;
  --accent: #22d3ee;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --ring: rgba(99,102,241,.45);
  --shadow-color: 0,0,0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 20px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 22px 48px -18px rgba(0,0,0,.7);
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 999px;
  --font-display: "Inter", var(--font-ui);
  --font-ui: var(--font-ui);
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #0b0d11;
  --header-fg: #e8eaed;
  --header-bg-2: #151922;

  --header-accent: #8ab4ff;

  --info: #6366f1;
  --info-hover: #4f52e0;

  --header-fg-2: #9aa1ad;
}

/* ============================================================
   5. 现代亮色（纯白 + 蓝）
   ============================================================ */
[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --text: #16181d;
  --text-2: #525866;
  --text-3: #8a909c;
  --line: #e7e9ee;
  --line-strong: #d7dbe2;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-contrast: #ffffff;
  --accent: #0ea5e9;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --ring: rgba(37,99,235,.35);
  --shadow-color: 30,40,70;
  --shadow-sm: 0 1px 2px rgba(30,40,70,.08);
  --shadow-md: 0 8px 20px -10px rgba(30,40,70,.18);
  --shadow-lg: 0 22px 48px -20px rgba(30,40,70,.22);
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 999px;
  --font-display: "Inter", var(--font-ui);
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #ffffff;
  --header-fg: #1f2937;
  --header-bg-2: #f3f4f6;

  --header-accent: #1d4ed8;

  --info: #2563eb;
  --info-hover: #1d4ed8;

  --header-fg-2: #6b7280;
}

/* ============================================================
   6. 液态玻璃（极光渐变 + 磨砂通透）
   ============================================================ */
[data-theme="glass"] {
  --bg: linear-gradient(135deg, #6a82fb 0%, #a16ae0 38%, #fc5c9c 68%, #29c2ff 100%);
  --bg-grad: linear-gradient(135deg, #6a82fb 0%, #a16ae0 38%, #fc5c9c 68%, #29c2ff 100%);
  --surface: rgba(255,255,255,.55);
  --surface-2: rgba(255,255,255,.38);
  --text: #18233b;
  --text-2: #3b4a66;
  --text-3: #5d6c86;
  --line: rgba(255,255,255,.55);
  --line-strong: rgba(255,255,255,.75);
  --primary: #4f3ce0;
  --primary-hover: #3f2fc4;
  --primary-contrast: #ffffff;
  --accent: #d63b9c;
  --success: #1f9d57;
  --warning: #c98a14;
  --danger: #d83a5e;
  --ring: rgba(255,255,255,.6);
  --shadow-color: 80,60,160;
  --shadow-sm: 0 2px 8px rgba(80,60,160,.18);
  --shadow-md: 0 10px 30px -10px rgba(80,60,160,.35);
  --shadow-lg: 0 26px 60px -20px rgba(80,60,160,.45);
  --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-pill: 999px;
  --font-display: "Inter", var(--font-ui);
  --glass-blur: 18px;
  --surface-alpha: .55;
  --glass-highlight: rgba(255,255,255,.7);

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #2a2140;
  --header-fg: #f4efff;
  --header-bg-2: #372b52;

  --header-accent: #e8d4ff;

  --info: #7b6cf0;
  --info-hover: #6355d8;

  --header-fg-2: #cdbde8;
}

/* ============================================================
   7. 樱粉柔光（樱白 + 樱粉，柔和粉彩）
   ============================================================ */
[data-theme="sakura"] {
  --bg: #fdf2f6;
  --bg-grad: none;
  --surface: #fff8fb;
  --surface-2: #fce9f1;
  --text: #44323c;
  --text-2: #7a6470;
  --text-3: #b39aa8;
  --line: #f3dde6;
  --line-strong: #ecc9d8;
  --primary: #d6497e;
  --primary-hover: #c23d70;
  --primary-contrast: #fff5f9;
  --accent: #5bb6a6;             /* 薄荷点缀 */
  --success: #2e9e6b;
  --warning: #d99a1e;
  --danger: #d6497e;
  --ring: rgba(214,73,126,.35);
  --shadow-color: 180,90,130;
  --shadow-sm: 0 1px 2px rgba(180,90,130,.10);
  --shadow-md: 0 8px 20px -10px rgba(180,90,130,.22);
  --shadow-lg: 0 22px 48px -20px rgba(180,90,130,.26);
  --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-pill: 999px;
  --font-display: "Quicksand", "PingFang SC", var(--font-ui);
  --glass-blur: 0px;
  --surface-alpha: 1;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #4a2b3a;
  --header-fg: #fdeef4;
  --header-bg-2: #5c3648;

  --header-accent: #ffd2e4;

  --info: #c26ab0;
  --info-hover: #a75495;

  --header-fg-2: #e6bfd2;
}

/* ============================================================
   8. 赛博霓虹（深空 + 青/品红霓虹）
   ============================================================ */
[data-theme="cyber"] {
  --bg: #07070d;
  --bg-grad: radial-gradient(120% 120% at 80% -10%, rgba(255,43,214,.18), transparent 55%),
             radial-gradient(120% 120% at 0% 110%, rgba(0,240,255,.18), transparent 55%);
  --surface: rgba(15,16,28,.85);
  --surface-2: rgba(22,24,40,.9);
  --text: #e6f7ff;
  --text-2: #9fb6c9;
  --text-3: #6c7d90;
  --line: rgba(0,240,255,.22);
  --line-strong: rgba(255,43,214,.35);
  --primary: #00f0ff;
  --primary-hover: #4ff7ff;
  --primary-contrast: #04141a;    /* 霓虹按钮用深色字保证对比度 */
  --accent: #ff2bd6;
  --success: #2bffb0;
  --warning: #ffd23f;
  --danger: #ff4d6d;
  --ring: rgba(0,240,255,.5);
  --shadow-color: 0,240,255;
  --shadow-sm: 0 0 0 1px rgba(0,240,255,.18);
  --shadow-md: 0 0 22px -4px rgba(0,240,255,.45);
  --shadow-lg: 0 0 40px -6px rgba(255,43,214,.4);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --font-display: "Rajdhani", "Segoe UI", var(--font-ui);
  --glass-blur: 0px;
  --surface-alpha: .85;

  /* 顶栏专用：与 --surface 区分，保证品牌区在任何主题下都成立 */
  --header-bg: #060a12;
  --header-fg: #00f0ff;
  --header-bg-2: #0b1220;

  --header-accent: #00f0ff;

  --info: #00c2ff;
  --info-hover: #0098cc;

  --header-fg-2: #7fa8c4;
}