/* =============================================================================
 * design-tokens.css — 国际学校设计系统 · 设计令牌（单一事实来源）
 * -----------------------------------------------------------------------------
 * 适用范围：Vantage / Bloom（已采用）统一视觉语言，作为 overtime / perf /
 *           OrgTree-admin 前端对齐的基准（见任务 #160）。
 * 使用约定：
 *   - 所有颜色、字体、间距、圆角、阴影、断点均由此文件定义；
 *   - 组件样式只允许引用 var(--token)，禁止硬编码十六进制/像素值；
 *   - 主题切换（如需暗色）在此文件顶部覆盖变量即可，组件无需改动。
 * 重建说明：原 design-system/ 在会话间丢失，本文件依据 2026-08-01 用户粘贴的
 *           设计规范重建；类型刻度与间距刻度按 4px 基数 + 10 级 Modular Scale
 *           推算（规范未给逐级数值，已在 design-system-spec.md 标注假设）。
 * ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
   * 1. 颜色 Color
   *    主色：navy（权威/学术） gold（荣典/强调） teal（生长/行动）
   *    中性：暖灰背景 + 近黑文字，营造平静、可信的校园质感
   * --------------------------------------------------------------------- */
  --color-navy:        #0C447C;   /* 主品牌色：导航、标题、主按钮 */
  --color-navy-700:    #0A3A6B;   /* hover / 深嵌套 */
  --color-navy-600:    #0C447C;
  --color-navy-500:    #1A5896;   /* 浅一层交互态 */
  --color-navy-100:    #E3ECF5;   /* 极浅底纹 / 选中态背景 */

  --color-gold:        #EF9F27;   /* 强调色：徽标、关键 CTA、奖章 */
  --color-gold-600:    #D98E1C;   /* gold:hover */
  --color-gold-100:    #FBEEDB;   /* gold 极浅底纹 */

  --color-teal:        #1D9E75;   /* 行动/成功/正向状态 */
  --color-teal-600:    #18855F;
  --color-teal-100:    #DEF1EA;

  --color-neutral-bg:      #FAFAF8; /* 页面背景（暖白） */
  --color-neutral-surface: #FFFFFF; /* 卡片 / 浮层表面 */
  --color-neutral-text:    #2C2C2A; /* 主文字（近黑暖灰） */
  --color-neutral-muted:   #6B6B66; /* 次级文字 / 占位 */
  --color-neutral-border:  #E3E3DD; /* 分割线 / 描边 */

  --color-danger:   #C0392B; /* 错误 / 危险操作 */
  --color-success:  #1D9E75; /* 成功（与 teal 同值，统一语义） */
  --color-warning:  #EF9F27; /* 警示（与 gold 同值） */
  --color-info:     #1A5896; /* 信息（与 navy-500 同值） */

  /* -----------------------------------------------------------------------
   * 2. 字体 Typography
   *    标题用衬线（学术/传统气质）；正文用无衬线（清晰/现代）；
   *    数据/代码用等宽。
   * --------------------------------------------------------------------- */
  --font-heading: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
                  "Microsoft YaHei", system-ui, -apple-system, "Segoe UI",
                  Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* 10 级类型刻度（rem；基准 16px）。标题用 heading，正文用 body。 */
  --text-xs:   0.75rem;   /* 12 — 脚注 / 标签 */
  --text-sm:   0.875rem;  /* 14 — 次要文本 */
  --text-base: 1rem;      /* 16 — 正文 */
  --text-lg:   1.125rem;  /* 18 — 引导段 */
  --text-xl:   1.25rem;   /* 20 — 小标题 */
  --text-2xl:  1.5rem;    /* 24 — 卡片标题 */
  --text-3xl:  1.875rem;  /* 30 — 区块标题 */
  --text-4xl:  2.25rem;   /* 36 — 页面标题 */
  --text-5xl:  3rem;      /* 48 — Hero */
  --text-6xl:  3.75rem;   /* 60 — 品牌字 */

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --tracking-wide:   0.02em; /* 标题字距 */
  --tracking-tight: -0.01em;

  /* -----------------------------------------------------------------------
   * 3. 间距 Spacing（4px 基数；space-0 → space-24）
   *    每级 = 索引 × 4px；space-24 = 96px。
   * --------------------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -----------------------------------------------------------------------
   * 4. 圆角 Radius
   * --------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
   * 5. 阴影 Shadow（低饱和、近距离，符合校园的轻盈感）
   * --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06), 0 1px 3px rgba(44, 44, 42, 0.08);
  --shadow-md: 0 4px 6px rgba(44, 44, 42, 0.05), 0 2px 4px rgba(44, 44, 42, 0.06);
  --shadow-lg: 0 10px 15px rgba(44, 44, 42, 0.08), 0 4px 6px rgba(44, 44, 42, 0.04);

  /* -----------------------------------------------------------------------
   * 6. 边框 Border
   * --------------------------------------------------------------------- */
  --border-width:   1px;
  --border-color:   var(--color-neutral-border);
  --border-focus:   var(--color-navy-500);

  /* -----------------------------------------------------------------------
   * 7. 响应式断点 Breakpoints（仅作媒体查询参考；CSS 自定义属性不可用于
   *    媒体查询条件，故组件需在各断点用 @media 引用这些值的精神）
   * --------------------------------------------------------------------- */
  /* --bp-sm:   640px;
     --bp-md:   768px;
     --bp-lg:   1024px;
     --bp-xl:   1280px;
     --bp-2xl:  1536px; */
}

/* 断点媒体查询速查（组件可直接 @import 本段后使用） -------------------------
   @media (min-width: 640px)  { ... }  sm
   @media (min-width: 768px)  { ... }  md
   @media (min-width: 1024px) { ... }  lg
   @media (min-width: 1280px) { ... }  xl
   @media (min-width: 1536px) { ... }  2xl
-------------------------------------------------------------------------- */