/*
 * 知元医链设计 token（来源：原型总览 04「界面规范与组件」，架构文档 5.4）。
 * 官网、落地页共用；页面只用这里的变量，不再各写一套色值。
 * 禁止：阴影、渐变、玻璃拟态、描边卡片、左侧色条、emoji。
 */
:root {
  /* 品牌色 */
  --c-cobalt: #012180;          /* 主按钮、主卡、链接 */
  --c-cobalt-hover: #00135A;
  --c-ivory: #F7F5EC;           /* 页面底 */
  --c-amber: #F7AA20;           /* 只用于当前与待办（色面） */
  --c-amber-ink: #E0940A;       /* 浅底上的琥珀线条 */
  --c-cyan: #23F7F7;            /* 只在深底 */
  --c-cyan-ink: #0FB5B5;        /* 浅底上 Logo 用的压暗青 */
  --c-magenta: #FA17FA;         /* 只在深底 */
  --c-white: #FFFFFF;

  /* 文字 */
  --c-ink: #0B1533;             /* 标题、发丝线按钮 */
  --c-text: #2A3552;            /* 正文 */
  --c-mist: #4E5A78;            /* 次要文字 */
  --c-on-dark: #E3E8F6;         /* 深底正文 */
  --c-on-dark-mist: #C7D0EA;    /* 深底次要 */
  --c-on-dark-faint: #9FB0E0;   /* 深底分组标题 */

  /* 色面与线 */
  --c-mint: #DEF5EE;            /* 次级色面、选中底、提示 */
  --c-hairline: #E6E1D3;        /* 分隔 */
  --c-stroke: #D3CDBE;          /* 描边、未开始 */
  --c-disabled: #C9C3B3;
  --c-footer: #0B1533;
  --c-footer-line: #23305A;

  /* 状态点（Kit 只给语义；色值按原型官网页面取） */
  --c-dot-blue: #012180;        /* 进行中 */
  --c-dot-green: #1F6B4F;       /* 已完成 / 生效 */
  --c-dot-red: #A3261B;         /* 出错 / 失效 */
  --c-dot-grey: #4E5A78;        /* 已结束 */
  --c-error: #A3261B;

  --overlay: rgba(11, 21, 51, .45);

  /* 圆角：标签 4、输入 12、信息面 20（官网大面 28）、主卡 24、按钮 = 高度 / 2 */
  --r-tag: 4px;
  --r-input: 12px;
  --r-input-lg: 16px;
  --r-panel: 20px;
  --r-panel-lg: 28px;
  --r-hero: 24px;

  /* 按钮高：官网主操作 56、常规 48、紧凑 32、图标 44 */
  --h-btn: 56px;
  --h-btn-md: 48px;
  --h-btn-sm: 32px;
  --h-icon: 44px;

  /* 字体（Kit、D-35）：英文数字 Avenir Next → Avenir → Nunito Sans；中文正文思源黑体（Noto Sans SC），标题思源宋体（Noto Serif SC）。
     Nunito Sans、Noto Sans SC、Noto Serif SC 由各页 <head> 里的 Google Fonts css2 加载（display=swap），加载不到时回落系统字体。 */
  --f-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --f-serif: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;

  --w-page: 1280px;
  --gutter: 80px;
  --nav-h: 88px;
}

@media (max-width: 960px) {
  :root { --gutter: 24px; --nav-h: 64px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
}