/*
 * Kine 设计 token（网页端）
 *
 * 权威定义在 client/src/shared/tokens.ts（App 端使用 TS 对象）。
 * 两个仓库分开后这里是一份拷贝，改动时两边一起改。
 * 网页端 M2 重做时会把这些变量接进样式表；当前 index.html 里的 :root 仍是无前缀变量，
 * 等 M2 统一替换，避免两套变量并存。
 */

:root {
  /* ── 颜色 ───────────────────────────── */
  --kine-bg: #f4f6fa;
  --kine-surface: #ffffff;
  --kine-surface-muted: #edf1f7;
  --kine-surface-sunken: #e7ecf4;
  --kine-line: #e2e8f1;
  --kine-line-soft: #eef2f8;
  --kine-ink: #0f1b2d;
  --kine-ink-card: #111d30;
  --kine-ink-muted: #5b6779;
  --kine-ink-soft: #94a0b2;
  --kine-on-ink: #ffffff;
  --kine-on-ink-muted: rgba(255, 255, 255, 0.66);
  --kine-accent: #1877f7;
  --kine-accent-deep: #0b5fd0;
  --kine-accent-soft: #eaf2ff;
  --kine-accent-line: #c6ddff;
  --kine-ok: #12845c;
  --kine-ok-soft: #e6f5ee;
  --kine-warn: #b87a12;
  --kine-warn-soft: #fbf1de;
  --kine-bad: #c94a45;
  --kine-bad-soft: #fbeceb;
  --kine-stage: #0a1220;
  --kine-overlay: rgba(10, 18, 32, 0.55);

  /* ── 圆角 ───────────────────────────── */
  --kine-radius-xs: 8px;
  --kine-radius-sm: 12px;
  --kine-radius-md: 16px;
  --kine-radius-lg: 20px;
  --kine-radius-xl: 26px;
  --kine-radius-pill: 999px;

  /* ── 间距 ───────────────────────────── */
  --kine-space-xxs: 2px;
  --kine-space-xs: 4px;
  --kine-space-sm: 8px;
  --kine-space-md: 12px;
  --kine-space-lg: 16px;
  --kine-space-xl: 20px;
  --kine-space-xxl: 28px;
  --kine-space-xxxl: 36px;

  /* ── 字号 / 字重 ────────────────────── */
  --kine-font-display: 30px;
  --kine-font-title: 24px;
  --kine-font-section: 18px;
  --kine-font-heading: 16px;
  --kine-font-body: 15px;
  --kine-font-small: 13px;
  --kine-font-micro: 11px;
  --kine-weight-regular: 400;
  --kine-weight-medium: 500;
  --kine-weight-semibold: 600;
  --kine-weight-bold: 700;

  /* ── 阴影 ───────────────────────────── */
  --kine-shadow-card: 0 8px 18px rgba(16, 24, 40, 0.06);
  --kine-shadow-raised: 0 14px 28px rgba(16, 24, 40, 0.12);

  /* ── 布局 ───────────────────────────── */
  --kine-screen-padding: 20px;
  --kine-tab-bar-height: 58px;
}