/**
 * 康老师 · 统一设计令牌系统（Kang Design Tokens）
 * 版本：1.0.0
 * 适用范围：9 个常规页面（family/attend/screen/rate/duty/staff/classreport + admin 三件套）
 * 不适用：tour.html（政务大屏暗色主题）/ archive.html（档案馆暖纸色）/ board-kitchen（墙屏 vh 优化）
 *
 * 使用方法：
 *   <link rel="stylesheet" href="/assets/kang-tokens.css">
 *   然后在页面 <style> 里只写业务特定样式，令牌和组件从这里继承
 */

/* ========================================
   1. 核心设计令牌（Color Palette & Scales）
   ======================================== */

:root {
  /* 品牌色：食堂绿 / 蛋黄 / 番茄红 */
  --kang-green: #1D7A4E;
  --kang-green-hi: #2FA36B;       /* 悬停/激活态 */
  --kang-green-soft: #E3F2E8;     /* 浅背景 */
  --kang-green-deep: #175E3D;     /* 深色强调 */

  --kang-egg: #F0B429;            /* 警告/提示主色 */
  --kang-egg-soft: #FBF0D3;       /* 警告浅背景 */

  --kang-tomato: #D8432F;         /* 错误/危险主色 */
  --kang-tomato-soft: #FBE5E0;    /* 错误浅背景 */

  --kang-celadon: #2E7DA6;        /* 辅助色：青瓷蓝（信息/中性强调） */
  --kang-celadon-soft: #E1EFF6;   /* 信息浅背景 */

  /* 中性色：墨/次要/边线/背景（灰度体系统一为"瓷砖白+墨绿灰"） */
  --kang-ink: #232B26;            /* 主文本 */
  --kang-muted: #6E7A72;          /* 次要文本/禁用态 */
  --kang-line: #DFE7E0;           /* 边线/分隔线 */
  --kang-line-soft: #E9ECF0;      /* 次级边线（极淡） */
  --kang-tile: #F2F5F1;           /* 瓷砖背景（页面底色） */
  --kang-card: #FFFFFF;           /* 卡片/面板纯白 */

  /* 语义色（状态/反馈） */
  --kang-ok: var(--kang-green);
  --kang-ok-bg: var(--kang-green-soft);
  --kang-warn: var(--kang-egg);
  --kang-warn-bg: var(--kang-egg-soft);
  --kang-danger: var(--kang-tomato);
  --kang-danger-bg: var(--kang-tomato-soft);
  --kang-info: var(--kang-celadon);
  --kang-info-bg: var(--kang-celadon-soft);

  /* 字体栈 */
  --kang-font: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --kang-serif: "Songti SC", "STSong", "SimSun", serif;
  --kang-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* 字号刻度（禁止使用 13px/17px/19px 等奇数值） */
  --kang-text-xs: 11px;    /* 辅助/时间戳 */
  --kang-text-sm: 12px;    /* 次要文本/标签 */
  --kang-text-base: 14px;  /* 正文基准（移动端） */
  --kang-text-md: 15px;    /* 正文加强/按钮 */
  --kang-text-lg: 16px;    /* 正文基准（桌面端）/ 表单输入 */
  --kang-text-xl: 18px;    /* 小标题 */
  --kang-text-2xl: 22px;   /* 页面标题 */
  --kang-text-3xl: 26px;   /* 一级标题 */

  /* 间距刻度（4px 基准，禁止 11/13/17 等奇数值） */
  --kang-space-1: 4px;
  --kang-space-2: 8px;
  --kang-space-3: 12px;
  --kang-space-4: 16px;
  --kang-space-5: 20px;
  --kang-space-6: 24px;
  --kang-space-8: 32px;
  --kang-space-10: 40px;
  --kang-space-12: 48px;

  /* 间距半格刻度（紧凑场景/表单/输入框水平内边距） */
  --kang-space-1h: 6px;   /* half-step：按钮组间距等紧凑场景 */
  --kang-space-2h: 10px;  /* 中半格：表单元素间距 */
  --kang-space-3h: 14px;  /* 大半格：标题间距/输入框水平内边距 */
  --kang-space-sheet: 18px; /* bottom-sheet 水平内边距 */

  /* 圆角刻度（禁止 5px/7px/9px/13px 等随意值） */
  --kang-radius-sm: 4px;   /* 小元素（pill/tag） */
  --kang-radius-md: 8px;   /* 表单/按钮 */
  --kang-radius-lg: 12px;  /* 卡片 */
  --kang-radius-xl: 16px;  /* 大卡片/模态框 */
  --kang-radius-full: 50%; /* 圆形头像/图标 */

  /* 阴影 */
  --kang-shadow-sm: 0 2px 10px rgba(35, 43, 38, 0.07);   /* 卡片悬浮 */
  --kang-shadow-md: 0 3px 14px rgba(35, 43, 38, 0.08);   /* 强调卡片 */
  --kang-shadow-lg: 0 6px 24px rgba(35, 43, 38, 0.12);   /* 模态框 */

  /* 过渡 */
  --kang-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========================================
   2. 全局基础样式
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--kang-font);
  font-size: var(--kang-text-base);
  color: var(--kang-ink);
  background: var(--kang-tile);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kang-business-context {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--kang-space-2);
  width: 100%;
  margin: 0 0 var(--kang-space-3);
  padding: var(--kang-space-2) var(--kang-space-3);
  border: 1px solid var(--kang-line);
  border-radius: var(--kang-radius-md);
  background: var(--kang-card);
  color: var(--kang-ink);
  font-size: var(--kang-text-sm);
}

