/* =============================================================================
   UTILITIES
   Single-purpose helper classes. Keep these lean — add only what you reach for.
   =========================================================================== */

/* ── Display ────────────────────────────────────────────────────────────────── */

.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.hidden        { display: none !important; }
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ── Spacing — margin ───────────────────────────────────────────────────────── */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-inline: auto; }

/* ── Spacing — padding ──────────────────────────────────────────────────────── */

.p-0  { padding: 0; }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block:  var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-6 { padding-block:  var(--space-6); }

/* ── Text alignment ─────────────────────────────────────────────────────────── */

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

/* ── Text size ──────────────────────────────────────────────────────────────── */

.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); }

/* ── Font weight ────────────────────────────────────────────────────────────── */

.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); }

/* ── Color ──────────────────────────────────────────────────────────────────── */

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-error   { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* ── Background ─────────────────────────────────────────────────────────────── */

.bg-white   { background-color: var(--color-bg); }
.bg-alt     { background-color: var(--color-bg-alt); }
.bg-dark    { background-color: var(--color-bg-dark); }
.bg-primary { background-color: var(--color-primary); }

/* ── Border ─────────────────────────────────────────────────────────────────── */

.border        { border: var(--border-width) var(--border-style) var(--color-border); }
.border-top    { border-top: var(--border-width) var(--border-style) var(--color-border); }
.border-bottom { border-bottom: var(--border-width) var(--border-style) var(--color-border); }
.rounded       { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-full  { border-radius: var(--radius-full); }

/* ── Shadow ─────────────────────────────────────────────────────────────────── */

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

/* ── Width / Height ─────────────────────────────────────────────────────────── */

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.max-w-full { max-width: 100%; }

/* ── Overflow ───────────────────────────────────────────────────────────────── */

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

/* ── Responsive images ──────────────────────────────────────────────────────── */

img.responsive,
.responsive img,
.responsive > img {
  display:   block;
  width:     100%;
  max-width: 100%;
  height:    auto;
}

/* ── Responsive visibility ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}