/* ============================================================
   宠栈云 设计语言 v1 · tokens.css
   六个仓库共用的唯一真源(petvet-web / petvet-mp / zhancong-web /
   zhancong-mp / petstack-hq / petstack-vendor + 官网)。
   定稿 2026-09-09。主色青绿松石 #17B5AD;语义色五族三件套沿用 v4 约定。
   规则:
   - 页面里一律 var(--x),不写裸色值;color:#fff 只允许出现在语义色实心底上
   - 打印页(小票/出院单)永远硬编码浅色,禁止 token 化
   - 深色模式:html[data-theme="dark"](同时给 html.dark 供 Element Plus)
   ============================================================ */

:root {
  /* ---------- 主色 · Teal 11 阶 ---------- */
  --teal-50:  #F0FDFB;
  --teal-100: #CDFAF3;
  --teal-200: #9BF4E8;
  --teal-300: #60E8D9;
  --teal-400: #30D1C6;
  --teal-500: #17B5AD;   /* 品牌基准 · 主操作实心底 */
  --teal-600: #11A29D;   /* hover */
  --teal-700: #117472;
  --teal-800: #125D5C;
  --teal-900: #144D4C;
  --teal-950: #052D2E;

  /* ---------- 中性 · 微冷灰 11 阶 ---------- */
  --gray-50:  #F8F9F9;
  --gray-100: #F5F5F6;
  --gray-200: #E5E6E8;
  --gray-300: #CDCFD4;
  --gray-400: #A8ACB3;
  --gray-500: #82878F;
  --gray-600: #666B73;
  --gray-700: #4E525A;
  --gray-800: #383B41;
  --gray-900: #24262A;
  --gray-950: #131417;

  /* ---------- 语义角色(页面只用这一层) ---------- */
  --bg:        #FAFBFB;
  --card:      #FFFFFF;
  --bg-soft:   var(--gray-100);
  --hover:     var(--gray-50);
  --ink:       var(--gray-950);
  --ink-2:     var(--gray-700);
  --muted:     var(--gray-600);
  --muted-2:   var(--gray-500);
  --faint:     var(--gray-400);
  --line:      var(--gray-200);
  --line-soft: #F0F1F2;

  --accent:      var(--teal-500);
  --accent-2:    var(--teal-600);
  --accent-fg:   #FFFFFF;
  --accent-soft: var(--teal-50);
  --accent-line: var(--teal-100);

  /* 主按钮用墨黑,青绿只做点睛(定稿口径) */
  --btn-primary:    var(--gray-950);
  --btn-primary-fg: #FFFFFF;

  /* ---------- 语义色 · 五族三件套(与 v4 结构一致) ---------- */
  --ok:         #2F9E6B; --ok-bg:     #EDF7F2; --ok-line:     #C9E6D8;   /* 偏黄绿,避开主色青绿 */
  --danger:     #C4455F; --danger-bg: #FBF0F2; --danger-line: #F0D4DA;
  --warn:       #C08A2E; --warn-bg:   #FAF4E9; --warn-line:   #EDDCC0;
  --info:       #4A6FD1; --info-bg:   #EFF2FB; --info-line:   #D3DDF3;   /* 偏紫蓝,避开主色 */
  --purple:     #7E57D1; --purple-bg: #F3EFFB; --purple-line: #DDD1F2;

  /* ---------- 字体 ---------- */
  /* 国内站点不引 Google Fonts;品牌字体上线前必须子集化后自托管 */
  --font-sans:    "Noto Sans SC", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-display: "Outfit", var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- 字阶(size / line-height / letter-spacing,行高按中文重算) ---------- */
  --t-72: 72px; --lh-72: 96px; --ls-72: -1.44px;
  --t-60: 60px; --lh-60: 80px; --ls-60: -1.2px;
  --t-48: 48px; --lh-48: 64px; --ls-48: -0.96px;
  --t-36: 36px; --lh-36: 50px; --ls-36: -0.72px;
  --t-30: 30px; --lh-30: 42px; --ls-30: -0.6px;
  --t-24: 24px; --lh-24: 36px; --ls-24: -0.48px;
  --t-20: 20px; --lh-20: 32px; --ls-20: -0.4px;
  --t-18: 18px; --lh-18: 30px; --ls-18: -0.36px;
  --t-16: 16px; --lh-16: 26px; --ls-16: -0.32px;   /* 正文基准 */
  --t-14: 14px; --lh-14: 22px; --ls-14: -0.28px;
  --t-12: 12px; --lh-12: 18px; --ls-12: -0.24px;
  /* 字重只用三档:300 大数字 / 400 正文 / 500 标题强调 */
  --w-light: 300; --w-regular: 400; --w-medium: 500;

  /* ---------- 阴影 8 级(零横偏移 + 负 spread,来自 Preste) ---------- */
  --sh-xs:  0 1px 2px 0 rgba(0,0,0,.06);
  --sh-sm:  0 1px 3px 0 rgba(0,0,0,.10);
  --sh-md:  0 2px 4px -2px rgba(0,0,0,.06);
  --sh-lg:  0 5px 8px -2px rgba(0,0,0,.08);
  --sh-xl:  0 8px 8px -4px rgba(0,0,0,.03);
  --sh-2xl: 0 20px 24px -4px rgba(0,0,0,.08);
  --sh-3xl: 0 24px 48px -12px rgba(0,0,0,.18);
  --sh-4xl: 0 32px 64px -12px rgba(0,0,0,.06);
  --shadow: var(--sh-md);           /* 兼容 v4 里的 --shadow */

  /* ---------- 圆角 5 档 ---------- */
  --r-4: 4px;   /* 徽标、小色块 */
  --r-6: 6px;   /* 按钮、输入框 */
  --r-8: 8px;   /* 卡片、面板 */
  --r-16: 16px; /* 弹层、大卡 */
  --r-pill: 999px;

  /* ---------- 间距 4px 基准 ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* ---------- 控件高度 ---------- */
  --h-sm: 32px; --h-md: 36px; --h-lg: 44px;   /* 移动端触控最小 44 */

  /* ---------- Element Plus 品牌色对齐(petvet-web / zhancong-web / hq) ---------- */
  --el-color-primary:         var(--teal-500);
  --el-color-primary-dark-2:  var(--teal-600);
  --el-color-primary-light-3: var(--teal-400);
  --el-color-primary-light-5: var(--teal-300);
  --el-color-primary-light-7: var(--teal-200);
  --el-color-primary-light-8: var(--teal-100);
  --el-color-primary-light-9: var(--teal-50);
  --el-color-success: var(--ok);
  --el-color-danger:  var(--danger);
  --el-color-warning: var(--warn);
  --el-color-info:    var(--info);
}

