/* ============================================================
   23etool Base 层：基础排版、布局、Bootstrap 变量覆盖
   在 tokens.css 之后、components.css 之前加载。
   思路：覆盖 Bootstrap 5 的 CSS 变量，使原有 .btn/.form-control
   等标记自动获得新配色，避免逐处改类名。
   ============================================================ */

/* ---- 覆盖 Bootstrap 主题变量 ---- */
:root {
  --bs-primary:        var(--c-primary);
  --bs-primary-rgb:    37, 99, 235;
  --bs-body-bg:        var(--c-bg);
  --bs-body-color:     var(--c-text);
  --bs-border-color:   var(--c-border);
  --bs-border-radius:  var(--r-md);
  --bs-link-color:     var(--c-primary);
  --bs-link-hover-color: var(--c-primary-strong);
  --bs-font-sans-serif: "PingFang SC", "Microsoft YaHei", "Segoe UI",
                        system-ui, -apple-system, Arial, sans-serif;
}

/* ---- 全局基础 ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--c-text);
  background-color: var(--c-bg);
  min-height: 100vh;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-3); color: var(--c-text-2); }

a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-primary-strong); }

img, svg, video { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--c-border); opacity: 1; margin: var(--sp-5) 0; }

/* 选中文本 */
::selection { background: var(--c-primary-ring); }

/* 焦点可见性（无障碍） */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- 布局容器 ---- */
.ui-container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.ui-page {
  /* 为固定顶栏预留高度 */
  padding-top: calc(var(--topbar-h) + var(--sp-5));
  padding-bottom: var(--sp-7);
}

/* 网格工具 */
.ui-grid { display: grid; gap: var(--sp-5); }
.ui-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ui-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); }

@media (max-width: 992px) {
  .ui-grid-3, .ui-grid-4, .ui-split { grid-template-columns: 1fr; }
}

/* ---- 工具类 ---- */
.ui-muted { color: var(--c-text-3) !important; }
.ui-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.ui-divider { height: 1px; background: var(--c-border); margin: var(--sp-4) 0; border: 0; }

/* 兼容旧类：原 bgcolor1/bgcolor2/headborder 等碎片化样式，
   统一映射到新设计，避免大面积改模板 */
.bgcolor1, .bgcolor2 { background: transparent !important; }
.headborder1, .headborder2, .kj-div {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--sp-4) !important;
}
.export-button, .click-button {
  background: var(--c-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 10px 18px !important;
}
.btn-calculate {
  background: var(--c-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}