/* ============================================================================
 * 过敏科普 · 设计 token 唯一真源
 * ----------------------------------------------------------------------------
 * 本文件同时被两条轨道引用，路径恒为 /tokens.css：
 *   1) 新 SPA  —— app/index.html 中 <link rel="stylesheet" href="/tokens.css">
 *   2) PHP 直出页 —— api/includes/layout.php 输出同一行 link
 * 构建时由 app/public/tokens.css 原样复制到站点根 /tokens.css（无 hash、路径稳定）。
 * 因此：任何颜色/间距/圆角/字号/动效的调整都只改这一处，两条轨道同步生效。
 * ========================================================================== */

:root {
  /* --- 品牌色 · 呼吸感青绿 ------------------------------------------------ */
  --c-primary: #2f7d6b;
  --c-primary-deep: #1f5a4e;
  --c-primary-light: #46a08b;
  --c-primary-soft: #edf4f1;
  --c-primary-tint: #f2f8f6;

  /* --- 背景与承载面 ------------------------------------------------------ */
  --c-bg: #f7f9f8;
  --c-surface: #ffffff;
  --c-surface-sunken: #edf4f1;
  --c-overlay: rgba(28, 43, 40, 0.45);

  /* --- 文字 -------------------------------------------------------------- */
  --c-text: #1c2b28;
  --c-text-sub: #5a6b67;
  --c-text-muted: #8a9995;
  --c-text-invert: #ffffff;

  /* --- 功能语义 · 就医时机红黄绿 ----------------------------------------- */
  --c-danger: #d64545;
  --c-warn: #e0a33e;
  --c-safe: #3e9b62;
  --c-info: #2f7d6b;

  --c-danger-soft: #fdecec;
  --c-warn-soft: #fdf4e5;
  --c-safe-soft: #eaf6ee;
  --c-info-soft: #edf4f1;

  --c-danger-deep: #a83232;
  --c-warn-deep: #a8761f;
  --c-safe-deep: #2c7449;

  /* --- 描边 -------------------------------------------------------------- */
  --c-border: #e2ebe7;
  --c-border-strong: #cfddd7;
  --c-border-primary: rgba(47, 125, 107, 0.28);

  /* --- 圆角 -------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- 间距 -------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- 字体与排版 -------------------------------------------------------- */
  --font-sans: "思源黑体", "Source Han Sans SC", "Noto Sans SC", -apple-system,
    BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  --font-serif: "思源宋体", "Source Han Serif SC", "Noto Serif SC", Georgia, serif;

  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* --- 阴影 -------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(28, 43, 40, 0.05);
  --sh-sm: 0 2px 8px rgba(28, 43, 40, 0.06);
  --sh-md: 0 6px 20px rgba(28, 43, 40, 0.08);
  --sh-lg: 0 12px 36px rgba(28, 43, 40, 0.1);
  --sh-focus: 0 0 0 3px rgba(47, 125, 107, 0.18);
  --sh-danger-focus: 0 0 0 3px rgba(214, 69, 69, 0.2);

  /* --- 动效 -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* --- 布局 -------------------------------------------------------------- */
  --nav-h: 60px;
  --header-h: 56px;
  --content-max: 720px;
  --tap-min: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* --- 应急场景：高对比大字视图 ------------------------------------------- */
/* /emergency 直出页与 SPA 应急视图共用同一组变量，仅覆盖对比度与字号     */
.zx-emergency-view {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-text: #101a18;
  --c-text-sub: #2a3d38;
  --c-text-muted: #46594f;
  --c-border: #b9c9c4;
  --c-border-strong: #8ba39c;
  --fs-body: 19px;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;
}

/* --- 降低动效偏好 ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}