/* ==========================================================================
   宠记录 · 后台管理系统 设计变量（Web CSS）
   --------------------------------------------------------------------------
   唯一权威来源：Ardot「宠记录 · 后台登录 UI」＋ 小程序「晴空蓝 v2」全局设计文档
   与小程序同源：变量名与 小程序/宠记录工程/styles/design-tokens.wxss 一一对应
                 （后台不再自成一套色板，2026-09-28 阿标拍板迁移）
   覆盖页面：登录页 / 用户数据（看板）—— 其余 7 个导航页沿用同一份
   用法：在后台入口样式顶部 @import "…/后台设计变量.css";
   单位：后台是 Web，1px 就是 1px（小程序那边是 1px = 2rpx）
   ⚠️ 页面样式只引用本文件变量，不要写死色值
   ========================================================================== */
:root {
  /* ---------------- 品牌色 ---------------- */
  --c-royal-500: #4E8BE5;  /* 晴空蓝主色（勾选框底 / 输入框聚焦描边 / 图标 / 图表主序列） */
  --c-royal-700: #3A6FC8;  /* 深晴空蓝（浅底文字链接 / 带白字的实底按钮 / 选中段底） */
  --c-royal-800: #2F5DAE;  /* 更深一档（浅蓝底上的文字：导航选中 / 浅底强调文字）
                              ⚠️ royal-700 压在浅蓝底上只有 4.31:1 不够，必须用这一档（5.60:1 ✓） */
  --c-royal-300: #93B8EE;  /* 浅晴空蓝（深底上的弱化文字 / 图表次序列） */
  --c-royal-150: #EAF1FB;  /* 极浅晴空蓝（导航选中底 / 深底上的次级浅字） */
  --c-royal-100: #E6F1FA;
  --c-royal-50:  #EEF4FB;
  --c-gold-500:  #D4A55C;  /* 皇冠金（图表强调序列 / 环形图次段） */
  --c-gold-400:  #E8C684;  /* 金渐变亮端 */
  --c-gold-700:  #AF8738;  /* 金渐变暗端 */
  --c-gold-600:  #B08638;  /* 浅底金（🚫 小字不达标：压白仅 3.33:1，只可用于 ≥18px 或粗体大号字） */
  --c-gold-800:  #886829;  /* 深金 · 小字正向指标（KPI 涨「▲ 较昨日 +18%」）
                              ✅ 压白 5.17 / 压 #EEF4FB 4.67 / 压 #EAF1FB 4.55 —— v2 全部浅底都过 */
  --c-green-700: #0C7A5D;  /* 深绿 · 小字负面指标（KPI 跌「▼ 较昨日 -6%」）
                              ✅ 压白 5.31 / 压浅蓝底 ≥4.67
                              ⚠️ 打卡绿 #0C8A67 压白只有 4.33，不够深，不可当文字色 */

  /* ---------------- 中性色 ---------------- */
  --c-bg-cream:  #FBF7EE;  /* 奶油白 · 页面底 */
  --c-white:     #FFFFFF;  /* 白 · 输入框底 / 卡片底 */
  --c-ink-900:   #252525;  /* 主文字 */
  --c-ink-550:   #7B756E;  /* 图标色（🚫 不作文本：压奶油白只有 4.26:1 不达标） */
  --c-ink-500:   #9A948A;  /* 小程序 TabBar 未选中 / 后台输入框占位文字（🚫 不作文本：压白 3.01:1） */
  --c-hero-dark: #142840;  /* 深蓝 · 左栏蒙层 / 金底按钮文字 / 图表 tooltip 底 */
  --c-line-warm: #E0DACE;  /* 暖描边 · 输入框默认描边 / 分隔线 / 胶囊描边 */
  --c-line-hover:#C9C2B6;  /* 暖描边加深一档 · 输入框悬停 / 导航未选中圆点 */
  --c-line-soft: #F7F2EB;  /* 更浅的分隔线 */
  --c-info-text: #5A6675;  /* 信息文字 · 奶油白/白底上的次级文字（页脚/标签/注释一律用它） */

  /* ---------------- 渐变 ---------------- */
  /* 徽标专用：56px 方角小徽标用等距三段（忠于原稿的两段等距分布）；
     小程序 FAB / CTA 用的是带平台期的四段版 --grad-gold，小尺寸下会半边死沉，不套用 */
  --grad-gold-badge: linear-gradient(135deg, #E8C684 0%, #D3A55B 50%, #AF8738 100%);
  /* 左栏照片蒙层：三段深蓝，自上而下压暗，保证白字可读 */
  --grad-panel-mask: linear-gradient(180deg,
      rgba(20, 40, 64, 0.30) 0%,
      rgba(13, 26, 42, 0.62) 45%,
      rgba(9, 18, 29, 0.94) 100%);

  /* ---------------- 图表 / 数据可视化（看板页专用） ---------------- */
  /* 序列色序：主 → 次 → 强调 → 兜底。新增图表一律按此顺序取色，不要临时挑色 */
  --c-chart-1: #4E8BE5;  /* 主序列 */
  --c-chart-2: #93B8EE;  /* 次序列 */
  --c-chart-3: #D4A55C;  /* 强调 / 对比序列 */
  --c-chart-4: #CFC7BA;  /* 兜底 / 未知项（与小程序 --c-swatch-service 同源） */
  --c-line-grid: #EDE7DB;  /* 图表网格线 / 基准线（比 --c-line-warm 浅一档，不抢数据） */
  --c-track:     #F2EDE2;  /* 进度条 / 占比条轨道底 */

  /* ---------------- 阴影 ---------------- */
  --sh-card: 0 1px 4px rgba(38, 38, 38, 0.06);  /* 卡片（与小程序 --sh-card 同源，后台半径减半） */

  /* ---------------- 语义色 / 表单状态 ---------------- */
  /* 错误：描边属"图形"，3:1 即可 → #D64541（压奶油白 4.10:1 ✓）
     提示文字属"文本"，要 4.5:1 → 必须用更深一档 #C0392B（5.08:1 ✓） */
  --c-danger:        #D64541;  /* 错误描边 / 错误图标 */
  --c-danger-700:    #C0392B;  /* 错误提示文字（2026-09-28 实测：D64541 只有 4.10 不够） */
  --c-danger-bg:     #FDEBEA;
  --c-placeholder:   #9A948A;  /* 输入框占位文字 */
  --c-field-dis-bg:  #F2EFE9;  /* 输入框禁用底（暖灰） */
  --c-field-dis-txt: #B9B2A6;  /* 输入框禁用文字（禁用态属 WCAG 豁免，不卡 4.5） */

  /* 按钮 5 态（基准 #3A6FC8 → 悬停 / 按下逐级加深） */
  --c-btn:          #3A6FC8;
  --c-btn-hover:    #3464B4;  /* 加深约 10% */
  --c-btn-active:   #305BA4;  /* 加深约 18% */
  --c-btn-dis-bg:   #DDD6CA;  /* 禁用底 */
  --c-btn-dis-txt:  #9A948A;  /* 禁用文字 */

  /* 聚焦外环（输入框聚焦时叠在 2px 描边外） */
  --sh-focus-ring: 0 0 0 3px rgba(78, 139, 229, 0.22);

  /* ---------------- 圆角 ---------------- */
  --r-field:  8px;    /* 输入框 / 按钮 */
  --r-badge:  16px;   /* 品牌徽标 */
  --r-check:  4px;    /* 勾选框 */
  --r-card:   16px;   /* 看板卡片 */
  --r-pill:   999px;  /* 胶囊 / 分段器（全圆） */

  /* ---------------- 字号（后台自成一套，与小程序不共用） ---------------- */
  --fs-hero:    40px;  /* 左栏口号 */
  --fs-h1:      28px;  /* 表单主标题 / KPI 大数值 */
  --fs-brand:   26px;  /* 产品名 */
  --fs-page:    20px;  /* 页面标题 / 环形图中心大数值 */
  --fs-num:     18px;  /* 卡内中数值 */
  --fs-sub:     16px;  /* 左栏副标题 / 按钮文字 / 卡内数值 */
  --fs-card:    15px;  /* 卡片标题 */
  --fs-field:   15px;  /* 输入框内容 */
  --fs-body:    14px;  /* 表单副标题 */
  --fs-nav:     13px;  /* 侧边导航 / 分布小节标题 / 记住我 */
  --fs-cap:     12px;  /* 标签 / 安全提示 / 页脚 / KPI 指标名 */
  --fs-note:    11px;  /* 图表图例 / 卡片脚注 / 百分比 */
  --fs-en:      11px;  /* 品牌英文名 */
  --fs-chart:   10px;  /* 图表轴标签 / 柱标签 */

  /* ---------------- 尺寸 ---------------- */
  --sz-screen-w:  1920px;  /* 登录页设计宽度 */
  --sz-screen-h:  1080px;
  --sz-panel-w:   1080px;  /* 登录页左栏品牌区 */
  --sz-form-w:    840px;
  --sz-column-w:  400px;   /* 表单列宽 */
  --sz-field-h:   48px;    /* 输入框 / 按钮高 */
  --sz-badge:     56px;    /* 品牌徽标 */
  --sz-sidebar-w: 240px;   /* 后台侧边导航宽（看板页） */
  --sz-content-x: 48px;    /* 看板内容区左右内边距 */

  /* ---------------- 响应式断点（供媒体查询引用） ----------------
     ≥1600        左栏 1080 固定，右栏吃剩余
     1280–1600    左栏按比例缩，下限 520
     1024–1280    左栏 40%（下限 420），右栏 60%
     <1024        整块隐藏左栏，表单铺满 + 顶部小号品牌行（画布变体 `B · 后台登录-窄屏`）
     <480         表单列改 100%，左右留 24 内边距
     任何断点下 页面高度不足 760 时允许纵向滚动，页脚用 margin-top:auto（不要绝对定位）
     后台页（含侧栏）额外约定：<1280 侧栏收成 64px 图标条；<900 侧栏隐藏改抽屉
  ------------------------------------------------------------- */
  --bp-wide:   1600px;
  --bp-mid:    1280px;
  --bp-narrow: 1024px;
  --bp-phone:  480px;
}