/* ══════════════════════════════════════════════════════════
   tokens.css — 设计令牌（全站唯一的一份）
   ──────────────────────────────────────────────────────────
   为什么要有这个文件：
     原来 121 个变量散在 7 个 :root 里，名字是「颜色名」（pink-sakura、
     blue-accent），换一套配色得全站搜；浅色主题靠 346 条 body.theme-light
     覆盖硬顶，每加一个组件都要写两遍样式。
   这里换成两层：
     · 基色（--c-*）：调色板，组件里不直接用
     · 语义令牌（surface / text / accent 这一层）：组件只认它
   换主题＝重新定义语义令牌，不需要再写覆盖规则。
   app/base.css 里那批老变量名（--glass-bg、--text-main …）已经改成
   引用这一层，所以老代码原样能跑。

   加载顺序：必须排在所有其它样式表前面。
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── 基色：樱花粉 / 夜紫 / 辅助色 ───────────────────── */
  --c-sakura-100: #ffeef3;
  --c-sakura-200: #ffdee9;
  --c-sakura-300: #ffb7c5;
  --c-sakura-400: #ff8fb3;
  --c-sakura-500: #ff69b4;
  --c-sakura-600: #e8507a;
  --c-sakura-700: #c0305a;
  --c-night-900: #04061a;
  --c-night-800: #0a0718;
  --c-night-700: #0e0828;
  --c-night-600: #180618;
  --c-ink-100: #f1f5f9;
  --c-ink-300: #cbd5e1;
  --c-ink-400: #94a3b8;
  --c-ink-600: #64748b;
  --c-sky-400: #38bdf8;
  --c-gold-400: #fcd34d;
  --c-mint-400: #4ade80;
  --c-rose-400: #f87171;

  /* ── 语义：表面 ─────────────────────────────────────
     0 = 页面底色，1 = 卡片，2 = 浮层（面板/抽屉），3 = 弹窗
     层数越高越不透明：叠玻璃时才看得清内容                */
  --surface-0: var(--c-night-900);
  --surface-1: rgba(10, 15, 35, .55);
  --surface-2: rgba(14, 10, 30, .72);
  --surface-3: rgba(16, 11, 32, .88);
  --surface-raised: rgba(255, 255, 255, .06);   /* 表面之上的小块（chip、输入框） */
  --surface-sunken: rgba(0, 0, 0, .18);         /* 凹进去的槽（进度条底、代码块） */

  /* ── 语义：描边 ───────────────────────────────────── */
  --border-subtle: rgba(255, 183, 197, .15);
  --border-strong: rgba(255, 183, 197, .30);
  --border-hairline: rgba(255, 255, 255, .10);

  /* ── 语义：文字 ─────────────────────────────────────
     1 = 正文，2 = 次要，3 = 辅助（注意：3 也必须过 4.5:1） */
  --text-1: #f1f5f9;
  --text-2: #b6c2d4;
  --text-3: #8b98ac;
  --text-on-accent: #2a0d18;

  /* ── 语义：强调色与状态 ───────────────────────────── */
  --accent: var(--c-sakura-300);
  --accent-strong: var(--c-sakura-600);
  --accent-soft: rgba(255, 183, 197, .14);
  --info: var(--c-sky-400);
  --success: var(--c-mint-400);
  --warn: var(--c-gold-400);
  --danger: var(--c-rose-400);
  --state-hover: rgba(255, 255, 255, .07);
  --state-active: rgba(255, 255, 255, .12);
  --state-selected: rgba(255, 183, 197, .18);
  --state-disabled-opacity: .45;

  /* ── 焦点环：键盘可达性，全站统一一种 ───────────────── */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--c-sakura-400);
  --focus-ring-inset: inset 0 0 0 2px var(--c-sakura-400);

  /* ── 玻璃三档 ───────────────────────────────────────
     同一块区域里只许模糊一次：底层壁纸 → 卡片 → 弹层，
     叠加超过两层时视觉上没收益，只有 GPU 开销           */
  --blur-page: 24px;
  --blur-card: 12px;
  --blur-pop: 8px;
  --glass-page: blur(var(--blur-page)) saturate(140%);
  --glass-card: blur(var(--blur-card)) saturate(130%);
  --glass-pop: blur(var(--blur-pop)) saturate(120%);

  /* ── 阴影（elevation）───────────────────────────────── */
  --el-1: 0 2px 8px rgba(0, 0, 0, .28);
  --el-2: 0 8px 32px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 183, 197, .08);
  --el-3: 0 16px 48px rgba(0, 0, 0, .50), 0 0 0 1px rgba(255, 183, 197, .20);
  --el-glow: 0 0 24px rgba(255, 105, 180, .25);

  /* ── 间距：4px 基准 ─────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── 圆角 ───────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ── 动效：四档时长 + 三条曲线 ───────────────────────── */
  --dur-1: 120ms;   /* 按下/悬停这种即时反馈 */
  --dur-2: 200ms;   /* 小面板展开、切换       */
  --dur-3: 320ms;   /* 弹窗进出              */
  --dur-4: 500ms;   /* 整页转场、主题切换      */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── 字体 ───────────────────────────────────────────
     显示字体优先用自托管的 Sakura Digits（assets/fonts/，没上传时
     自动回退到系统等宽）。数字一律 tabular-nums，秒数跳动时不左右抖 */
  --font-display: 'Sakura Digits', 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', sans-serif;
  --font-num: var(--font-display);

  /* ── 层级表 ─────────────────────────────────────────
     数值沿用现状，只是给了名字：以后要盖住什么，查这张表，
     别再「加个 9」。新代码一律用变量。                    */
  --z-below: -1;
  --z-base: 1;
  --z-deco: 55;        /* 樱花 / 天空这类装饰层 */
  --z-sticky: 100;     /* 吸顶栏 */
  --z-nav: 200;        /* 导航与下拉 */
  --z-panel: 1000;     /* 侧栏、抽屉 */
  --z-float: 2000;     /* 悬浮窗、迷你时钟 */
  --z-game: 8000;      /* 掌机弹窗 */
  --z-game-center: 8500;
  --z-board: 10800;    /* 棋牌房间 */
  --z-board-mask: 11000;
  --z-picker: 11800;   /* 邀请好友这类选择器 */
  --z-pop: 11900;      /* 邀请弹卡、气泡 */
  --z-wall: 99999;     /* 登录墙、拖拽幽灵 */
  --z-viewer: 100000;  /* 图片查看器 */
  --z-modal: 100050;   /* 独立弹窗（找回密码、倒数日）*/
  --z-stage: 100070;   /* 沉浸式全屏页 */
  --z-toast: 2147483000;   /* 封禁提示 */
  --z-banner: 2147483500;  /* 维护横幅 */
  --z-blocker: 2147483600; /* 维护遮罩：必须盖住一切 */
}

