/* ============================================================================
 * tokens.css — 「暖器 · 立体」设计令牌
 * ----------------------------------------------------------------------------
 * 全站唯一设计依据：DESIGN.md
 *   · 暖中性底 + 单一强调色（暖橙）+ 1px 发丝边 + 明度叠层
 *   · 立体层：接触阴影 / 环境阴影 / 顶部高光 / 内凹阴影（4 档 elevation）
 *
 * 本文件只做「变量重映射」：保留各页原有变量名，仅换取值。
 * 因此四个页面无需改结构即可整体换肤。
 *
 * 作用域约定（html 上的 data-page 由各页面声明）：
 *   data-page="home"  首页
 *   data-page="game"  斗地主
 *   data-page="mbti"  MBTI（恒为暖暗）
 *   data-page="admin" GM 后台
 * ========================================================================== */

/* ==========================================================================
   1. 基础调色板 —— 暖器
   ========================================================================== */

:root {
  /* 暖纸白（浅色）—— 中性偏冷一点点，比纯暖白更有"纸"的贵气 */
  --w-bg:            #f7f6f4;
  --w-bg-alt:        #efeeeb;
  --w-surface:       #ffffff;
  --w-surface-2:     #f5f4f2;
  --w-sunken:        #efeeeb;
  --w-ink:           #18171a;
  --w-text:          #3b3a3e;
  --w-muted:         #6c6a6e;
  --w-faint:         #8f8d90;
  --w-hair:          rgba(24, 23, 26, .10);
  --w-hair-soft:     rgba(24, 23, 26, .06);
  --w-accent:        #e06436;
  --w-accent-hi:     #f27e4e;
  --w-accent-tx:     #bc4a1e;
  --w-accent-wash:   rgba(224, 100, 54, .11);
  --w-info:          #2e609f;
  --w-ok:            #2f9e63;
  --w-warn:          #c98423;
  --w-danger:        #cf4238;

  /* 立体层次（浅色）：接触阴影 + 环境阴影，暖调偏移，绝不用纯黑 */
  --w-e1: 0 1px 1.5px rgba(26, 22, 28, .05), 0 3px 7px -3px rgba(26, 22, 28, .07);
  --w-e2: 0 1px 2px rgba(26, 22, 28, .05), 0 9px 20px -9px rgba(26, 22, 28, .16);
  --w-e3: 0 2px 4px rgba(26, 22, 28, .05), 0 20px 38px -16px rgba(26, 22, 28, .20);
  --w-e4: 0 4px 9px rgba(26, 22, 28, .06), 0 36px 62px -22px rgba(26, 22, 28, .24);
  /* 受光面 / 背光面（伪造体积） */
  --w-bevel:      inset 0 1px 0 rgba(255, 255, 255, .95);
  --w-bevel-soft: inset 0 1px 0 rgba(255, 255, 255, .62);
  --w-inset:      inset 0 1.5px 3px rgba(26, 22, 28, .075), inset 0 0 0 1px rgba(26, 22, 28, .035);
  --w-glare:      rgba(255, 255, 255, .34);
  --w-ring:       0 0 0 3px rgba(224, 100, 54, .30);
  --w-amb-1:      rgba(224, 100, 54, .13);
  --w-amb-2:      rgba(206, 146, 92, .11);
  --w-amb-3:      rgba(112, 100, 96, .07);
  --w-grid:       rgba(26, 22, 28, .045);
}

