/* ==========================================================================
   base.css — 设计变量与基础样式
   工程教育认证数据看板
   ========================================================================== */

:root {
  /* 色板 */
  --bg: #f2f5fa;
  --bg-deep: #e9eef7;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #eef2f9;
  --border: #e2e8f2;
  --border-strong: #d3dcea;

  --text-1: #17233d;
  --text-2: #4d5f7c;
  --text-3: #8595af;

  --primary: #2557d6;
  --primary-2: #4a7dff;
  --primary-soft: #e8efff;
  --teal: #0f9d8f;
  --teal-soft: #e2f6f3;
  --amber: #d97706;
  --amber-soft: #fdf1e0;
  --violet: #7c3aed;
  --violet-soft: #f1eafd;
  --green: #16a34a;
  --green-soft: #e6f7ec;
  --red: #dc2626;
  --red-soft: #fdeaea;
  --cyan: #0891b2;

  /* 图表调色（全局统一） */
  --c1: #2557d6;
  --c2: #12b5a5;
  --c3: #f59e0b;
  --c4: #7c3aed;
  --c5: #ef5b7b;
  --c6: #0891b2;
  --c7: #84cc16;
  --c8: #6366f1;

  /* 形状与阴影 */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(23, 35, 61, 0.05), 0 2px 6px rgba(23, 35, 61, 0.05);
  --shadow-md: 0 6px 18px rgba(23, 35, 61, 0.08);
  --shadow-lg: 0 14px 40px rgba(23, 35, 61, 0.12);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* 布局 */
  --header-h: 68px;
  --nav-h: 52px;
  --max-w: 1320px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
  background:
    radial-gradient(1200px 500px at 85% -100px, rgba(74, 125, 255, 0.09), transparent 60%),
    radial-gradient(900px 420px at 5% -120px, rgba(18, 181, 165, 0.08), transparent 55%),
    var(--bg);
  min-height: 100vh;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding-left: 1.2em;
}

a {
  color: var(--primary);
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img, svg {
  display: block;
}

::selection {
  background: rgba(37, 87, 214, 0.16);
}

/* 滚动条（Webkit） */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #c6d1e3;
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #aab9d2;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 通用文本工具 ---------- */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-primary { color: var(--primary); }
.text-teal { color: var(--teal); }
.text-amber { color: var(--amber); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }

.small { font-size: 12px; }
.tiny { font-size: 11px; }

.nowrap { white-space: nowrap; }

/* ---------- 徽标 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge--accent {
  color: #fff;
  background: linear-gradient(135deg, #2b5cff, #12b5a5);
  border: none;
}

.badge--soft-primary { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.badge--soft-teal { color: var(--teal); background: var(--teal-soft); border-color: transparent; }
.badge--soft-amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.badge--soft-green { color: var(--green); background: var(--green-soft); border-color: transparent; }
.badge--soft-violet { color: var(--violet); background: var(--violet-soft); border-color: transparent; }

/* ---------- 小圆点 ---------- */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.dot--teal { background: var(--teal); }
.dot--amber { background: var(--amber); }
.dot--violet { background: var(--violet); }
.dot--green { background: var(--green); }
.dot--red { background: var(--red); }
.dot--gray { background: var(--text-3); }

/* ---------- 动画 ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
}