/* ==========================================================================
   中医馆 1:1 高保真视觉变量系统 (参考现代高端卡片风格)
   1-菜单轨道 | 2-主体 | 3-右侧详情面板
   ========================================================================== */
:root {
  /* 暖米宣纸白主背景与卡片质感 */
  --bg-rice-paper: #F7F4EE;      /* 暖米宣纸白底色，温润护眼 */
  --bg-card: #FFFFFF;            /* 纯白主卡片 */
  --bg-card-subtle: #FAF7F2;     /* 浅米副卡片 */
  --bg-panel: #DDBF9A;           /* 米棕深色区块：左侧菜单轨道 / 右侧详情面板 */
  --bg-menu-hover: #F2ECE1;      /* 分段按钮悬停底色 */
  --bg-menu-active: #EFEAE1;     /* 分段切换与快捷账号选中底色 */

  /* 核心色彩体系：在暖棕大地色基础上，引入草本青黛绿与天青霁蓝冷暖互补，生机雅致 */
  --accent-gold: #E8A74A;        /* 暖姜杏金 (主行动按钮、核心金额指示) */
  --accent-gold-hover: #D69335;
  --accent-gold-light: #FDF4E7;
  --accent-gold-border: #F3D7AF;

  /* 生机活跃色：东方草本青黛绿 (冷暖互补第一主角，打破单一黄调，带来草本生命力) */
  --herb-green: #2A6B5B;         /* 青黛草本墨绿 (LOGO叶片、就诊中、履约成功) */
  --herb-green-hover: #205346;
  --herb-green-light: #EBF5F1;   /* 薄荷浅玉底色 (标签、卡片强调背景) */
  --herb-green-border: #C2DFD5;
  --primary-herb: var(--herb-green);
  --primary-herb-light: var(--herb-green-light);

  /* 理性专业色：宋式天青霁蓝 (金青互补，带来医疗公信力与数据层次感) */
  --sky-azure: #326B88;          /* 天青霁蓝 (病历、专业分类、单次现结、统计指标) */
  --sky-azure-hover: #26556E;
  --sky-azure-light: #ECF3F7;    /* 天青浅雾底色 (等候中状态条、轻量胶囊底) */
  --sky-azure-border: #C5DBE8;

  /* 警示与待办色：温润朱砂赭红 (待办小红点徽标、过敏警示、反结账撤销) */
  --carmine-red: #D05244;        /* 朱砂赭红 (比大红更沉稳，带陶土质感) */
  --carmine-red-light: #FDF1EF;  /* 浅朱砂底色 */
  --carmine-red-border: #F3C6C0;
  --alert-red: var(--carmine-red);
  --alert-red-light: var(--carmine-red-light);
  --alert-red-deep: #96271D;     /* 深朱砂：米棕面板上的危险操作文字/描边 */

  /* 文字墨色 */
  --text-primary: #1C1E1D;       /* 浓墨主文本 (大标题、主数据) */
  --text-secondary: #5E6361;     /* 墨灰副文本 (正文、属性标签) */
  --text-muted: #8E9491;         /* 浅墨说明 (细体注释、时间、单位) */

  /* 边框与微阴影 */
  --border-subtle: #EAE5DB;
  --border-focus: #1C1E1D;
  --shadow-card: 0 4px 24px rgba(28, 30, 29, 0.04);
  --shadow-float: 0 12px 36px rgba(28, 30, 29, 0.08);

  /* 分区 3：菜单轨道与右侧详情面板配色 (同一块米棕底色，纯平无阴影、内部不再叠白卡) */
  --drawer-bg: var(--bg-panel);  /* 面板主底色 = 米棕区块 */
  --panel-line: #C9A77F;         /* 面板底色上的分隔线 (比底色略深) */
  --panel-text-muted: #4E4030;   /* 面板内细体说明 (米棕底 5.7:1 / 浅填充 9.4:1，两种底通用) */
  --panel-control-bg: #FFEFD1;   /* 米棕底色上控件的静止态：菜单圆形按钮 / 输入框 / 信息条 */
  --drawer-text-strong: var(--text-primary); /* 面板内主文本 */
  --drawer-accent: #6B4310;      /* 面板内深琥珀数值高亮 (米棕底 4.9:1) */

  /* 特大圆角规范 (Super Large Radius) */
  --radius-hero: 30px;           /* 登录大卡、主体主卡片 */
  --radius-xl: 24px;             /* 业务主卡片、抽屉面板卡片 */
  --radius-lg: 16px;             /* 菜单项、常规卡片 */
  --radius-md: 12px;             /* 按钮、输入框 */
  --radius-pill: 999px;          /* 胶囊圆角 */

  /* 字体字阶（视图内一律引用变量，不再散落硬编码字号） */
  --font-hero: 32px;              /* 页面一级大标题 */
  --font-2xl: 26px;               /* 抽屉内核心金额 */
  --font-title: 24px;             /* 卡片主数值 */
  --font-xl: 22px;                /* 客户姓名等强调信息 */
  --font-lg: 19px;                /* 模块标题 */
  --font-md: 16px;                /* 正文强调、列表主字段 */
  --font-base: 14px;              /* 常规正文 */
  --font-sm: 13px;                /* 次级说明、表格正文 */
  --font-xs: 12px;                /* 标签、状态胶囊 */
  --font-2xs: 11px;               /* 极小注释、单位 */

  /* 字体字重规范 (谨慎使用粗体，注释小字使用细体) */
  --weight-thin: 300;            /* 细体：辅助注释、时间戳、单位、次级说明 */
  --weight-regular: 400;         /* 常规体：正文字符、输入框、常规列表 */
  --weight-medium: 500;          /* 中粗：卡片小标、按钮标签、次级重点 */
  --weight-semibold: 600;        /* 半粗：模块标题、主数值、重要操作 */
  --weight-bold: 700;            /* 粗体：仅用于一级页面大标题和核心大金额 */

  /* 触控规范 */
  --btn-height-lg: 56px;
  --btn-height-md: 48px;
  --btn-height-sm: 38px;

  /* 平滑过渡 (无突变) */
  --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1);
  --transition-smooth: 260ms var(--ease-spring);
  --transition-drawer: 320ms var(--ease-spring);

  /* 布局垂直对齐基准：确保左侧轨道与主体标题横向中线、首菜单项与主内容区绝对对齐 */
  --workspace-top: 28px;         /* 主体区域顶部间距 */
  --title-bar-height: 48px;       /* 标题栏与 LOGO 区域统一高度 */
  --workspace-gap: 22px;          /* 标题栏到主要内容区、LOGO到首菜单项垂直间距 */
  --sidebar-rail-top: 12px;       /* 侧边栏轨道距离视口顶部高度 */
}