/* =====================================================================
 * Foliage v1.0 — utilities.css
 * 原子工具类: 间距 / 尺寸 / 排版 / 显示 / Flex / 颜色
 * 基于 v0.9.72 utilities.css · 完全重写 · 2026-06-11
 *
 * v1.0: 清理所有硬编码 px 值，全部走 Token
 * ===================================================================== */

/* =====================================================================
 * §1 间距 (margin / padding / gap)
 * ===================================================================== */
/* margin-top */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-0  { margin-top: 0; }

/* margin-bottom */
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* margin-left */
.ml-4   { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* padding */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-0  { padding: 0; }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }


/* =====================================================================
 * §2 尺寸 (width / height)
 * ===================================================================== */
.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-60      { width: 60px; }
.w-80      { width: 80px; }
.w-120     { width: 120px; }
.max-w-320 { max-width: 320px; }
.min-h-200 { min-height: 200px; }


/* =====================================================================
 * §3 排版
 * ===================================================================== */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }

.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }
.fw-normal  { font-weight: normal; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.5px; }
.ws-nowrap  { white-space: nowrap; }

.leading-relaxed { line-height: var(--leading-relaxed); }

.muted-sm { font-size: var(--text-sm); color: var(--text-muted); }
.muted-xs { font-size: var(--text-xs); color: var(--text-muted); }
.hint     { font-size: var(--text-xs); color: var(--text-dim); }


/* =====================================================================
 * §4 显示
 * ===================================================================== */
.d-none        { display: none; }
.d-flex        { display: flex; }
.d-block       { display: block; }
.d-grid        { display: grid; }
.d-inline-flex { display: inline-flex; }
.inline-block  { display: inline-block; }


/* =====================================================================
 * §5 Flex
 * ===================================================================== */
.flex-1       { flex: 1; }
.flex-2       { flex: 2; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-end    { align-items: end; }
.justify-end  { justify-content: flex-end; }


/* =====================================================================
 * §6 颜色 / 背景
 * ===================================================================== */
.text-up     { color: var(--up-color); }
.text-down   { color: var(--down-color); }
.text-accent { color: var(--text-link); }
.text-muted  { color: var(--text-muted); }
.text-danger { color: var(--red); }
.text-warning { color: var(--yellow); }

.bg-surface   { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-bg        { background: var(--bg); }

.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-85 { opacity: 0.85; }


/* =====================================================================
 * §7 圆角 / 边框
 * ===================================================================== */
.rounded      { border-radius: var(--radius); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-full { border-radius: var(--radius-full); }
.border-1     { border: 1px solid var(--border); }
.border-none  { border: none; }


/* =====================================================================
 * §8 溢出
 * ===================================================================== */
.overflow-x-auto  { overflow-x: auto; }
.overflow-hidden  { overflow: hidden; }