/* tokens.css —— 设计变量（唯一色值 / 字号 / 间距 / 圆角 / 阴影 / 层级来源）
   红线：业务 CSS 只能引用本文件变量，严禁出现未登记的色值与随手写死的 magic number。 */
:root {
  /* ---------- 主色（§8） ---------- */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-soft: rgba(79, 70, 229, .08);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, .25);

  /* ---------- 中性色（slate 系） ---------- */
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  /* 派生中性色：登记的描边色组，禁止在业务样式中再写其他灰色 */
  --color-border: #E2E8F0;
  --color-border-subtle: #EEF2F6;

  /* ---------- 语义色（§8） ---------- */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;

  /* ---------- 前景 / 控件细节（补齐后业务样式零裸色值） ---------- */
  --color-on-primary: #FFFFFF;
  --color-spinner-track: rgba(255, 255, 255, .4);
  --color-bilibili-soft: rgba(0, 161, 214, .12);

  /* ---------- Heat 色阶（§6.4） ---------- */
  --color-heat-hot: #DC2626;
  --color-heat-warm: #D97706;
  --color-heat-cool: #16A34A;

  /* ---------- Difficulty 色阶（§6.4） ---------- */
  --color-diff-easy: #16A34A;
  --color-diff-medium: #D97706;
  --color-diff-hard: #DC2626;

  /* ---------- 徽章浅底（对应色 10% 透明度，禁止业务样式现写 rgba） ---------- */
  --badge-hot-bg: rgba(220, 38, 38, .10);
  --badge-warm-bg: rgba(217, 119, 6, .10);
  --badge-cool-bg: rgba(22, 163, 74, .10);
  --badge-easy-bg: rgba(22, 163, 74, .10);
  --badge-medium-bg: rgba(217, 119, 6, .10);
  --badge-hard-bg: rgba(220, 38, 38, .10);

  /* ---------- 平台点缀（仅小面积使用） ---------- */
  --color-youtube: #FF0000;
  --color-douyin: #FE2C55;
  --color-douyin-dark: #161823;
  --color-bilibili: #00A1D6;

  /* ---------- 遮罩 ---------- */
  --color-backdrop: rgba(0, 0, 0, .5);

  /* ---------- 字号阶梯 ---------- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 22px;
  --fs-3xl: 40px;

  /* ---------- 4pt 间距网格 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* ---------- 圆角（§8） ---------- */
  --radius-ctrl: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* ---------- 阴影（§8） ---------- */
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, .05);
  --shadow-float: 0 8px 24px rgba(15, 23, 42, .12);

  /* ---------- 布局 ---------- */
  --max-width: 1080px;
  --content-legal: 720px;
  --header-h: 56px;
  --header-h-mobile: 48px;
  --tap-target: 44px;

  /* ---------- z-index 层级表（§8：Toast > Modal > backdrop > Header） ---------- */
  --z-header: 10;
  --z-backdrop: 90;
  --z-modal: 100;
  --z-toast: 110;
}