/* ══ 浅色：只重新定义语义令牌，不再写组件覆盖 ══════════════ */
body.theme-light {
  --surface-0: #f4e8f0;
  --surface-1: rgba(255, 235, 245, .82);
  --surface-2: rgba(255, 240, 248, .90);
  --surface-3: rgba(255, 245, 250, .96);
  --surface-raised: rgba(150, 60, 100, .06);
  --surface-sunken: rgba(150, 60, 100, .10);

  --border-subtle: rgba(210, 80, 120, .28);
  --border-strong: rgba(210, 80, 120, .48);
  --border-hairline: rgba(120, 40, 80, .14);

  --text-1: #2a1520;
  --text-2: #6b3550;
  --text-3: #8a5570;
  --text-on-accent: #fff;

  --accent: var(--c-sakura-700);
  --accent-strong: var(--c-sakura-600);
  --accent-soft: rgba(210, 80, 120, .12);
  --state-hover: rgba(150, 60, 100, .07);
  --state-active: rgba(150, 60, 100, .13);
  --state-selected: rgba(210, 80, 120, .16);

  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--c-sakura-600);
  --el-1: 0 2px 8px rgba(180, 80, 120, .12);
  --el-2: 0 6px 24px rgba(180, 80, 120, .18), 0 0 0 1.5px rgba(220, 100, 140, .30);
  --el-3: 0 12px 40px rgba(180, 80, 120, .24), 0 0 0 1.5px rgba(220, 100, 140, .40);
  --el-glow: 0 0 24px rgba(210, 80, 120, .18);
}

/* ══ 跟随系统：body.theme-auto 时由系统深浅色决定 ══════════ */
@media (prefers-color-scheme: light) {
  body.theme-auto {
    --surface-0: #f4e8f0;
    --surface-1: rgba(255, 235, 245, .82);
    --surface-2: rgba(255, 240, 248, .90);
    --surface-3: rgba(255, 245, 250, .96);
    --surface-raised: rgba(150, 60, 100, .06);
    --surface-sunken: rgba(150, 60, 100, .10);
    --border-subtle: rgba(210, 80, 120, .28);
    --border-strong: rgba(210, 80, 120, .48);
    --border-hairline: rgba(120, 40, 80, .14);
    --text-1: #2a1520;
    --text-2: #6b3550;
    --text-3: #8a5570;
    --text-on-accent: #fff;
    --accent: var(--c-sakura-700);
    --accent-strong: var(--c-sakura-600);
    --accent-soft: rgba(210, 80, 120, .12);
    --state-hover: rgba(150, 60, 100, .07);
    --state-active: rgba(150, 60, 100, .13);
    --state-selected: rgba(210, 80, 120, .16);
    --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--c-sakura-600);
    --el-1: 0 2px 8px rgba(180, 80, 120, .12);
    --el-2: 0 6px 24px rgba(180, 80, 120, .18), 0 0 0 1.5px rgba(220, 100, 140, .30);
    --el-3: 0 12px 40px rgba(180, 80, 120, .24), 0 0 0 1.5px rgba(220, 100, 140, .40);
    --el-glow: 0 0 24px rgba(210, 80, 120, .18);
  }
}

/* ══ 性能档：低端设备自动降级（core.js 按硬件情况打在 <html> 上）══
   模糊最贵，先砍它；其次是多层阴影 */
html.perf-low {
  --blur-page: 10px;
  --blur-card: 6px;
  --blur-pop: 0px;
  --el-2: 0 4px 16px rgba(0, 0, 0, .40);
  --el-3: 0 8px 24px rgba(0, 0, 0, .50);
  --el-glow: none;
}
html.perf-low .lk-glass,
html.perf-low .pc-card,
html.perf-low .card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ══ 数字统一等宽：时钟、比分、倒计时跳动时不左右抖 ══════════ */
.time-display, .tz-time, .cd-num, .pomo-time, .sw-time,
.lb-score, .gc-stat b, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ══ 焦点环：键盘用户看得见，鼠标用户不受打扰 ══════════════
   只给按钮和链接这类「本来什么都没有」的元素补。
   输入框一律不碰 —— 登录框是下划线高亮、个人中心是描边加光晕，
   各自都有自己的焦点样式，再套一层方框只会变丑。
   也不要在这里改 border-radius：胶囊按钮会被压成圆角矩形。 */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}