/* ═════════════════════════════════════════════════════════════
 * WETE Family · Nordic Design Tokens (single source)
 * 2026-07-17 拍板 · 用户选定
 * 灰白 + 石墨 + 森林绿 + 暖橙 · Linear/Notion 感 · 数据密度高
 * ═════════════════════════════════════════════════════════════ */

:root {
  /* ─── Color · Bg + Ink ─── */
  --bg:        #f6f7f9;
  --card:      #ffffff;
  --border:    #d1d5db;   /* 加深: 之前 #e4e6ea 太淡 · 卡看不出框 */
  --ink:       #2b3138;   /* Graphite · main text (H1/H2) */
  --ink-2:    #62687a;    /* Slate · body text */
  --ink-3:    #98a0af;    /* Fade · small/hint */

  /* ─── Color · Brand ─── */
  --forest:   #1e4d2b;    /* Brand green · CampAI logo */
  --forest-2: #2d5c34;
  --warm:     #d97e3a;    /* Warm accent · highlight */
  --warm-2:   #b8641f;

  /* ─── Color · Semantic ─── */
  --ok:       #059669;    /* low / OK · green */
  --warn:     #d97706;    /* mid · amber */
  --bad:      #dc2626;    /* high / danger · red */
  --info:     #2563eb;    /* info · blue */

  /* ─── Radius ─── */
  --r-card:   12px;
  --r-btn:    8px;
  --r-pill:   6px;

  /* ─── Spacing ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
}

/* ═══ Type · Inter loaded on demand per page ═══ */

/* ═══ Base reset (safe) ═══ */
.wete-nordic * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* ═══ Card ═══ */
.wt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.wt-card-flat { border: 1px solid var(--border); }

/* ═══ Chip · left 3px accent (Nordic 特征) ═══ */
.wt-chip {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-pill);
  padding: 8px 10px 10px;
  min-width: 0;
}
.wt-chip-label {
  font-size: 10px; color: var(--ink-3); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wt-chip-value { font-size: 14px; color: var(--ink); font-weight: 700; }
.wt-chip.ok    { border-left-color: var(--ok); }
.wt-chip.ok .wt-chip-value    { color: var(--ok); }
.wt-chip.warn  { border-left-color: var(--warn); }
.wt-chip.warn .wt-chip-value  { color: var(--warn); }
.wt-chip.bad   { border-left-color: var(--bad); }
.wt-chip.bad .wt-chip-value   { color: var(--bad); }
.wt-chip.info  { border-left-color: var(--info); }
.wt-chip.info .wt-chip-value  { color: var(--info); }

/* ═══ Button ═══ */
.wt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border: 0; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  letter-spacing: -0.005em;
  transition: opacity 0.15s, background 0.15s;
  font-family: inherit;
}
.wt-btn-primary   { background: var(--forest); color: #fff; }
.wt-btn-primary:hover   { background: var(--forest-2); }
.wt-btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.wt-btn-secondary:hover { background: var(--bg); }
.wt-btn-tertiary  { background: transparent; color: var(--forest); padding: 8px 4px; }
.wt-btn-danger    { background: var(--bad); color: #fff; }

/* ═══ Alert ═══ */
.wt-alert {
  padding: 12px 14px;
  border-radius: var(--r-card);
  border-left: 4px solid;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 8px;
  font-size: 14px; line-height: 1.5;
}
.wt-alert-red    { background: rgba(220,38,38,0.06); border-left-color: var(--bad); color: #7f1717; }
.wt-alert-amber  { background: rgba(217,119,6,0.08); border-left-color: var(--warn); color: #78500d; }
.wt-alert-green  { background: rgba(5,150,105,0.06); border-left-color: var(--ok); color: #0b4d3e; }
.wt-alert-blue   { background: rgba(37,99,235,0.06); border-left-color: var(--info); color: #1a3d7a; }

/* ═══ Metric block ═══ */
.wt-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.wt-metric-label {
  font-size: 11px; color: var(--ink-3); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.wt-metric-value {
  font-size: 24px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.wt-metric-value .u { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.wt-metric-delta {
  font-size: 12px; color: var(--ok); font-weight: 600;
  margin-top: 2px;
}
.wt-metric-delta.down { color: var(--bad); }

/* ═══ Tag (small pill · non-clickable) ═══ */
.wt-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: rgba(30,77,43,0.08);
  color: var(--forest);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.wt-tag-warm { background: rgba(217,126,58,0.1); color: var(--warm-2); }
.wt-tag-ok   { background: rgba(5,150,105,0.1);  color: var(--ok); }
.wt-tag-warn { background: rgba(217,119,6,0.12); color: var(--warn); }
.wt-tag-bad  { background: rgba(220,38,38,0.1);  color: var(--bad); }
.wt-tag-info { background: rgba(37,99,235,0.1);  color: var(--info); }

/* ═══ Section title ═══ */
.wt-sec-title {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* ═══ Type helper ═══ */
.wt-h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.wt-h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.wt-body  { font-size: 15px; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.wt-small { font-size: 12px; font-weight: 600; color: var(--ink-3);
            text-transform: uppercase; letter-spacing: 0.06em; }
.wt-mono  { font-family: 'SF Mono', Consolas, monospace; font-size: 13px; }