/* ==========================================================================
   VR Celebrations — Utilities
   File: assets/css/utilities.css
   Small single-purpose helpers. Keep this list short and intentional.
   ========================================================================== */

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mx-auto { margin-inline: auto; }

/* Display */
.d-none   { display: none; }
.d-block  { display: block; }
.d-inline { display: inline-block; }

/* Sizing */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Radius & shadows */
.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-pill { border-radius: var(--radius-pill); }

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

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

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

/* Divider */
.divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-md);
}

/* --------------------------------------------------------------------
   Toast notifications (created by app.js → VRToast)
   -------------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: min(360px, calc(100vw - 2rem));
}

.toast {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-text);
  color: var(--color-text-invert);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

.toast--success { background: var(--color-success); }
.toast--error   { background: var(--color-danger); }
.toast--info    { background: var(--color-purple-dark); }