.kang-business-context span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kang-business-context__title {
  grid-column: 1 / -1;
  padding-bottom: var(--kang-space-2);
  border-bottom: 1px solid var(--kang-line);
  color: var(--kang-ink);
  font-size: var(--kang-text-sm);
  font-weight: 700;
}

.kang-business-context b {
  display: block;
  margin-bottom: 2px;
  color: var(--kang-muted);
  font-size: var(--kang-text-xs);
  font-weight: 600;
}

.status-badge {
  gap: 4px;
  align-items: center;
}

@media (max-width: 900px) {
  .kang-business-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .kang-business-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ========================================
   3. 统一组件类（Button / Card / Pill / Message）
   ======================================== */

/* 按钮：主按钮（绿色） */
.kang-btn,
.btn {
  display: inline-block;
  padding: var(--kang-space-3) var(--kang-space-6);
  border: 0;
  border-radius: var(--kang-radius-md);
  background: var(--kang-green);
  color: #fff;
  font-size: var(--kang-text-md);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--kang-transition), transform var(--kang-transition);
  user-select: none;
}

.kang-btn:hover,
.btn:hover {
  background: var(--kang-green-hi);
}

.kang-btn:active,
.btn:active {
  background: var(--kang-green-deep);
  transform: scale(0.98);
}

.kang-btn:disabled,
.btn:disabled {
  background: var(--kang-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 按钮变体：次要按钮（描边） */
.kang-btn-secondary,
.btn-secondary {
  background: transparent;
  border: 1px solid var(--kang-green);
  color: var(--kang-green);
}

.kang-btn-secondary:hover,
.btn-secondary:hover {
  background: var(--kang-green-soft);
}

.kang-btn-secondary:active,
.btn-secondary:active {
  background: var(--kang-green-soft);
  border-color: var(--kang-green-deep);
}

/* 按钮变体：危险按钮 */
.kang-btn-danger,
.btn-danger {
  background: var(--kang-tomato);
}

.kang-btn-danger:hover,
.btn-danger:hover {
  background: #C23626;
}

.kang-btn-danger:active,
.btn-danger:active {
  background: #A82E1F;
}

/* 卡片容器 */
.kang-card,
.card {
  background: var(--kang-card);
  border: 1px solid var(--kang-line);
  border-radius: var(--kang-radius-lg);
  padding: var(--kang-space-4);
  margin-bottom: var(--kang-space-3);
}

.kang-card-shadow,
.card-shadow {
  box-shadow: var(--kang-shadow-sm);
  border: 0;
}

/* 徽章/标签（pill） */
.kang-pill,
.pill {
  display: inline-block;
  padding: 2px var(--kang-space-2);
  border-radius: var(--kang-radius-sm);
  font-size: var(--kang-text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* pill 颜色变体 */
.kang-pill.g,
.pill.g {
  background: var(--kang-ok-bg);
  color: var(--kang-ok);
}

.kang-pill.y,
.pill.y {
  background: var(--kang-warn-bg);
  color: #8A6509; /* 稍深的橙棕，保证在浅黄背景上可读 */
}

.kang-pill.r,
.pill.r {
  background: var(--kang-danger-bg);
  color: var(--kang-danger);
}

.kang-pill.b,
.pill.b {
  background: var(--kang-info-bg);
  color: var(--kang-info);
}

/* 消息提示（toast / inline message） */
.kang-msg,
.msg {
  padding: var(--kang-space-2) var(--kang-space-3);
  border-radius: var(--kang-radius-sm);
  font-size: var(--kang-text-sm);
  min-height: 20px; /* 防止空内容时塌陷 */
  line-height: 1.5;
  margin: var(--kang-space-2) 0;
}

.kang-msg.ok,
.msg.ok {
  background: var(--kang-ok-bg);
  color: var(--kang-ok);
}

.kang-msg.err,
.msg.err {
  background: var(--kang-danger-bg);
  color: var(--kang-danger);
}

.kang-msg.warn,
.msg.warn {
  background: var(--kang-warn-bg);
  color: #8A6509;
}

.kang-msg.info,
.msg.info {
  background: var(--kang-info-bg);
  color: var(--kang-info);
}


/* ========================================
   4. 表单控件统一样式
   ======================================== */

input,
select,
textarea {
  width: 100%;
  padding: var(--kang-space-2) var(--kang-space-3);
  border: 1px solid var(--kang-line);
  border-radius: var(--kang-radius-md);
  font-size: var(--kang-text-lg);
  font-family: var(--kang-font);
  color: var(--kang-ink);
  background: var(--kang-card);
  transition: border-color var(--kang-transition), box-shadow var(--kang-transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--kang-green);
  box-shadow: 0 0 0 3px var(--kang-green-soft);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--kang-tile);
  color: var(--kang-muted);
  cursor: not-allowed;
}

textarea {
  min-height: 64px;
  resize: vertical;
}

/* placeholder 颜色 */
::placeholder {
  color: var(--kang-muted);
  opacity: 0.7;
}


/* ========================================
   5. 工具类（Text / Spacing / Color）
   ======================================== */

/* 文本颜色 */
.kang-text-muted,
.muted {
  color: var(--kang-muted);
}

.kang-text-ok,
.ok {
  color: var(--kang-ok);
}

.kang-text-warn,
.warn {
  color: #8A6509; /* 深橙棕，和 pill.y 统一 */
}

.kang-text-danger,
.err {
  color: var(--kang-danger);
}

.kang-text-info {
  color: var(--kang-info);
}

/* 字号 */
.kang-text-xs { font-size: var(--kang-text-xs); }
.kang-text-sm { font-size: var(--kang-text-sm); }
.kang-text-base { font-size: var(--kang-text-base); }
.kang-text-md { font-size: var(--kang-text-md); }
.kang-text-lg { font-size: var(--kang-text-lg); }
.kang-text-xl { font-size: var(--kang-text-xl); }
.kang-text-2xl { font-size: var(--kang-text-2xl); }
.kang-text-3xl { font-size: var(--kang-text-3xl); }

/* 字重 */
.kang-font-normal { font-weight: 400; }
.kang-font-medium { font-weight: 500; }
.kang-font-semibold { font-weight: 600; }
.kang-font-bold { font-weight: 700; }

/* 显示/隐藏 */
.kang-hide,
.hide {
  display: none !important;
}


/* ========================================
   6. 模态框/浮层统一样式
   ======================================== */

.kang-modal,
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 50, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--kang-space-6);
}

.kang-modal .box,
.modal .box {
  background: var(--kang-card);
  border-radius: var(--kang-radius-xl);
  padding: var(--kang-space-6);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--kang-shadow-lg);
}

