/**
 * 备考通 · Design Tokens (CSS 变量)
 * =====================================================================
 * 版本：v1.0.0 · 2026-08-26
 * 来源：设计规范-备考通-20260826.md（Ardot 文件 718570750880145 真实变量校准）
 * 说明：本文件与 design-tokens.json 数值完全一致，是前端唯一颜色/排印/
 *       圆角/阴影/间距来源。前端必须引用这些变量，禁止硬编码颜色值。
 *
 * 使用方式：前端在 `styles/tokens.css` 中 import 本文件或复制 :root 节，
 *           组件内一律 `var(--token-name)` 引用。
 * =====================================================================
 */

:root {
  /* ------------------------------------------------------------------
   * 1. 颜色 Color
   * ------------------------------------------------------------------ */

  /* 中性底色 Neutral */
  --bg-canvas:        #F7F6F2;   /* 画布/页面背景（浅米白） */
  --bg-card:          #FFFFFF;   /* 卡片/面板背景 */
  --bg-soft:          #EFEFF5;   /* 图标底、次级填充、标签底、进度条轨道 */
  --border-subtle:    #E8E6E0;   /* 卡片描边、分隔线（中性浅暖） */

  /* 品牌主色 Brand（深蓝系） */
  --primary:          #2B4C8F;   /* 主按钮、主色、选中态高亮底、进度填充 */
  --primary-deep:     #1B2D5B;   /* 渐变深端、页面主标题强调、深蓝 hero 底 */
  --primary-bright:   #3A6BD8;   /* 渐变亮端、hero 卡片、active 图标 */

  /* 文字色 Text */
  --text-primary:     #1A1F2E;   /* 主标题、正文主色 */
  --text-secondary:   #6B7280;   /* 副标题、描述文字、图标默认色 */
  --text-muted:       #9CA2AD;   /* 弱提示、占位、次要标记 */

  /* 语义色 Semantic（状态反馈） */
  --success:          #1B9266;   /* 正向趋势、正确率、达标 */
  --success-soft:     #E0F5EB;   /* 正向标签底、打卡徽章底 */
  --warning:          #DC9A1E;   /* 提醒、中等状态 */
  --warning-soft:     #FEF0D1;   /* 提醒标签底 */
  --danger:           #D14C55;   /* 负向、错误、待复习错题数 */
  --danger-soft:      #FCE5E7;   /* 危险标签底、错误提示底 */

  /* 前景/辅助 Foreground */
  --on-accent:        #FFFFFF;   /* 主色/深蓝底上的前景色（按钮文字、深蓝 hero 文字） */
  --white:            #FFFFFF;   /* 纯白（唯一允许的裸色值） */

  /* 渐变 Gradients（仅 hero 大卡 / 置顶卡使用） */
  --gradient-hero-deep:    linear-gradient(135deg, #1B2D5B 0%, #3A6BD8 100%); /* 首页 hero 卡 / 要闻置顶卡 */
  --gradient-hero-primary: linear-gradient(180deg, #2B4C8F 0%, #1B2D5B 100%); /* 移动首页深蓝 hero */


  /* ------------------------------------------------------------------
   * 2. 字体 Font
   * ------------------------------------------------------------------ */
  --font-sans: 'Sarasa Gothic SC', 'PingFang SC', sans-serif; /* 中文正文/标题/标签 */
  --font-num:  'Inter', 'SF Pro', sans-serif;                  /* 统计数字/时间/单价/代码标识 */


  /* ------------------------------------------------------------------
   * 3. 排印 Typography
   *    role = 用途界定；部分 token 的可变字段（如趋势色）由语义色覆盖
   * ------------------------------------------------------------------ */
  --fs-h1:        24px;  --fw-h1: 700;  --lh-h1: 1.2;  --ff-h1: var(--font-sans); /* H1 页面标题 */
  --fs-data-num:  22px;  --fw-data-num: 700;  --lh-data-num: 1.2;  --ff-data-num: var(--font-num);  /* 数据大字（Inter Bold） */
  --fs-card-title:15px;  --fw-card-title: 600; --lh-card-title: 1.4; --ff-card-title: var(--font-sans); /* 卡标题 */
  --fs-label:     12px;  --fw-label: 400;  --lh-label: 1.4;  --ff-label: var(--font-sans); /* 标签 */
  --fs-label-bold:12px;  --fw-label-bold: 600; --lh-label-bold: 1.4; --ff-label-bold: var(--font-sans); /* 强标签/徽章 */
  --fs-subtitle:  13px;  --fw-subtitle: 400; --lh-subtitle: 1.5; --ff-subtitle: var(--font-sans); /* 副标题 */
  --fs-button:    13px;  --fw-button: 600;  --lh-button: 1.4;  --ff-button: var(--font-sans); /* 按钮文字 */
  --fs-trend:     11px;  --fw-trend: 500;  --lh-trend: 1.4;  --ff-trend: var(--font-sans); /* 趋势指数 */
  --fs-body:      14px;  --fw-body: 400;   --lh-body: 1.5;   --ff-body: var(--font-sans); /* 正文/题干 */


  /* ------------------------------------------------------------------
   * 4. 圆角 Radius
   * ------------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* 标准卡片（默认） */
  --radius-xl:   24px;   /* Hero 渐变大卡 */
  --radius-pill: 999px;  /* 头像、胶囊按钮、天数徽章 */
  --radius-btn:  10px;   /* 主/次按钮圆角 */


  /* ------------------------------------------------------------------
   * 5. 阴影 Shadow
   *    默认以「白底 + 细描边(border-subtle)」表达卡片，不用重阴影。
   * ------------------------------------------------------------------ */
  --shadow-level-0: none;
  --shadow-level-1: 0 1px 2px rgba(0, 0, 0, 0.04);              /* 悬浮态轻投影 */
  --shadow-level-2: 0 4px 12px rgba(27, 45, 91, 0.08);          /* 弹层、浮起卡片、TabBar */
  --shadow-level-3: 0 8px 24px rgba(27, 45, 91, 0.14);          /* 模态、下拉菜单 */


  /* ------------------------------------------------------------------
   * 6. 间距 Spacing（4px 网格）
   * ------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;


  /* ------------------------------------------------------------------
   * 7. 布局 Layout
   * ------------------------------------------------------------------ */
  --sidebar-width-desktop: 220px;
  --content-max-width:     1220px;
  --padding-desktop:       32px;   /* 桌面左右 padding */
  --padding-mobile:        24px;   /* 移动左右 padding */
  --card-padding-desktop:  24px;
  --card-padding-mobile:   16px;
  --card-gap-desktop:      20px;
  --card-gap-mobile:       12px;
  --tabbar-height-mobile:  120px;  /* 移动 TabBar 高度 */
  --btn-height:            40px;
  --btn-height-pill:       44px;


  /* ------------------------------------------------------------------
   * 8. 断点 Breakpoint
   * ------------------------------------------------------------------ */
  --bp-mobile:  390px;
  --bp-desktop: 1440px;


  /* ------------------------------------------------------------------
   * 9. 动效 Motion
   * ------------------------------------------------------------------ */
  --motion-hover-fast: 120ms;   /* 按钮 hover 背景过渡 */
  --motion-card-hover: 160ms;   /* 卡片 hover 投影过渡 */
  --motion-switch:     250ms;   /* 切换/展开 */
  --motion-tab-fade:   200ms;   /* 移动 Tab 切换淡入 */
  --ease-default:      ease;
}


/* =====================================================================
 * 10. 组件级预设预设（Typographic & Component recipe）
 *     —— 前端不直接硬编码上述，按此处 recipe 组装组件。
 * ===================================================================== */

/* Hero 数据卡（首页 5 要素卡 / 深蓝大卡） */
.hub-card-hero {
  color: var(--on-accent);
  background: var(--gradient-hero-deep);
  border-radius: var(--radius-lg);
  padding: var(--card-padding-desktop);
}

/* 标准白卡（默认卡片） */
.hub-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-padding-desktop);
}

/* 主按钮 */
.hub-btn-primary {
  background: var(--primary);
  color: var(--on-accent);
  border-radius: var(--radius-btn);
  height: var(--btn-height);
  font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button);
  transition: background var(--motion-hover-fast) var(--ease-default);
}
.hub-btn-primary:hover { background: color-mix(in srgb, var(--primary) 92%, #000); }

/* 次按钮（透明 + primary 描边） */
.hub-btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-btn);
  height: var(--btn-height);
  font: var(--fw-button) var(--fs-button) / var(--lh-button) var(--ff-button);
}

/* 语义标签 / 徽章（主色 + 浅底成对） */
.hub-badge {
  font: var(--fw-label-bold) var(--fs-label) / var(--lh-label) var(--ff-label);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}
.hub-badge--success { color: var(--success); background: var(--success-soft); }
.hub-badge--warning { color: var(--warning); background: var(--warning-soft); }
.hub-badge--danger  { color: var(--danger);  background: var(--danger-soft); }
.hub-badge--soft    { color: var(--text-secondary); background: var(--bg-soft); }