/* assets/css/utilities.css */

/* ── Display ── */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }
.hidden        { display: none !important; }
.hide-mobile   { display: block; }
.hide-desktop  { display: none; }

/* ── Width ── */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }

/* ── Text alignment ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Text color ── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-on-dark   { color: var(--text-on-dark); }
.text-accent    { color: var(--primary); }
.text-white     { color: #ffffff; }

/* ── Text weight ── */
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

/* ── Text size ── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* ── Background ── */
.bg-dark    { background-color: var(--bg-dark); }
.bg-dark-2  { background-color: var(--bg-dark-2); }
.bg-cream   { background-color: var(--bg-primary); }
.bg-white   { background-color: var(--bg-secondary); }
.bg-primary { background-color: var(--primary); }

/* ── Border radius ── */
.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-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Margin ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.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); }
.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); }
.mb-10   { margin-bottom: var(--space-10); }
.mb-12   { margin-bottom: var(--space-12); }

/* ── Padding ── */
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }

/* ── Miscellaneous ── */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

.pointer {
  cursor: pointer;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Aspect ratios ── */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-portrait{ aspect-ratio: 4 / 5; }