/*
|==========================================================================
| UTILITIES — Helper classes mapping to Design Tokens
|==========================================================================
*/

/* ── Typography helpers ───────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-brand-secondary { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }

/* ── Spacing helpers (Margin & Padding) ────────────────────────────────── */
.m-0  { margin: 0; }
.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); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

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

.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }

.px-2 { padding-inline: var(--space-2); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }

/* ── Display & Visibility ─────────────────────────────────────────────── */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none !important; }

/* ── Borders & Shadows ────────────────────────────────────────────────── */
.border        { border: 1px solid var(--color-border); }
.border-t      { border-top: 1px solid var(--color-border); }
.border-b      { border-bottom: 1px solid var(--color-border); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-full  { border-radius: var(--radius-full); }

.shadow-sm     { box-shadow: var(--shadow-sm); }
.shadow-md     { box-shadow: var(--shadow-md); }
.shadow-lg     { box-shadow: var(--shadow-lg); }

/* ── Width & Height helpers ───────────────────────────────────────────── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ── Object fit ───────────────────────────────────────────────────────── */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }