/*!
 * tokens.css · π 选号工具集 v2 设计令牌
 * ------------------------------------------------------------------
 * 铁律（架构文档 §7.1）：
 *   1. 组件样式里禁止出现字面色值，一律 var(--token)
 *   2. 主题切换只换 token 值，禁止 [data-theme="light"] .card {...} 这类组件级覆盖
 *   3. 字号、移动端字号必须在 tokens.css 成对定义，组件只引用 token
 *   4. 全站禁止小于 11px 文字；移动端正文不低于 15px
 * 命名规范：--<类别>-<语义>-<层级>
 */

/* ============================================================
 * A 板：暗色红金（默认主色板）
 * ========================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* —— 背景 —— */
  --bg-base: #12100E;
  --bg-surface: #1C1A17;
  --bg-elevated: #262320;
  --bg-page-grad: linear-gradient(135deg, #16130F 0%, #12100E 45%, #191512 100%);
  --bg-deco-line: linear-gradient(90deg, #C8102E, #D4AF37, #C8102E);

  /* —— 描边 —— */
  --border-subtle: #332E29;
  --border-gold: #4A3F2A;

  /* —— 品牌色 —— */
  --brand-red: #C8102E;
  --brand-red-hover: #A60D26;
  --brand-red-deep: #E8455C;
  --brand-gold: #D4AF37;
  --brand-gold-light: #E8C766;

  /* —— 文字 —— */
  --text-primary: #F5EFE4;
  --text-secondary: #A39A8C;
  --text-muted: #6E6559;
  --text-on-brand: #FFFFFF;

  /* —— 球体渐变（高光点在 32% 28%，模拟左上打光）—— */
  --ball-red: radial-gradient(circle at 32% 28%, #E8455C, #C8102E 55%, #8E0A20);
  --ball-blue: radial-gradient(circle at 32% 28%, #5B9BF8, #1A56C4 55%, #123A8C);
  --ball-gold: radial-gradient(circle at 32% 28%, #F2D98A, #D4AF37 55%, #9C7C1E);
  --ball-digit: linear-gradient(160deg, #2E2A25 0%, #1C1A17 100%);
  --ball-stroke: rgba(255, 255, 255, 0.12);
  --ball-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  --ball-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
  --ball-size: 44px;
  --ball-font: 20px;
  --digit-block-w: 56px;
  --digit-block-h: 64px;
  --digit-block-font: 34px;

  /* —— 状态 —— */
  --status-ok: #3FA66A;
  --status-err: #E03A3A;
  --status-warn: #D9A441;
  --status-idle: #6E6559;

  /* —— 交互 —— */
  --focus-ring: 0 0 0 3px rgba(212, 175, 55, 0.45);
  --overlay-scrim: rgba(8, 7, 6, 0.72);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.55);
  --highlight-digit-bg: rgba(200, 16, 46, 0.28);
  --highlight-digit-fg: #F5EFE4;
  --track-bg: #332E29;
  --track-fill: linear-gradient(90deg, #C8102E, #D4AF37);
  --code-bg: #14120F;
}

/* ============================================================
 * B 板：浅色纸面商务风（备选板）
 * ========================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg-base: #FAF8F4;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F2EEE7;
  --bg-page-grad: linear-gradient(135deg #FFFDF9 0%, #FAF8F4 45%, #F4F0E8 100%);
  --bg-deco-line: linear-gradient(90deg, #C8102E, #A8863C, #C8102E);

  --border-subtle: #E3DDD2;
  --border-gold: #D8C79A;

  --brand-red: #C8102E;
  --brand-red-hover: #A60D26;
  --brand-red-deep: #8E0A20;
  --brand-gold: #A8863C;
  --brand-gold-light: #C9A961;

  --text-primary: #1F1B16;
  --text-secondary: #5C554A;
  --text-muted: #8C8478;
  --text-on-brand: #FFFFFF;

  --ball-red: radial-gradient(circle at 32% 28%, #E8455C, #C8102E 55%, #8E0A20);
  --ball-blue: radial-gradient(circle at 32% 28%, #5B9BF8, #1A56C4 55%, #123A8C);
  --ball-gold: radial-gradient(circle at 32% 28%, #F2D98A, #D4AF37 55%, #9C7C1E);
  --ball-digit: linear-gradient(160deg, #FFFFFF 0%, #F2EEE7 100%);
  --ball-stroke: #E3DDD2;
  --ball-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  --ball-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.18);
  --ball-size: 44px;
  --ball-font: 20px;
  --digit-block-w: 56px;
  --digit-block-h: 64px;
  --digit-block-font: 34px;

  --status-ok: #1F7A4D;
  --status-err: #C22A2A;
  --status-warn: #8A6212;
  --status-idle: #8C8478;

  --focus-ring: 0 0 0 3px rgba(168, 134, 60, 0.35);
  --overlay-scrim: rgba(31, 27, 22, 0.45);
  --shadow-card: 0 1px 2px rgba(31, 27, 22, 0.08);
  --shadow-pop: 0 8px 28px rgba(31, 27, 22, 0.18);
  --highlight-digit-bg: rgba(200, 16, 46, 0.14);
  --highlight-digit-fg: #8E0A20;
  --track-bg: #E3DDD2;
  --track-fill: linear-gradient(90deg, #C8102E, #A8863C);
  --code-bg: #F5F1E9;
}

/* ============================================================
 * 尺度令牌（两板共用）
 * ========================================================== */
:root {
  /* 间距阶梯 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-ball: 50%;

  /* 动效时长 */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 层级 */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* 容器 */
  --container-max: 1080px;
  --container-pad: 24px;
  --content-max: 760px;

  /* 字体族 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    "Hiragino Sans GB", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 字号阶梯（9 级）—— 桌面 */
  --font-title: 32px;     /* 页面主标题 */
  --font-section: 22px;   /* 区块标题 */
  --font-card: 18px;      /* 卡片标题 */
  --font-body: 15px;      /* 正文 */
  --font-note: 13px;      /* 说明 / 次要 */
  --font-badge: 12px;     /* 徽标 / 状态 */
  --font-metric: 26px;    /* 统计指标数值 */
  --font-ball: 20px;      /* 球内数字 */
  --font-digit: 34px;     /* 排列五数字块 */

  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-body: 1.75;
  --lh-note: 1.7;
}

/* ============================================================
 * 移动端字号（成对定义，组件只引用 token）
 * 断点：1024 / 768 / 480
 * ========================================================== */
@media (max-width: 1024px) {
  :root {
    --container-pad: 20px;
    --ball-size: 42px;
    --ball-font: 19px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: 16px;
    --font-title: 24px;
    --font-section: 19px;
    --font-card: 17px;
    --font-body: 15px;
    --font-note: 12.5px;
    --font-badge: 11.5px;
    --font-metric: 22px;
    --font-ball: 18px;
    --font-digit: 28px;
    --digit-block-w: 46px;
    --digit-block-h: 54px;
    --lh-body: 1.7;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 12px;
    --ball-size: 38px;
    --ball-font: 18px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
  }
}