/* ════════════════════════════════════════════════════════════════════════
   ★ utilities.css · v2 LAYER 3 · single-responsibility utility classes
   ────────────────────────────────────────────────────────────────────────
   作用: 写新模板时, 优先 compose utility · 不再 inline `box-shadow: 0 8px ...`
   规则: 一类一职责 · 全用 var(--*) 引 tokens.css · light/dark 自动 swap
   引用: 跟 tokens.css 同级 · 任 context (PPT / Gallery / Admin) 都可用

   命名 convention:
     .u-<concept>-<variant>     ← 单职责 utility
     例: .u-shadow-md / .u-border-strong / .u-bg-brand

   未来要加新 token? 在这里加对应 utility · 不在 template 里硬写
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   ① SHADOW utility · 一行换 token, 不再 inline
   ──────────────────────────────────────────────────────────────────── */
.u-shadow-none   { box-shadow: var(--shadow-none); }
.u-shadow-sm     { box-shadow: var(--shadow-sm); }
.u-shadow-md     { box-shadow: var(--shadow-md); }
.u-shadow-lg     { box-shadow: var(--shadow-lg); }
.u-shadow-brand  { box-shadow: var(--shadow-brand); }
.u-shadow-rose   { box-shadow: var(--shadow-rose); }
.u-shadow-elevated { box-shadow: var(--shadow-elevated); }

/* ② RING utility · 功能性环 (描边 / status / dot)
   不是装饰 shadow · 是 outline 替代品
   ──────────────────────────────────────────────────────────────────── */
.u-ring-line    { box-shadow: var(--ring-line); }
.u-ring-brand   { box-shadow: var(--ring-brand); }
.u-ring-rose    { box-shadow: var(--ring-rose); }
.u-ring-strong  { box-shadow: var(--ring-strong); }
.u-ring-inset-brand { box-shadow: var(--ring-inset-brand); }

/* ③ BORDER utility */
.u-border-none     { border: 0; }
.u-border-hairline { border: var(--border-hairline); }
.u-border-default  { border: var(--border-default); }
.u-border-strong   { border: var(--border-strong); }
.u-border-brand    { border: var(--border-brand); }
.u-border-rose     { border: var(--border-rose); }

.u-border-t-strong { border-top: var(--border-strong); }
.u-border-b-strong { border-bottom: var(--border-strong); }
.u-border-l-strong { border-left: var(--border-strong); }
.u-border-r-strong { border-right: var(--border-strong); }
.u-border-t-brand  { border-top: var(--border-brand); }
.u-border-b-brand  { border-bottom: var(--border-brand); }
.u-border-l-brand  { border-left: var(--border-brand); }
.u-border-r-brand  { border-right: var(--border-brand); }

/* ④ RADIUS utility */
.u-radius-0    { border-radius: var(--r-0); }
.u-radius-sm   { border-radius: var(--r-sm); }
.u-radius-md   { border-radius: var(--r-md); }
.u-radius-lg   { border-radius: var(--r-lg); }
.u-radius-pill { border-radius: var(--r-pill); }

/* ⑤ BG utility · 用 token, 不写 hex */
.u-bg-canvas      { background: var(--c-canvas); }
.u-bg-surface     { background: var(--c-surface); }
.u-bg-surface-tint { background: var(--c-surface-tint); }
.u-bg-card        { background: var(--c-card); }
.u-bg-card-strong { background: var(--c-card-strong); }
.u-bg-brand       { background: var(--c-brand); color: var(--c-text-on-brand); }
.u-bg-brand-10    { background: var(--c-brand-10); }
.u-bg-rose        { background: var(--c-rose); color: var(--c-text-on-brand); }
.u-bg-rose-10     { background: var(--c-rose-10); }
.u-bg-success-10  { background: var(--c-success-10); }
.u-bg-danger-10   { background: var(--c-danger-10); }

/* ⑥ TEXT utility · color + weight + family + transform */
.u-text-strong  { color: var(--c-text-strong); }
.u-text-default { color: var(--c-text); }
.u-text-muted   { color: var(--c-text-muted); }
.u-text-brand   { color: var(--c-brand); }
.u-text-rose    { color: var(--c-rose); }
.u-text-success { color: var(--c-success); }
.u-text-danger  { color: var(--c-danger); }
.u-text-on-brand { color: var(--c-text-on-brand); }

.u-font-cn   { font-family: var(--f-cn); }
.u-font-en   { font-family: var(--f-en); }
.u-font-mono { font-family: var(--f-mono); }

.u-w-300 { font-weight: 300; }
.u-w-400 { font-weight: 400; }
.u-w-500 { font-weight: 500; }
.u-w-600 { font-weight: 600; }
.u-w-700 { font-weight: 700; }
.u-w-800 { font-weight: 800; }
.u-w-900 { font-weight: 900; }

.u-uppercase { text-transform: uppercase; letter-spacing: var(--ls-label); }
.u-tabular   { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ⑦ SPACING utility · padding / margin · 8px stop 系统 */
.u-p-1 { padding: var(--s-1); }   .u-p-2 { padding: var(--s-2); }   .u-p-3 { padding: var(--s-3); }
.u-p-4 { padding: var(--s-4); }   .u-p-5 { padding: var(--s-5); }   .u-p-6 { padding: var(--s-6); }
.u-p-7 { padding: var(--s-7); }   .u-p-8 { padding: var(--s-8); }   .u-p-9 { padding: var(--s-9); }

.u-px-4 { padding-left: var(--s-4); padding-right: var(--s-4); }
.u-px-5 { padding-left: var(--s-5); padding-right: var(--s-5); }
.u-px-6 { padding-left: var(--s-6); padding-right: var(--s-6); }
.u-px-7 { padding-left: var(--s-7); padding-right: var(--s-7); }
.u-py-3 { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.u-py-4 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.u-py-5 { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.u-py-6 { padding-top: var(--s-6); padding-bottom: var(--s-6); }

.u-gap-2 { gap: var(--s-2); }   .u-gap-3 { gap: var(--s-3); }
.u-gap-4 { gap: var(--s-4); }   .u-gap-5 { gap: var(--s-5); }
.u-gap-6 { gap: var(--s-6); }   .u-gap-7 { gap: var(--s-7); }

/* ⑧ FLEX / GRID quick utility (常用 layout 不再 inline) */
.u-flex     { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-row { display: flex; flex-direction: row; }
.u-items-center  { align-items: center; }
.u-items-start   { align-items: flex-start; }
.u-items-stretch { align-items: stretch; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-justify-start   { justify-content: flex-start; }

.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.u-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* ⑨ MOTION utility (slot · default 0 · token 控) */
.u-transition       { transition: all var(--duration-normal) var(--easing-default); }
.u-transition-fast  { transition: all var(--duration-fast) var(--easing-decisive); }

/* ⑩ OPACITY utility */
.u-opacity-disabled { opacity: var(--alpha-disabled); }
.u-opacity-muted    { opacity: var(--alpha-muted); }
.u-opacity-overlay  { opacity: var(--alpha-overlay); }
.u-opacity-ghost    { opacity: var(--alpha-ghost); }