/* ============================================================
   深色模式 · 不是反色:卡片比背景亮,层级靠亮度差和描边
   主色提一阶到 teal-400,语义色各提两阶,底/线降到 900 附近
   ============================================================ */
html[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --bg:        #131417;
  --card:      #1D1E22;
  --bg-soft:   #232428;
  --hover:     #242529;
  --ink:       #F0F1F2;
  --ink-2:     #C6C8CC;
  --muted:     #8B8E94;
  --muted-2:   #797C82;
  --faint:     #6A6D73;
  --line:      #2B2C30;
  --line-soft: #262729;

  --accent:      var(--teal-400);
  --accent-2:    var(--teal-300);
  --accent-fg:   var(--teal-950);
  --accent-soft: #10312F;
  --accent-line: var(--teal-500);

  --btn-primary:    var(--teal-400);
  --btn-primary-fg: var(--teal-950);

  --ok:         #5FBF8F; --ok-bg:     #1F2A24; --ok-line:     #2E4034;
  --danger:     #E0708B; --danger-bg: #2A2325; --danger-line: #3A3033;
  --warn:       #D9A854; --warn-bg:   #2B2620; --warn-line:   #403927;
  --info:       #85A4E2; --info-bg:   #232830; --info-line:   #39434F;
  --purple:     #A98BE0; --purple-bg: #282332; --purple-line: #3A3348;

  --shadow: 0 12px 32px rgba(0,0,0,.45);

  --el-color-primary:         var(--teal-400);
  --el-color-primary-dark-2:  var(--teal-300);
  --el-color-primary-light-3: var(--teal-500);
  --el-color-primary-light-5: var(--teal-600);
  --el-color-primary-light-7: var(--teal-800);
  --el-color-primary-light-8: var(--teal-900);
  --el-color-primary-light-9: #10312F;
}