/* ============================================================
   跃界 (LeapZone) · 公共设计基线
   ------------------------------------------------------------
   「国风暖纸」统一设计令牌源（前端精修 v2）：
   门户 / 统一登录 / 团队协作 / 数据维护 / 任务统计共用。
   游戏页（games.css / mobile-header.css）不加载本文件，互不影响。

   本文件只承载三样东西：
   1) 全局 reset；2) 设计令牌(:root) 与旧变量名兼容别名；
   3) 正文默认字体/墨色/纸底与基础可访问性焦点环。
   页面级布局与组件样式仍在 components.css 与各自页面 CSS 中，
   页面级差异（如不同的 --bg）在页面自己的 :root 中覆盖即可。
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    /* ---------- 纸 / 墨（暖纸底色阶 + 墨色文字阶） ---------- */
    --paper: #f4ecd8;          /* 主纸底 */
    --paper-deep: #ece0c4;     /* 深一阶纸面（分区/凹槽） */
    --paper-card: #fffaf0;     /* 卡片纸面 */
    --paper-warm: #faf3e2;     /* 浅暖衬底（hover/条纹） */

    --ink: #2a2418;            /* 主墨色：标题/正文 */
    --ink-2: #4a3f2e;          /* 次级文字 */
    --ink-3: #73654d;          /* 辅助说明 */
    --ink-4: #9e927a;          /* 占位/禁用 */
    --on-color: #fffaf0;       /* 深底色上的文字色 */

    /* ---------- 棕金（品牌强调） ---------- */
    --brown: #8b4513;
    --brown-deep: #6f3610;
    --brown-soft: #a8632a;
    --gold: #c9963a;
    --gold-light: #dfb96a;
    --gold-pale: rgba(201, 150, 58, .14);

    /* ---------- 语义色 ---------- */
    --jade: #4a7c59;           /* 成功（国风松石绿） */
    --jade-deep: #3a6347;
    --jade-pale: rgba(74, 124, 89, .12);
    --persimmon: #d07c2a;      /* 警示（柿橙） */
    --persimmon-deep: #a85f18;
    --persimmon-pale: rgba(208, 124, 42, .12);
    --seal: #b23a2e;           /* 危险/印章红 */
    --seal-deep: #8f2d23;
    --seal-pale: rgba(178, 58, 46, .12);
    --info: #7a6238;           /* 信息（暖棕） */
    --info-pale: rgba(122, 98, 56, .12);

    /* ---------- 描边 / 分隔 ---------- */
    --line: #d8c9a4;
    --line-soft: #e8dcc0;
    --line-faint: #f0e7d2;

    /* ---------- 字号阶（px，rem 不引入以避免级联风险） ---------- */
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;   /* 移动端输入下限 */
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-34: 34px;
    --lh-tight: 1.3;
    --lh-normal: 1.55;
    --lh-relax: 1.75;

    /* ---------- 间距阶（4px 基准） ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-8: 48px;

    /* ---------- 圆角阶 ---------- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* ---------- 阴影三级（暖墨投影） ---------- */
    --shadow-sm: 0 1px 2px rgba(60, 42, 20, .05), 0 2px 8px rgba(60, 42, 20, .05);
    --shadow-md: 0 4px 12px rgba(60, 42, 20, .08), 0 10px 28px rgba(60, 42, 20, .08);
    --shadow-lg: 0 12px 32px rgba(44, 36, 22, .16), 0 24px 64px rgba(44, 36, 24, .24);
    --shadow-inset: inset 0 1px 2px rgba(60, 42, 20, .08);
    --ring: 0 0 0 3px rgba(201, 150, 58, .28);   /* 焦点环 */

    /* ---------- 动效 ---------- */
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 280ms;
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.45, 0, .25, 1);

    /* ---------- 层级 ---------- */
    --z-sticky: 30;
    --z-topbar: 40;
    --z-dropdown: 45;
    --z-sheet: 60;
    --z-modal: 100;
    --z-toast: 200;
    --z-lightbox: 300;

    /* ---------- 触控 / 安全区 ---------- */
    --touch: 44px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-serif: 'STKaiti', 'KaiTi', 'SimSun', serif;

    /* ============================================================
       旧变量名兼容别名（M4-A 及各模块既有代码继续使用，勿删）
       ============================================================ */
    --primary: var(--brown);
    --primary-dark: var(--brown-deep);
    --primary-light: var(--gold);
    --accent: var(--brown);
    --success: var(--jade);
    --warn: var(--persimmon);
    --warning: var(--persimmon);
    --danger: var(--seal);
    --text: var(--ink);
    --text-light: var(--ink-3);
    --border: var(--line);
    --bg: var(--paper);
    --bg-card: var(--paper-card);
    --bg-hover: var(--paper-warm);
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 键盘焦点可见环（鼠标点击不触发 :focus-visible） */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* 选区色 */
::selection { background: var(--gold-pale); color: var(--ink); }

/* ============================================================
   移动端：抑制浏览器「左右滑动 = 后退 / 前进」手势
   1) 根元素禁止横向过滚动 —— 滚动链在根上终止，不再把手势交给浏览器；
   2) 任意元素上的横向过滚动不向外传递 —— 表格等内部横向滚动照常可用，
      但滚到边界后也不会误触发页面前进 / 后退；
   3) 窄屏下页面本身不产生横向平移（横向滚动交给内部容器），
      用 clip 而非 hidden：不生成滚动容器，不影响 position: sticky。
   ============================================================ */
html, body { overscroll-behavior-x: none; }
* { overscroll-behavior-x: contain; }

@media (max-width: 820px) {
    html, body { overflow-x: hidden; overflow-x: clip; }
}