/* Utilitas kecil — semuanya memakai token (styles/tokens.css). Dipakai di template JS
   sebagai ganti style="…" (inline style statis dilarang; lihat scripts/check-tokens.mjs).
   Semua !important: setara prioritas inline style yang digantikan. */

/* tampilan & tata letak */
.u-block { display: block !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-items-center { align-items: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-place-center { display: grid !important; place-items: center !important; }
.u-text-center { text-align: center !important; }
.u-w-full { width: 100% !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-self-start { justify-self: start !important; }
.u-min-w-0 { min-width: 0 !important; }

/* huruf */
.u-text-xs { font-size: var(--text-xs) !important; }
.u-text-sm { font-size: var(--text-sm) !important; }
.u-text-base { font-size: var(--text-base) !important; }
.u-text-md { font-size: var(--text-md) !important; }
.u-text-lg { font-size: var(--text-lg) !important; }
.u-text-xl { font-size: var(--text-xl) !important; }
.u-text-2xl { font-size: var(--text-2xl) !important; }
.u-text-3xl { font-size: var(--text-3xl) !important; }
.u-fw-medium { font-weight: var(--weight-medium) !important; }
.u-fw-bold { font-weight: var(--weight-bold) !important; }
.u-fw-heavy { font-weight: var(--weight-heavy) !important; }
.u-tracking-pin { letter-spacing: var(--tracking-pin) !important; }

/* warna teks (semantik) */
.u-c-text-2 { color: var(--text-2) !important; }
.u-c-danger { color: var(--danger) !important; }
.u-c-success { color: var(--success) !important; }
.u-c-accent { color: var(--accent) !important; }
.u-c-primary-ink { color: var(--primary-ink) !important; }

/* kotak ikon & avatar */
.u-sz-6 { width: var(--space-6) !important; height: var(--space-6) !important; }
.u-sz-8 { width: var(--space-8) !important; height: var(--space-8) !important; }
.u-sz-9 { width: 36px !important; height: 36px !important; }
.u-sz-10 { width: 40px !important; height: 40px !important; }
.u-sz-11 { width: 44px !important; height: 44px !important; }
.u-round { border-radius: var(--radius-full) !important; }
.u-rounded-md { border-radius: var(--radius-3-5) !important; }
.u-shadow-1 { box-shadow: var(--shadow-1) !important; }
.u-max-w-prose { max-width: 320px !important; }

/* pengisi ruang vertikal */
.u-spacer-3 { height: var(--space-3) !important; }
.u-spacer-4 { height: var(--space-4) !important; }
.u-spacer-6 { height: var(--space-6) !important; }
.u-spacer-8 { height: var(--space-8) !important; }

/* ===== jarak per sisi (dibuat scripts/_gen-utils.mjs dari skala --space-*; awalan u-) ===== */
.u-pt-0 { padding-top: 0 !important; }
.u-pt-0-5 { padding-top: var(--space-0-5) !important; }
.u-pt-1 { padding-top: var(--space-1) !important; }
.u-pt-1-5 { padding-top: var(--space-1-5) !important; }
.u-pt-2 { padding-top: var(--space-2) !important; }
.u-pt-2-5 { padding-top: var(--space-2-5) !important; }
.u-pt-3 { padding-top: var(--space-3) !important; }
.u-pt-3-5 { padding-top: var(--space-3-5) !important; }
.u-pt-4 { padding-top: var(--space-4) !important; }
.u-pt-4-5 { padding-top: var(--space-4-5) !important; }
.u-pt-5 { padding-top: var(--space-5) !important; }
.u-pt-6 { padding-top: var(--space-6) !important; }
.u-pt-8 { padding-top: var(--space-8) !important; }
.u-pt-12 { padding-top: var(--space-12) !important; }
.u-pr-0 { padding-right: 0 !important; }
.u-pr-0-5 { padding-right: var(--space-0-5) !important; }
.u-pr-1 { padding-right: var(--space-1) !important; }
.u-pr-1-5 { padding-right: var(--space-1-5) !important; }
.u-pr-2 { padding-right: var(--space-2) !important; }
.u-pr-2-5 { padding-right: var(--space-2-5) !important; }
.u-pr-3 { padding-right: var(--space-3) !important; }
.u-pr-3-5 { padding-right: var(--space-3-5) !important; }
.u-pr-4 { padding-right: var(--space-4) !important; }
.u-pr-4-5 { padding-right: var(--space-4-5) !important; }
.u-pr-5 { padding-right: var(--space-5) !important; }
.u-pr-6 { padding-right: var(--space-6) !important; }
.u-pr-8 { padding-right: var(--space-8) !important; }
.u-pr-12 { padding-right: var(--space-12) !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-0-5 { padding-bottom: var(--space-0-5) !important; }
.u-pb-1 { padding-bottom: var(--space-1) !important; }
.u-pb-1-5 { padding-bottom: var(--space-1-5) !important; }
.u-pb-2 { padding-bottom: var(--space-2) !important; }
.u-pb-2-5 { padding-bottom: var(--space-2-5) !important; }
.u-pb-3 { padding-bottom: var(--space-3) !important; }
.u-pb-3-5 { padding-bottom: var(--space-3-5) !important; }
.u-pb-4 { padding-bottom: var(--space-4) !important; }
.u-pb-4-5 { padding-bottom: var(--space-4-5) !important; }
.u-pb-5 { padding-bottom: var(--space-5) !important; }
.u-pb-6 { padding-bottom: var(--space-6) !important; }
.u-pb-8 { padding-bottom: var(--space-8) !important; }
.u-pb-12 { padding-bottom: var(--space-12) !important; }
.u-pl-0 { padding-left: 0 !important; }
.u-pl-0-5 { padding-left: var(--space-0-5) !important; }
.u-pl-1 { padding-left: var(--space-1) !important; }
.u-pl-1-5 { padding-left: var(--space-1-5) !important; }
.u-pl-2 { padding-left: var(--space-2) !important; }
.u-pl-2-5 { padding-left: var(--space-2-5) !important; }
.u-pl-3 { padding-left: var(--space-3) !important; }
.u-pl-3-5 { padding-left: var(--space-3-5) !important; }
.u-pl-4 { padding-left: var(--space-4) !important; }
.u-pl-4-5 { padding-left: var(--space-4-5) !important; }
.u-pl-5 { padding-left: var(--space-5) !important; }
.u-pl-6 { padding-left: var(--space-6) !important; }
.u-pl-8 { padding-left: var(--space-8) !important; }
.u-pl-12 { padding-left: var(--space-12) !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-0-5 { margin-top: var(--space-0-5) !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-1-5 { margin-top: var(--space-1-5) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-2-5 { margin-top: var(--space-2-5) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-3-5 { margin-top: var(--space-3-5) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-4-5 { margin-top: var(--space-4-5) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mt-12 { margin-top: var(--space-12) !important; }
.u-mr-0 { margin-right: 0 !important; }
.u-mr-0-5 { margin-right: var(--space-0-5) !important; }
.u-mr-1 { margin-right: var(--space-1) !important; }
.u-mr-1-5 { margin-right: var(--space-1-5) !important; }
.u-mr-2 { margin-right: var(--space-2) !important; }
.u-mr-2-5 { margin-right: var(--space-2-5) !important; }
.u-mr-3 { margin-right: var(--space-3) !important; }
.u-mr-3-5 { margin-right: var(--space-3-5) !important; }
.u-mr-4 { margin-right: var(--space-4) !important; }
.u-mr-4-5 { margin-right: var(--space-4-5) !important; }
.u-mr-5 { margin-right: var(--space-5) !important; }
.u-mr-6 { margin-right: var(--space-6) !important; }
.u-mr-8 { margin-right: var(--space-8) !important; }
.u-mr-12 { margin-right: var(--space-12) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-0-5 { margin-bottom: var(--space-0-5) !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-1-5 { margin-bottom: var(--space-1-5) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-2-5 { margin-bottom: var(--space-2-5) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-3-5 { margin-bottom: var(--space-3-5) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-4-5 { margin-bottom: var(--space-4-5) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }
.u-mb-12 { margin-bottom: var(--space-12) !important; }
.u-ml-0 { margin-left: 0 !important; }
.u-ml-0-5 { margin-left: var(--space-0-5) !important; }
.u-ml-1 { margin-left: var(--space-1) !important; }
.u-ml-1-5 { margin-left: var(--space-1-5) !important; }
.u-ml-2 { margin-left: var(--space-2) !important; }
.u-ml-2-5 { margin-left: var(--space-2-5) !important; }
.u-ml-3 { margin-left: var(--space-3) !important; }
.u-ml-3-5 { margin-left: var(--space-3-5) !important; }
.u-ml-4 { margin-left: var(--space-4) !important; }
.u-ml-4-5 { margin-left: var(--space-4-5) !important; }
.u-ml-5 { margin-left: var(--space-5) !important; }
.u-ml-6 { margin-left: var(--space-6) !important; }
.u-ml-8 { margin-left: var(--space-8) !important; }
.u-ml-12 { margin-left: var(--space-12) !important; }
.u-gap-0 { gap: 0 !important; }
.u-gap-0-5 { gap: var(--space-0-5) !important; }
.u-gap-1 { gap: var(--space-1) !important; }
.u-gap-1-5 { gap: var(--space-1-5) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-2-5 { gap: var(--space-2-5) !important; }
.u-gap-3 { gap: var(--space-3) !important; }
.u-gap-3-5 { gap: var(--space-3-5) !important; }
.u-gap-4 { gap: var(--space-4) !important; }
.u-gap-4-5 { gap: var(--space-4-5) !important; }
.u-gap-5 { gap: var(--space-5) !important; }
.u-gap-6 { gap: var(--space-6) !important; }
.u-gap-8 { gap: var(--space-8) !important; }
.u-gap-12 { gap: var(--space-12) !important; }
/* jarak + area aman layar */
.u-pt-safe-4 { padding-top: calc(var(--space-4) + var(--safe-t)) !important; }
.u-pt-safe-6 { padding-top: calc(var(--space-6) + var(--safe-t)) !important; }
.u-mt-safe-4 { margin-top: calc(var(--space-4) + var(--safe-t)) !important; }
.u-mb-safe-4 { margin-bottom: calc(var(--space-4) + var(--safe-b)) !important; }
/* lain-lain (token) */
.u-justify-end { justify-content: flex-end !important; }
.u-anim-none { animation: none !important; }
.u-tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.u-tracking-label { letter-spacing: var(--tracking-label) !important; }
.u-c-text { color: var(--text) !important; }
.u-c-media { color: var(--media-fg) !important; }
.u-bg-surface-2 { background: var(--surface-2) !important; }
.u-text-4xl { font-size: var(--text-4xl) !important; }
.u-text-5xl { font-size: var(--text-5xl) !important; }