/* ==========================================================================
   utilities.css · 工具类层（Utility Layer）
   --------------------------------------------------------------------------
   引入顺序：tokens → base → components → utilities → page-*
   （工具类放在 components 之后，允许覆盖组件默认值；放在页面级之前，
     让页面级仍能针对具体区块做覆盖。）

   ⚠️ 使用约定
     1. 工具类只用于「单个属性的微调」，不要把整块布局写成工具类堆砌。
        区块样式请写进对应的 page-*.css，用语义化类名。
     2. 本文件的存在是为了消灭 HTML 里的 style="" 硬编码。
        如果你要写第 3 个以上工具类才能表达一个样式，说明它该变成一个组件类。
     3. 命名：u-<属性缩写>-<值>，值取自设计令牌时直接用令牌档位名。
   ========================================================================== */

/* ==========================================================================
   1. 间距（Spacing）
   --------------------------------------------------------------------------
   基于 --sp-* 令牌：1=4px 2=8px 3=12px 4=16px 5=24px 6=32px 7=48px 8=64px
   ========================================================================== */

/* --- margin-top --- */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-0 { margin-top: 0; }

/* --- margin-bottom --- */
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-0 { margin-bottom: 0; }

/* --- 复合：常用于「标题下方留白 + 微小上间距」的提示行 --- */
.u-my-3-6  { margin: var(--sp-3) 0 6px; }        /* 段间距 + 6px 微调 */
.u-my-3-5  { margin: var(--sp-3) 0 var(--sp-5); } /* 上下不等距，常用于卡片标题 */

/* --- 水平居中容器 --- */
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* --- padding --- */
.u-p-4 { padding: var(--sp-4); }

/* ==========================================================================
   2. 布局与对齐（Layout / Flex）
   ========================================================================== */

.u-flex        { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-col    { flex-direction: column; }
.u-items-start { align-items: flex-start; }
.u-items-center{ align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-flex-wrap   { flex-wrap: wrap; }
.u-ml-auto     { margin-left: auto; }

/* 常用组合：图标 + 文字 的行内排布（比堆三个工具类更语义化） */
.u-icon-row {
  display: flex;
  align-items: left;
  gap: 7px;
}

/* 独立的 gap 调整：用于已经是 flex 的容器 */
.u-gap-3 { gap: var(--sp-3); }

/* ==========================================================================
   3. 文本（Text）
   --------------------------------------------------------------------------
   与 .t-* / .c-* 的分工：
     .t-h2 / .t-sm 等  → 定义「这个文本是什么」（语义，带字号+行高+字重）
     .u-text-right 等  → 定义「这段文本怎么排」（纯对齐，不改字号）
   ========================================================================== */

.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }
.u-nowrap      { white-space: nowrap; }
.u-bold        { font-weight: 700; }
.u-medium      { font-weight: 500; }

/* ==========================================================================
   4. 主题色文本（Theme Text）
   --------------------------------------------------------------------------
   深蓝底（.sec--navy / .footer）上的分级文字亮度。
   这四个值是当初为满足 WCAG AA 对比度实算确定的，不要随手改：
     最亮 #FFFFFF → 次级 #DCE6F5 → 说明 #BFD3EC → 最弱 #7E96B8
   对应的对比度依次为 15.8:1 / 12.1:1 / 9.2:1 / 5.4:1（均达 AA）。
   ========================================================================== */

.u-on-navy-2 { color: #DCE6F5; }  /* 次级信息：副标题、单位名 */
.u-on-navy-3 { color: #BFD3EC; }  /* 说明文字：补充说明、小字注解 */
.u-on-navy-4 { color: #7E96B8; }  /* 最弱一级：版权、脚注、分割标注 */

/* ==========================================================================
   5. 尺寸（Width）
   --------------------------------------------------------------------------
   表单里用于对齐若干并列控件的宽度。用 ch/px 固定值是有意的：
   这些是「控件宽度」而非「内容宽度」，需要跨浏览器稳定。
   ========================================================================== */

.u-w-64  { width: 64px; }
.u-w-120 { width: 120px; }
.u-w-130 { width: 130px; }
.u-w-180 { width: 180px; }
.u-mw-360 { max-width: 360px; }

/* ==========================================================================
   6. 单行截断（Truncate）
   ========================================================================== */

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

/* ==========================================================================
   7. 演示态专用
   --------------------------------------------------------------------------
   【上线前请整体删除本节】
   这批类只服务于「原型评审」阶段：在页面上显式标注哪些数据是演示数据。
   接入真实后端后，应连同 HTML 里对应的元素一并移除。
   ========================================================================== */

/* 页脚扁平化：去掉分割线与上间距，用于「只有一行版权」的紧凑页脚 */
.u-footer-flat {
  border: 0;
  padding-top: 0;
}

/* 首屏副标题：深蓝底上的单位署名行 */
.u-hero-sub {
  margin: 2px 0 0;
  color: #DCE6F5;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.u-demo-note {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--amber-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--amber-50, #FDF7EC);
  color: var(--ink-700);
  font-size: var(--fs-sm);
  line-height: 1.6;
}