/* ---------------------------------------
  UTILITIES
---------------------------------------- */

/* Width / Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Background Colours */
.bg-light { background: var(--background-light); }
.bg-muted { background: var(--background-muted); }
.bg-primary { background: var(--brand-primary); }
.bg-secondary { background: var(--brand-primary); }
.bg-accent-1 { background: var(--accent-1); }
.bg-accent-2 { background: var(--accent-2); }

/* Borders */
.border { border: 1px solid var(--border-light); }
.border-dark { border: 1px solid var(--border-dark); }
.border-primary { border-color: var(--brand-primary); }

/* Border Radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow { box-shadow: 0 2px 6px var(--shadow-light); }
.shadow-md { box-shadow: 0 4px 8px var(--shadow-medium); }
.shadow-lg { box-shadow: 0 8px 16px var(--shadow-heavy); }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transitions */
.transition { transition: var(--transition-smooth); }

/* Cursors */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* User Select */
.select-none { user-select: none; }

/* Screen Reader Only */
.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;
}

/* Hover Effects */
.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:scale-105:hover { transform: scale(1.05); transition: var(--transition-smooth); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); transition: var(--transition-smooth); }
.hover\:shadow-lg:hover { box-shadow: 0 8px 16px var(--shadow-heavy); transition: var(--transition-smooth); }

/* Group Hover Example */
.group:hover .group-hover\:opacity-100 { opacity: 1; transition: var(--transition-smooth); }

/* Responsive Visibility */
@media (max-width: 767px) {
  .hidden-mobile { display: none !important; }
  .block-mobile { display: block !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-tablet { display: none !important; }
  .block-tablet { display: block !important; }
}

@media (min-width: 1024px) {
  .hidden-desktop { display: none !important; }
  .block-desktop { display: block !important; }
}