/* ============ 设计令牌（Layer 0 · tokens） ============
 * 全站唯一令牌来源：所有 CSS 自定义属性集中于此，供 base/components/toolbar/pages 引用。
 * 调整 :root 变量即可全局同步视觉，无需改动业务文件。
 * 依赖：无（必须最先加载）。
 * 层叠顺序由本文件顶部 @layer 声明锁定：tokens → base → components → states → toolbar → pages → subjects。
 * （subjects 为层序末尾、优先级最高；仅二级题型页启用，可覆写 components/toolbar/pages 同名规则）
 */

@layer tokens, base, components, states, toolbar, pages, subjects;

@layer tokens {
  :root {
    /* 基础调色板（由旧 common.css 核心令牌并入） */
    --bg: #f3f7fb;
    --card: #ffffff;
    --ink: #27324a;
    --muted: #5f6b80;
    --line: #e3e9f2;
    --line-strong: #c9d4e6;   /* 可交互元素边框：答案输入框虚线/选项按钮描边 */
    --soft-bg: #fafbff;       /* 近白软底：答案输入框/选项按钮填充 */
    --brand: #335fb5;
    --brand-d: #3f6fd1;
    --brand-bg: #eef3fb;      /* 品牌浅底：题号徽章/chip 未激活底 */
    --ok: #1c7d52;
    --ok-bg: #e7f7ee;
    --bad: #c23a52;
    --bad-bg: #fdeef0;
    --warn: #9a6b0a;
    --shadow: 0 8px 24px rgba(40, 70, 120, .10);

    /* 主色令牌：primary 主色 / secondary 浅底 / accent 强调（深）。
   下方 cn/en 色板为通用强调色（math 插件作为补充配色引用）。 */
    --math-primary: #356fb2;
    --math-secondary: #ebf3fd;
    --math-accent: #2f6ea8;

    /* 通用强调色板（原语文/英语色板，保留作 math 插件辅助配色） */
    --cn-primary: #247a52;
    --cn-secondary: #e6f7ee;
    --cn-accent: #27795a;

    --en-primary: #a8650b;
    --en-secondary: #fff7eb;
    --en-accent: #8f5608;

    /* 二级题型页 / 科目主题令牌（默认数学浅蓝渐变；运行时由 JS 按科目覆写 --subject-*） */
    --subject-primary: var(--math-primary);
    --subject-primary-soft: rgba(74, 144, 217, 0.12);
    --subject-body-bg: linear-gradient(160deg, #eaf3ff 0%, #dbeafe 48%, #cfe6ff 100%);
    --type-card-bg: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(74, 144, 217, 0.05));
    --type-card-border: rgba(74, 144, 217, 0.2);
    --type-card-hover-border: rgba(74, 144, 217, 0.5);

    /* 书写格颜色：田字格/米字格与四线三格（供练字/书写组件使用） */
    --grid-tianzige-frame: #5a6f94;     /* 田字格外框 */
    --grid-tianzige-aux: #9fb3d1;       /* 田字格中十字虚线 */
    --grid-fourline-line: #9fb3d1;      /* 四线三格横线 */
    --grid-fourline-baseline: #5a6f94;  /* 四线三格基线（第三线，略粗） */
    --paper-fourline-bg: #fffef9;       /* 拼音四线纸底色（.pinyin-grid 组件） */
    --paper-fourline-rule: #e8a0a0;     /* 拼音四线纸红线 */

    /* 科目强调色 */
    --math: var(--math-primary);
    --math-bg: #ebf3fd;
    --radius-card: 16px;
    --grad-hero: linear-gradient(160deg, #4a90d9 0%, #6db3f2 40%, #7eb6f0 100%);
    --grad-hero-overlay: linear-gradient(160deg, rgba(74, 144, 217, .55) 0%, rgba(109, 179, 242, .40) 40%, rgba(126, 182, 240, .35) 100%);
    --grad-logo: linear-gradient(135deg, var(--brand), #7eb6f0);
    --grad-cta: linear-gradient(135deg, #8f5608, #a8650b);

    /* 工具栏：chip 分段控件（蓝紫系） */
    --toolbar-chip-ink: #4a5a8a;
    --toolbar-chip-border: rgba(123, 97, 255, .28);
    --toolbar-chip-bg: rgba(255, 255, 255, .55);
    --toolbar-chip-hover-border: rgba(123, 97, 255, .55);
    --toolbar-chip-hover-bg: rgba(123, 97, 255, .10);
    --toolbar-chip-grad: linear-gradient(135deg, #3a66c8, #4a3fb8);
    --toolbar-chip-active-border: #6a66e8;
    --toolbar-chip-active-ink: #ffffff;
    --toolbar-chip-active-shadow: 0 3px 10px rgba(110, 100, 240, .35);

    /* 工具栏：操作按钮 */
    --toolbar-btn-grad: linear-gradient(135deg, #3a66c8, #4a3fb8);
    --toolbar-btn-grad-active: linear-gradient(135deg, #4a76e0, #6a48ef);
    --toolbar-btn-primary-shadow: 0 4px 12px rgba(110, 100, 240, .28);
    --toolbar-btn-ghost-bg: rgba(123, 97, 255, .12);
    --toolbar-btn-ghost-ink: #5a5adf;
    --toolbar-btn-ghost-border: rgba(123, 97, 255, .30);
    --toolbar-btn-ghost-hover-bg: rgba(123, 97, 255, .20);

    /* 工具栏：尺寸（紧凑档：chip 26px / 主按钮 28px / 辅助按钮 24px） */
    --toolbar-font-size: 13px;
    --toolbar-chip-radius: 6px;
    --toolbar-chip-pad: 0 12px;
    --toolbar-btn-radius: 6px;
    --toolbar-btn-pad: 0 16px;
    --toolbar-btn-font-size: 13px;
    --toolbar-btn-sm-pad: 0 10px;
    --toolbar-btn-sm-radius: 6px;

    /* 工具栏：布局间距 */
    --toolbar-group-gap: 6px;
    --toolbar-lbl-margin: 8px;

    /* 工具栏：粘性面板（滚动时常驻可见） */
    --toolbar-sticky-top: 0px;
    --toolbar-sticky-z: 10;
    --toolbar-sticky-bg: rgba(255, 255, 255, .82);
    --toolbar-sticky-bg-fallback: rgba(255, 255, 255, .96);
    --toolbar-sticky-border: rgba(91, 141, 239, .18);
    --toolbar-sticky-blur: 14px;

    /* 工具栏：触控目标与分组分隔 */
    --toolbar-touch-min: 26px;      /* chip 紧凑高度 */
    --toolbar-btn-min-height: 28px; /* 主操作按钮高度 */

    /* 工具栏：进度条（已答题数）与分数徽标 */
    --toolbar-progress-track: var(--line);
    --toolbar-progress-fill: var(--toolbar-chip-grad);
    --toolbar-progress-h: 3px;

    /* 响应式断点令牌（命名常量）。
       注意：@media 条件无法引用 var()，各媒体查询须硬编码同值并注释对应令牌名。 */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* 间距令牌（页面 section / .card / 面板外边距统一来源） */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --card-padding-screen: 12px 16px;
    --card-padding-print: 6px 8px;
    --grid-gap-screen: 14px;
    --grid-gap-print: 8px 6px;
    --spacing-xl: 32px;
    --header-title-size: 2.0rem; /* 页面标题（.page-header）字号基准 */
  --q-num-size: 12px;
  --q-text-size: 15px;
  --q-text-line-height: 1.4;
  --q-unit-size: 12px;
  --q-input-size: 14px;
  --q-input-height: 30px;
  --q-option-size: 14px;
  --q-hint-size: 12px;
  --q-feedback-size: 12px;
  --q-scene-max-width: 200px;
  --q-scene-max-height: 140px;
  --q-card-padding: 12px 14px;
  --q-header-gap: 8px;
  --q-section-gap: 8px;
  --q-grid-gap: 14px;
  }
}