/* 暖黑（深色）—— 带一点冷调的深炭，不是 #000，也不是发黄的"复古黑" */
:root[data-theme="dark"] {
  --w-bg:            #100f13;
  --w-bg-alt:        #18171c;
  --w-surface:       #1c1b21;
  --w-surface-2:     #232228;
  --w-sunken:        #151419;
  --w-ink:           #f5f4f7;
  --w-text:          #d6d4da;
  --w-muted:         #a5a3aa;
  --w-faint:         #7b7982;
  --w-hair:          rgba(245, 244, 247, .12);
  --w-hair-soft:     rgba(245, 244, 247, .07);
  --w-accent:        #f07a4e;
  --w-accent-hi:     #f79366;
  --w-accent-tx:     #f79366;
  --w-accent-wash:   rgba(240, 122, 78, .14);
  --w-info:          #7aaaff;
  --w-ok:            #4bc286;
  --w-warn:          #e0a53f;
  --w-danger:        #ef6a5f;

  --w-e1: 0 1px 1.5px rgba(0, 0, 0, .45), 0 3px 8px -3px rgba(0, 0, 0, .38);
  --w-e2: 0 2px 4px rgba(0, 0, 0, .42), 0 12px 26px -12px rgba(0, 0, 0, .55);
  --w-e3: 0 3px 6px rgba(0, 0, 0, .45), 0 24px 46px -18px rgba(0, 0, 0, .62);
  --w-e4: 0 6px 12px rgba(0, 0, 0, .48), 0 40px 70px -26px rgba(0, 0, 0, .68);
  --w-bevel:      inset 0 1px 0 rgba(255, 255, 255, .075);
  --w-bevel-soft: inset 0 1px 0 rgba(255, 255, 255, .05);
  --w-inset:      inset 0 1.5px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04);
  --w-glare:      rgba(240, 246, 255, .07);
  --w-ring:       0 0 0 3px rgba(240, 122, 78, .34);
  --w-amb-1:      rgba(240, 122, 78, .10);
  --w-amb-2:      rgba(186, 132, 78, .085);
  --w-amb-3:      rgba(214, 226, 255, .035);
  --w-grid:       rgba(245, 244, 247, .035);
}

/* ==========================================================================
   2. 立体 / 动效 / 字体 —— 与主题无关的公共令牌
   ========================================================================== */

:root {
  --w-r-sm: 10px;
  --w-r-md: 14px;
  --w-r-lg: 18px;
  --w-r-xl: 22px;
  --w-r-2xl: 28px;
  --w-r-pill: 999px;

  --w-w-read: 400;
  --w-w-ui: 500;
  --w-w-strong: 600;
  --w-w-display: 700;

  --w-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --w-font-mono: "Fragment Mono", ui-monospace, "SF Mono", "JetBrains Mono",
                 Menlo, Consolas, "PingFang SC", monospace;

  --w-dur-1: 180ms;
  --w-dur-2: 320ms;
  --w-dur-3: 560ms;
  --w-ease: cubic-bezier(.4, 0, .2, 1);
  --w-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* 3D 舞台参数 */
  --w-persp: 1100px;
  --w-tilt-max: 6deg;

  --w-wrap: 1000px;
  --w-wrap-wide: 1240px;
  /* 分区间距：原来 clamp(72px, 9vw, 132px) 在桌面上两段之间要空 260px+，
     节奏过散。收到 clamp(56px, 6vw, 96px)（最大两段间 192px），
     仍然符合 DESIGN.md 的"留白是主要装饰"，但不再显得空。 */
  --w-sp-section: clamp(56px, 6vw, 96px);

  /* 立体组件的通用别名（depth3d.css 使用） */
  --dz-persp: var(--w-persp);
  --dz-ease: var(--w-dur-2) var(--w-ease);
  --dz-ease-out: var(--w-dur-3) var(--w-ease-out);
  --dz-glare: var(--w-glare);
}

/* ==========================================================================
   3. 页面映射 —— 首页 · 后台（共用 html[data-theme] 约定）
   ========================================================================== */

/* 浅色（默认，符合后台默认 light 与首页 data-theme="light"） */
:root,
:root[data-page="home"],
:root[data-page="treehole"],
:root[data-page="admin"] {
  --bg: var(--w-bg);
  --ink: var(--w-ink);
  --text: var(--w-text);
  --muted: var(--w-muted);

  --accent: var(--w-accent);
  --accent-2: var(--w-accent-hi);

  --glass-bg: rgba(255, 255, 255, .74);
  --glass-border: var(--w-hair);
  --glass-highlight: var(--w-bevel);
  --glass-shadow: var(--w-e2);
  --nav-bg: rgba(248, 246, 243, .72);
  --card-hover: rgba(255, 255, 255, .96);
  --btn-border: var(--w-hair);
  --radius: var(--w-r-lg);
  --blur: 20px;
  --blob-a: .42;
  --blob-b: .34;

  /* 后台专用 */
  --panel: var(--w-surface);
  --panel-2: var(--w-surface-2);
  --border: var(--w-hair);
  --primary: var(--w-accent);
  --primary-dark: #bc4a1e;
  --primary-light: #f08a5f;
  --on-primary: #ffffff;
  --text-dim: var(--w-muted);
  --text-muted: #4a494d;
  --success: var(--w-ok);
  --warning: var(--w-warn);
  --danger: var(--w-danger);
  --info: var(--w-info);
  --shadow: var(--w-e3);
  --shadow-sm: var(--w-e2);
  --header-bg: rgba(248, 246, 243, .86);
}

