/* ============================================
   UTILITIES
   ============================================ */
.bg-white   { background: var(--color-white); }
.bg-alt     { background: var(--color-bg-alt); }
.bg-dark    { background: var(--color-dark); }
.bg-primary { background: var(--color-primary); }
.bg-primary-light { background: var(--color-primary-bg); }

.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-2xl { border-radius: var(--radius-2xl); }
.rounded-full{ border-radius: var(--radius-full); }

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

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.relative{ position: relative; }
.overflow-hidden { overflow: hidden; }

.visually-hidden,
.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;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  border: 1px solid rgba(232,35,42,.2);
}

.divider {
  width: 48px; height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin-block: var(--space-4);
}
.divider-center { margin-inline: auto; }