/* ============================================================
   common.css — TWC 工具站统一设计系统 · Design Tokens + Base
   中性黑白 + 单强调色(蓝) · 仅浅色
   所有页面统一引用；变量为唯一视觉来源，组件类见 components.css
   ============================================================ */

/* ---------- 阿里普惠体 3.0 (jsDelivr CDN) ---------- */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-55-regular@1.0.0/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-55-regular@1.0.0/AlibabaPuHuiTi-3-55-Regular.woff') format('woff');
}

@font-face {
  font-family: 'AlibabaPuHuiTi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-65-medium@1.0.0/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-65-medium@1.0.0/AlibabaPuHuiTi-3-65-Medium.woff') format('woff');
}

@font-face {
  font-family: 'AlibabaPuHuiTi';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-85-bold@1.0.0/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/alibabapuhuiti-3-85-bold@1.0.0/AlibabaPuHuiTi-3-85-Bold.woff') format('woff');
}

:root {
  /* ---------- 中性色阶(zinc) ---------- */
  --twc-ink:        #09090b;   /* 主文字 / 实心按钮底 */
  --twc-ink-soft:   #27272a;
  --twc-text:       #3f3f46;   /* 正文 */
  --twc-muted:      #71717a;   /* 次要文字 */
  --twc-faint:      #a1a1aa;   /* 占位 / 弱提示 */
  --twc-line:       #e4e4e7;   /* 边框 */
  --twc-line-soft:  #f0f2f6;   /* 分隔线 / hover 底 */
  --twc-card-line:  #eceef3;   /* 白卡片在灰底上的极浅描边 */
  --twc-surface:    #ffffff;   /* 卡片 */
  --twc-bg:         #f4f6fa;   /* 页面底（与左栏同色，卡片纯白浮于其上） */
  --twc-bg-alt:     #f4f4f5;   /* 浅底区块 */

  /* ---------- 单强调色(蓝) ---------- */
  --twc-accent:        #2563eb;
  --twc-accent-strong: #1d4ed8;
  --twc-accent-soft:   #eff6ff;
  --twc-accent-line:   #bfdbfe;

  /* ---------- 语义色(仅 badge / 状态) ---------- */
  --twc-new-bg:   #dcfce7;
  --twc-new-fg:   #15803d;
  --twc-hot-bg:   #fef3c7;
  --twc-hot-fg:   #92400e;
  --twc-warn-fg:  #b45309;

  /* ---------- 字体 ---------- */
  --twc-font-sans: 'AlibabaPuHuiTi', 'Alibaba PuHuiTi 3.0', 'Alibaba PuHuiTi', 'Inter',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft YaHei', 'PingFang SC',
    'Noto Sans', sans-serif;
  --twc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* ---------- 字号 ---------- */
  --twc-text-xs:   12px;
  --twc-text-sm:   13px;
  --twc-text-base: 14px;
  --twc-text-md:   15px;
  --twc-text-lg:   18px;
  --twc-text-xl:   22px;
  --twc-text-2xl:  clamp(26px, 3vw, 34px);
  --twc-text-3xl:  clamp(32px, 4.2vw, 48px);

  /* ---------- 间距 ---------- */
  --twc-space-1: 4px;
  --twc-space-2: 8px;
  --twc-space-3: 12px;
  --twc-space-4: 16px;
  --twc-space-5: 24px;
  --twc-space-6: 32px;
  --twc-space-7: 48px;
  --twc-space-8: 64px;

  /* ---------- 圆角 ---------- */
  --twc-radius-sm:   6px;
  --twc-radius-md:   10px;
  --twc-radius-lg:   14px;
  --twc-radius-full: 999px;

  /* ---------- 边框 / 阴影 ---------- */
  --twc-border: 1px solid var(--twc-line);
  --twc-shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04);
  --twc-shadow-md: 0 10px 28px -12px rgba(30, 41, 72, 0.18), 0 2px 6px rgba(30, 41, 72, 0.04);
  --twc-shadow-lg: 0 18px 48px -24px rgba(9, 9, 11, 0.24);
  --twc-ring: 0 0 0 3px rgba(37, 99, 235, 0.14);

  /* ---------- 布局 ---------- */
  --twc-container: 1400px;
  --twc-container-pad: clamp(16px, 4vw, 48px);
  --twc-header-h: 72px;

  /* ---------- 动效 ---------- */
  --twc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --twc-dur: 0.18s;
}

/* ---------- 全局 Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--twc-font-sans);
  font-size: var(--twc-text-base);
  line-height: 1.6;
  color: var(--twc-ink);
  background: var(--twc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: var(--twc-radius-full); }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ---------- 工具类 ---------- */
.twc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.twc-scrollbar-hide::-webkit-scrollbar { display: none; }
.twc-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

a { color: inherit; }