/* Typography Helper Scales */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-xxl { font-size: 1.5rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

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

/* Display Helpers */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.hidden {
  display: none !important;
}

/* Margins & Paddings */
.m-0 { margin: 0; }
.m-t-5 { margin-top: 5px; }
.m-t-10 { margin-top: 10px; }
.m-t-20 { margin-top: 20px; }
.m-b-5 { margin-bottom: 5px; }
.m-b-10 { margin-bottom: 10px; }
.m-b-15 { margin-bottom: 15px; }
.m-b-20 { margin-bottom: 20px; }
.m-l-5 { margin-left: 5px; }
.m-r-5 { margin-right: 5px; }

.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }

/* Overlay helpers */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: ripple-anim 600ms ease-out;
  pointer-events: none;
}

@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}