/* ================================================================
   Forma — Utility Classes
   ================================================================ */

/* ── Display ─────────────────────────────────────────────────────── */
.d-none    { display: none !important; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-inline  { display: inline; }
.d-inline-flex { display: inline-flex; }

/* ── Flex ────────────────────────────────────────────────────────── */
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ── Grid ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); }

/* ── Spacing ─────────────────────────────────────────────────────── */
.m-0   { margin: 0; }
.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-12 { margin-bottom: var(--space-12); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

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

/* ── Sizing ──────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.min-h-screen { min-height: 100vh; }

/* ── Position ────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.z-10     { z-index: var(--z-raised); }
.z-modal  { z-index: var(--z-modal); }
.z-toast  { z-index: var(--z-toast); }

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

/* ── Borders ─────────────────────────────────────────────────────── */
.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          { 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); }

/* ── Colours ─────────────────────────────────────────────────────── */
.bg-white    { background-color: var(--color-surface); }
.bg-surface  { background-color: var(--color-surface-2); }
.bg-dark     { background-color: var(--color-accent); }

/* ── Visibility ──────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Aspect Ratios ───────────────────────────────────────────────── */
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-4-3      { aspect-ratio: 4 / 3; }
.aspect-3-4      { aspect-ratio: 3 / 4; }
.aspect-16-9     { aspect-ratio: 16 / 9; }
.aspect-5-6      { aspect-ratio: 5 / 6; }

/* ── Responsive Helpers ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lg\:hidden     { display: none; }
  .lg\:grid-2     { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3     { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .md\:hidden     { display: none; }
  .md\:grid-2     { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-1     { grid-template-columns: 1fr; }
  .md\:flex-col   { flex-direction: column; }
  .section        { padding-block: var(--space-6); }
  .section--lg    { padding-block: var(--space-20); }
}
@media (max-width: 480px) {
  .sm\:hidden     { display: none; }
  .sm\:grid-1     { grid-template-columns: 1fr; }
}