/* 深色 */
:root[data-theme="dark"] {
  --bg: var(--w-bg);
  --ink: var(--w-ink);
  --text: var(--w-text);
  --muted: var(--w-muted);

  --accent: var(--w-accent);
  --accent-2: var(--w-accent-hi);

  --glass-bg: rgba(38, 33, 30, .60);
  --glass-border: var(--w-hair);
  --glass-highlight: var(--w-bevel);
  --glass-shadow: var(--w-e3);
  --nav-bg: rgba(20, 17, 16, .68);
  --card-hover: rgba(50, 44, 40, .74);
  --btn-border: var(--w-hair);
  --blob-a: .5;
  --blob-b: .38;

  --panel: var(--w-surface);
  --panel-2: var(--w-bg-alt);
  --on-primary: #ffffff;
  --text-muted: #c9c3bc;
  --header-bg: rgba(20, 17, 16, .88);
}

/* ==========================================================================
   4. 页面映射 —— MBTI（恒为暖暗，与首页深色同源）
   ========================================================================== */

:root[data-page="mbti"] {
  --bg: #100f13;
  --card: rgba(245, 244, 247, .05);
  --card-hover: rgba(245, 244, 247, .08);
  --border: rgba(245, 244, 247, .11);
  --text: #f0eff3;
  --muted: #a5a3aa;
  --accent: #f07a4e;
  --accent-2: #f7a86a;
  --grad: linear-gradient(135deg, #f07a4e 0%, #f7a86a 100%);
  --radius: var(--w-r-md);

  /* 供 depth3d.css 复用的暗色立体参数 */
  --w-surface: #1c1b21;
  --w-surface-2: #232228;
  --w-hair: rgba(245, 244, 247, .12);
  --w-ink: #f5f4f7;
  --w-bevel: inset 0 1px 0 rgba(255, 255, 255, .075);
  --w-glare: rgba(240, 246, 255, .075);
  --w-e1: 0 1px 1.5px rgba(0, 0, 0, .45), 0 3px 8px -3px rgba(0, 0, 0, .38);
  --w-e2: 0 2px 4px rgba(0, 0, 0, .42), 0 12px 26px -12px rgba(0, 0, 0, .55);
  --w-e3: 0 3px 6px rgba(0, 0, 0, .45), 0 24px 46px -18px rgba(0, 0, 0, .62);
  --w-ring: 0 0 0 3px rgba(240, 122, 78, .34);
}

/* MBTI 浅色：与首页的"影棚白"同一族，这样从首页切到白天再进 MBTI 不会突然变黑 */
:root[data-page="mbti"][data-theme="light"] {
  --bg: #fbfbfd;
  --card: rgba(255, 255, 255, .78);
  --card-hover: rgba(255, 255, 255, .96);
  --border: rgba(11, 11, 13, .10);
  --text: #1d1c21;
  --muted: #6e6e78;
  --accent: #ff5a1f;
  --accent-2: #ff7a3d;
  --grad: linear-gradient(135deg, #ff5a1f 0%, #ff7a3d 100%);

  --w-surface: #ffffff;
  --w-surface-2: #f4f2f7;
  --w-sunken: #f1eff4;
  --w-ink: #0b0b0d;
  --w-text: #3a3a42;
  --w-muted: #6e6e78;
  --w-faint: #9a9aa4;
  --w-hair: rgba(11, 11, 13, .10);
  --w-hair-soft: rgba(11, 11, 13, .055);
  --w-accent: #ff5a1f;
  --w-accent-hi: #ff7a3d;
  --w-accent-tx: #c2471a;
  --w-accent-wash: rgba(255, 90, 31, .10);
  --w-glare: rgba(255, 255, 255, .55);
  --w-bevel: inset 0 1px 0 rgba(255, 255, 255, .95);
  --w-bevel-soft: inset 0 1px 0 rgba(255, 255, 255, .7);
  --w-inset: inset 0 1.5px 3px rgba(24, 18, 30, .07), inset 0 0 0 1px rgba(24, 18, 30, .035);
  --w-ring: 0 0 0 3px rgba(255, 90, 31, .30);
  --w-e1: 0 1px 2px rgba(24, 18, 30, .05), 0 3px 8px -3px rgba(24, 18, 30, .07);
  --w-e2: 0 1px 3px rgba(24, 18, 30, .05), 0 10px 24px -10px rgba(24, 18, 30, .14);
  --w-e3: 0 2px 5px rgba(24, 18, 30, .06), 0 22px 44px -18px rgba(24, 18, 30, .18);
}

/* ==========================================================================
   5. 页面映射 —— 斗地主（保留四套皮肤与绒布桌识别度，只做加深与暖化）
   ========================================================================== */

/* 经典：绿绒 */
:root[data-page="game"] {
  --bg: #0d1b13;
  --bg2: #14301e;
  --table: #2b6848;
  --table-dark: #163c27;
  --gold: #f0a95e;
  --gold-light: #ffd9a3;
  --gold-dark: #c9782f;
  --card-bg: #fffdf5;
  --card-bg2: #f2ebd9;
  --text: #f6f2e9;
  --text-dim: #b6c2b4;
  --green: #43c07a;
  --red: #e5544a;
  --radius: var(--w-r-md);
  --shadow: 0 4px 10px rgba(0, 0, 0, .34), 0 20px 40px -16px rgba(0, 0, 0, .5);

  /* 游戏页是深色界面，必须把 depth3d.css 用到的 --w-* 也切到暗色一套 ——
     否则滚动条、toast 这些"只在新层里定义"的组件会拿到浅色默认值，
     在深绿桌面上变成近黑半透明（手牌区滚动条几乎看不见）。 */
  --w-ink:           #f6f4f7;
  --w-text:          #d8d6dc;
  --w-muted:         #a9a7ae;
  --w-hair:          rgba(255, 255, 255, .14);
  --w-hair-soft:     rgba(255, 255, 255, .07);
  --w-surface:       color-mix(in srgb, var(--bg2) 86%, #ffffff 4%);
  --w-surface-2:     var(--bg2);
  --w-sunken:        var(--bg);
  --w-bevel:         inset 0 1px 0 rgba(255, 255, 255, .08);
  --w-bevel-soft:    inset 0 1px 0 rgba(255, 255, 255, .05);
  --w-inset:         inset 0 1.5px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04);
  --w-glare:         rgba(255, 255, 255, .08);
  --w-accent:        var(--gold);
  --w-accent-hi:     var(--gold-light);
  --w-accent-tx:     var(--gold-light);
  --w-accent-wash:   color-mix(in srgb, var(--gold) 14%, transparent);
  --w-ring:          0 0 0 3px color-mix(in srgb, var(--gold) 32%, transparent);
  --w-e1: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 8px -3px rgba(0, 0, 0, .45);
  --w-e2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 26px -12px rgba(0, 0, 0, .6);
  --w-e3: 0 3px 6px rgba(0, 0, 0, .48), 0 24px 46px -18px rgba(0, 0, 0, .65);
  --w-e4: 0 6px 12px rgba(0, 0, 0, .5), 0 40px 70px -26px rgba(0, 0, 0, .7);
}
html[data-page="game"] body[data-theme="ocean"] {
  --bg: #0c1620;
  --bg2: #13293a;
  --table: #2a6885;
  --table-dark: #164257;
  --gold: #f0b072;
  --gold-light: #ffdcaa;
  --gold-dark: #c8823c;
  --text-dim: #b0c0c9;
}
html[data-page="game"] body[data-theme="red"] {
  --bg: #1c0f0d;
  --bg2: #331a15;
  --table: #8c3a2c;
  --table-dark: #5e241a;
  --gold: #f5bd63;
  --gold-light: #ffe1a8;
  --gold-dark: #cf8f2a;
  --text-dim: #c9b3a6;
}
html[data-page="game"] body[data-theme="purple"] {
  --bg: #150f1c;
  --bg2: #251a33;
  --table: #5f4a86;
  --table-dark: #3b2c58;
  --gold: #e9a86a;
  --gold-light: #ffd8ab;
  --gold-dark: #bf7f36;
  --text-dim: #bcb0c6;
}