/* ==========================================================================
   Shared Design System — Utility Classes
   Version: 1.0 | Date: 2026-08-03
   Single-purpose helpers. Load after: design-tokens.css, layout.css
   ========================================================================== */

/* ── Visibility ── */

.hidden        { display: none; }
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}

/* ── Text alignment ── */

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

/* ── Text colour helpers ── */

.text-muted   { color: var(--text-muted); }
.text-heading { color: var(--text-heading); }
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-error   { color: var(--status-error); }
.text-info    { color: var(--status-info); }
.text-accent  { color: var(--accent-primary); }
.text-brand   { color: var(--accent-brand); }

/* ── Font family helpers ── */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* ── Font size helpers ── */

.text-3xs  { font-size: var(--text-3xs); }
.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.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); }
.text-5xl  { font-size: var(--text-5xl); }

/* ── Font weight helpers ── */

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

/* ── Spacing margin helpers (mt = margin-top, mb = margin-bottom, etc.) ── */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.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-9  { margin-top: var(--space-9); }

.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-9  { margin-bottom: var(--space-9); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ── Spacing padding helpers ── */

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

.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }

/* ── Width / height helpers ── */

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

/* ── Overflow ── */

.overflow-auto { overflow: auto; }

/* ── Truncate ── */

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

/* ── Rounded corners ── */

.rounded-none   { border-radius: var(--r-none); }
.rounded-uniform { border-radius: var(--r-uniform); }
.rounded-btn    { border-radius: var(--r-btn); }
.rounded-card   { border-radius: var(--r-card); }

/* ── Shadows ── */

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

/* ── Cursor ── */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Opacity ── */

.opacity-50 { opacity: 0.5; }
.opacity-0  { opacity: 0; }

/* ── Reduced motion respect ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}