.kang-modal h3,
.modal h3 {
  font-size: var(--kang-text-xl);
  margin-bottom: var(--kang-space-3);
}


/* ========================================
   7. 响应式断点辅助（移动优先）
   ======================================== */

/* 移动端（默认）：<= 640px */
/* 平板端：641px - 1024px */
@media (min-width: 641px) {
  body {
    font-size: var(--kang-text-lg); /* 桌面端正文 16px */
  }
}

/* 桌面端：>= 1025px */
@media (min-width: 1025px) {
  /* 可按需添加桌面端特定样式 */
}


/* ========================================
   8. 打印样式（报表页优化）
   ======================================== */

@media print {
  body {
    background: white;
    color: black;
  }

  .kang-card,
  .card {
    border: 1px solid #ddd;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .kang-btn,
  .btn,
  nav,
  header {
    display: none;
  }
}


/* ========================================
   9. 兼容层：旧类名映射（渐进式迁移）
   ======================================== */

/*
  说明：为了让旧页面平滑迁移，保留部分旧类名作为别名。
  迁移完成后可以删除这一节。
*/

/* admin.css 旧变量映射 */
:root {
  --bg: var(--kang-tile);
  --panel: var(--kang-card);
  --ink: var(--kang-ink);
  --muted: var(--kang-muted);
  --line: var(--kang-line);
  --line-soft: var(--kang-line-soft);
  --accent: var(--kang-green);      /* admin.css 的蓝色改为绿色统一 */
  --accent-weak: var(--kang-green-soft);
  --ok: var(--kang-ok);
  --ok-bg: var(--kang-ok-bg);
  --warn: var(--kang-warn);
  --warn-bg: var(--kang-warn-bg);
  --danger: var(--kang-danger);
  --danger-bg: var(--kang-danger-bg);
  --info: var(--kang-info);
  --info-bg: var(--kang-info-bg);
  --mono: var(--kang-mono);

  /* family.html 等页面旧变量映射 */
  --c: var(--kang-green);
  --c-hi: var(--kang-green-hi);
  --card: var(--kang-card);
  --green: var(--kang-green);
  --green-hi: var(--kang-green-hi);
  --green-soft: var(--kang-green-soft);
  --egg: var(--kang-egg);
  --egg-soft: var(--kang-egg-soft);
  --tomato: var(--kang-tomato);
  --tomato-soft: var(--kang-tomato-soft);
  --celadon: var(--kang-celadon);
  --celadon-soft: var(--kang-celadon-soft);
  --serif: var(--kang-serif);

  /* attend/duty/staff 等页面旧变量映射 */
  --yellow: var(--kang-egg);
  --red: var(--kang-tomato);
  --head: var(--kang-ink);
  --zebra: #F8F9FB; /* admin.css 斑马纹背景，暂时保留 */
}