/* ============================================================
 * Timedecimal 设计令牌（Bold Numeric 主题）
 * 文件：assets/css/tokens.css
 * 说明：所有颜色、字体、间距、圆角、阴影统一令牌化，
 *       便于品牌迭代和暗色模式切换。
 * ============================================================ */

:root {
  /* ====== 颜色：高对比 WCAG AAA ====== */
  --bg-primary:    #FAFAFA;        /* 主背景 off-white */
  --bg-card:       #FFFFFF;        /* 卡片背景 */
  --bg-soft:       #F4F4F5;        /* 浅灰区块 */
  --bg-inverse:    #0A0A0B;        /* 反色块（用于结果区超大数字） */
  --text-primary:  #0A0A0B;        /* 主文字，对比度 13.5:1 */
  --text-secondary:#52525B;        /* 次文字，对比度 7.0:1（AA） */
  --text-tertiary: #A1A1AA;        /* 三级文字（附属信息） */
  --text-on-dark:  #FAFAFA;        /* 反色块上的文字 */
  --accent:        #0066FF;        /* 单一 accent，电蓝 */
  --accent-hover:  #0052CC;
  --accent-soft:   #EBF2FF;        /* 弱化背景，仅 hover/active 提示 */
  --success:       #00A86B;
  --warning:       #B45309;
  --danger:        #DC2626;
  --border:        #E4E4E7;        /* 标准边框 */
  --border-strong: #D4D4D8;        /* 加强边框（输入框） */
  --border-dark:   #27272A;        /* 反色块上的边框 */

  /* ====== 字体 ====== */
  --font-display:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ====== 字号系统（Mobile-first，符合 v3.2 强制-M01）====== */
  --fs-body:       17px;
  --lh-body:       1.75;
  --fs-small:      15px;
  --fs-tiny:       13px;

  /* ====== 间距（4px 基底 8 步阶） ====== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ====== 圆角 ====== */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-pill:999px;

  /* ====== 阴影 ====== */
  --sh-card:  0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.06);
  --sh-hover: 0 8px 24px rgba(0,0,0,.08);
  --sh-focus: 0 0 0 3px rgba(0,102,255,.3);

  /* ====== 触摸目标 (强制-M01 v3.0) ====== */
  --touch-min: 48px;

  /* ====== 容器宽度 ====== */
  --container-narrow: 720px;       /* 文章正文 */
  --container-default:1080px;      /* 主要内容区 */
  --container-wide:   1280px;      /* 顶部导航 */

  /* ====== Z-index 层级 ====== */
  --z-skip:    100;
  --z-header:  90;
  --z-banner:  80;
  --z-modal:   50;

  /* ====== 动画 ====== */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --dur-fast:  150ms;
  --dur-base:  250ms;
}

/* ====== 桌面端字号微调 ====== */
@media (min-width: 1024px) {
  :root {
    --fs-body: 18px;
    --lh-body: 1.7;
  }
}