/* ============================================================
   base.css — 设计令牌 / 重置 / 排版
   方向：素白轻量 Light Minimal（浅色外壳 + 细线分隔 + 中铁蓝主色 + 橙色警示点缀）
   ============================================================ */

:root {
  /* —— 浅色外壳（侧栏 / 向导头） —— */
  --ink-0: #F3F6F9;
  --ink-1: #FAFBFD;
  --ink-2: #F1F4F8;
  --ink-3: #E9EEF5;
  --ink-line: #E2E8F0;
  --grid-line: rgba(124, 148, 180, 0.07);
  --grid-strong: rgba(124, 148, 180, 0.13);
  --ink-text: #3A4A61;
  --ink-text-dim: #8794A6;

  /* —— 纸面（内容区） —— */
  --paper: #F4F6F9;
  --card: #FFFFFF;
  --line: #DEE4EC;
  --line-soft: #ECEFF4;

  /* —— 文字 —— */
  --text: #26303C;
  --text-2: #5D6B7D;
  --text-3: #929FAF;

  /* —— 语义色 —— */
  --orange: #F2620F;
  --orange-deep: #CE4F04;
  --orange-tint: #FDEEE3;
  --orange-line: #F4CDAE;
  --blue: #005BAC;
  --blue-deep: #00417D;
  --blue-light: #2E7CC4;
  --blue-tint: #DCEAF7;
  --blue-line: #C4D8EA;
  --sel-line: #B8D4EC;
  --sel-tint: #CFE2F5;
  --green: #2E8B57;
  --green-tint: #E6F4EC;
  --green-line: #BCDDCB;
  --red: #D6453D;
  --red-tint: #FBEAE9;
  --red-line: #E5B7B4;
  --red-text: #9E332D;
  --amber: #B97D0A;
  --amber-deep: #9A6B1F;
  --amber-tint: #FBF3E1;
  --amber-line: #EBDCB4;
  --teal: #0C8599;
  --teal-tint: #E4F4F7;
  --teal-line: #B8DFE8;
  --gray: #71808F;
  --gray-tint: #EDF0F3;

  /* —— 交互态 —— */
  --hover-line: #B8C4D2;
  --hover-bg: #F7F9FB;

  /* —— 字体 —— */
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono",
    Consolas, "Liberation Mono", monospace;

  /* —— 形状 —— */
  --r: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 6px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.08), 0 1px 4px rgba(16, 24, 40, 0.05);
  --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.14);

  --sidebar-w: 232px;
  --header-h: 60px;
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--blue-deep);
}

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

input,
select,
textarea {
  font-family: inherit;
}

::selection {
  background: rgba(0, 91, 172, 0.2);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #C3CDD9;
  border-radius: 6px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover {
  background: #A8B6C6;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 排版工具 ---------- */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mono {
  font-family: var(--mono);
}

.muted {
  color: var(--text-2);
}

.dim {
  color: var(--text-3);
}

.strong {
  font-weight: 600;
}

.text-r {
  text-align: right;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 危险条纹（工程警示元素） */
.hazard {
  background: repeating-linear-gradient(
    -45deg,
    var(--orange) 0 9px,
    #FBE2D2 9px 18px
  );
}

/* 十字定位标记（图纸角标） */
.crosshair {
  position: relative;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.crosshair::before {
  width: 17px;
  height: 17px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(var(--grid-strong), var(--grid-strong))
      center/100% 1px no-repeat,
    linear-gradient(var(--grid-strong), var(--grid-strong)) center/1px 100%
      no-repeat;
}

/* 进出场动画 */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideL {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}