/* ==========================================================================
   CYLAN 设计系统 · Design Tokens
   中国青少年法律援助导航 / China Youth Legal Aid Navigator

   设计方向：深蓝为地，黄铜为线——如夜航图上的航线与坐标。
   克制、庄重、清晰；不浮夸、不故作深沉。
   ========================================================================== */

:root {
  /* ---- 色彩：深蓝主调 ---- */
  --navy-950: #0a1428;   /* 最深：页头、页脚、决策树进度轨道底 */
  --navy-900: #0f1f3d;   /* 主品牌色：按钮、强调背景 */
  --navy-800: #16294f;
  --navy-700: #1f3661;   /* 悬停态 */
  --navy-600: #2c4778;
  --navy-500: #3d5a94;
  --navy-100: #e8ecf5;   /* 极浅蓝：卡片底、分区背景 */
  --navy-50:  #f4f6fb;

  /* ---- 中性 ---- */
  --paper:    #f7f7f4;   /* 页面底色：偏冷的暖白，非橙调米色 */
  --surface:  #ffffff;
  --ink-900:  #14192b;   /* 正文主色 */
  --ink-700:  #3a4256;
  --ink-500:  #626a80;
  --ink-300:  #9aa1b4;
  --line:     #dfe2ea;
  --line-strong: #c3c9d9;

  /* ---- 点缀色：黄铜金（信任/指引） ---- */
  --brass-700: #8a6a2f;
  --brass-500: #b8923f;
  --brass-400: #c9a15b;
  --brass-100: #f3e9d3;

  /* ---- 功能色 ---- */
  --crisis-600: #a8291f;   /* 危机按钮主色 */
  --crisis-700: #8c221a;
  --crisis-100: #fbe8e6;
  --safe-600:  #2f6d4f;    /* 安全/完成态 */
  --safe-100:  #e6f2ec;
  --warn-600:  #a5680c;
  --warn-100:  #fbf0dc;

  /* ---- 字体 ---- */
  --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-body: "Noto Serif SC", "Songti SC", "STSong","Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --font-mono: "Noto Serif SC", "Songti SC", "STSong","JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- 字号阶（1.25 比例，桌面端） ---- */
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  --fs-h4: 1.2rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  /* ---- 间距 ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* ---- 圆角 / 阴影 / 边框 ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(15, 31, 61, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 31, 61, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 31, 61, 0.16);
  --border-hairline: 1px solid var(--line);

  /* ---- 布局 ---- */
  --content-max: 1120px;
  --content-narrow: 760px;
  --header-h: 68px;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
}

/* 简易模式（适老化 / 高对比）：字号更大、对比更强、去除精细装饰、关闭动效、加大可点击区域 */
:root.mode-easy {
  --fs-h1: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 1.5rem + 1vw, 2.3rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.3rem;
  --fs-body-lg: 1.4rem;
  --fs-body: 1.3rem;
  --fs-small: 1.15rem;
  --fs-caption: 1.05rem;

  /* 提高文字对比度：不再依赖浅灰色，次要文字也用更深的颜色 */
  --ink-500: var(--ink-700);
  --ink-300: var(--ink-700);
  --line: #8b93a8;
  --line-strong: #5c6478;

  /* 去除细节阴影，改用清晰的实体边框，避免弱视用户看不清卡片边界 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 0 rgba(15,31,61,0.14);
  --radius-md: 10px;
  --radius-lg: 14px;

  /* 更大的间距，减少误触 */
  --space-3: 1rem;
  --space-4: 1.3rem;
  --space-5: 1.85rem;

  /* 关闭所有过渡动效 */
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}