/*
 * 强能疼痛专科 · 机构端设计规范（Clinical Design Tokens）2026-09-24
 * -----------------------------------------------------------------------------
 * 机构端所有页面共用的唯一设计真值：颜色、字号、间距、圆角、阴影与焦点环。
 * 页面样式一律写 var(--token, 回退值)；回退值与本文件一致，未加载本文件的页面也能正确显示。
 *
 * 原则（对标 Epic Hyperdrive / Mayo Clinic 临床界面）：
 *   1. 一个主色（临床蓝），状态只用成功/警告/危险三种语义色，其余全部为中性灰阶；
 *   2. 所有正文与说明文字对白底和页面底色均满足 WCAG AA（≥ 4.5:1）；
 *   3. 字号只用 9 级，数字等宽对齐，便于时间、NRS、计数纵向比较；
 *   4. 圆角 4 / 8 / 12 三级，阴影两级，统一可见的键盘焦点环。
 * 患者端（微信 H5，public/style.css）有独立品牌风格，不使用本文件。
 */
:root {
  /* 主色：临床蓝 */
  --c-primary: #15558f;          /* 白底对比 7.7 */
  --c-primary-strong: #0c3f70;   /* 悬停 / 按下 / 强调标题 */
  --c-primary-soft: #eaf2fa;     /* 选中 / 当前项底色 */
  --c-primary-border: #b9ccdd;

  /* 文字：三级，均满足 AA */
  --c-text: #172033;             /* 16.3 */
  --c-text-2: #44546a;           /* 7.7 次要文字 */
  --c-text-3: #5b6b7f;           /* 5.5 说明 / 元信息；页面底色上 5.1 */
  --c-on-primary: #ffffff;

  /* 界面与分隔 */
  --c-canvas: #f5f7fa;           /* 页面底色 */
  --c-surface: #ffffff;          /* 卡片 / 面板 */
  --c-surface-2: #f8fafc;        /* 次级面板、表头、斑马纹 */
  --c-border: #dfe6ee;
  --c-border-strong: #c3cfdb;

  /* 语义状态：只用于表达状态，不做装饰 */
  --c-success: #127a4a;
  --c-success-soft: #e8f6ee;
  --c-success-border: #b6dfc6;
  --c-warning: #8a5a00;
  --c-warning-soft: #fff4e0;
  --c-warning-border: #e2b053;
  --c-danger: #b42318;
  --c-danger-soft: #fdecec;
  --c-danger-border: #f2b8b5;

  /* 字体与字号（9 级） */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;

  /* 间距：4px 网格 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 圆角 / 阴影 / 焦点 */
  --r-sm: 4px;                   /* 按钮、输入框、标签 */
  --r-md: 8px;                   /* 卡片、面板 */
  --r-lg: 12px;                  /* 对话框 */
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 3px rgba(16, 42, 67, .04);
  --shadow-2: 0 8px 24px rgba(16, 42, 67, .10);
  --focus-ring: 0 0 0 3px rgba(21, 85, 143, .28);
}

/* ── 机构端基础层：只在加载本文件的机构端页面生效 ─────────────────────────── */
body {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 统一、清晰可见的键盘焦点；鼠标点击不显示 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible {
  outline-offset: 0;
}

/* 禁用态统一 */
:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}