/* ============================================================
   EVERMORE UI LOADER
   Token-based, scalable, type-safe
   ============================================================ */

.ui-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   1) SPINNER LOADER
------------------------------------------------------------ */
.ui-loader-spinner .ui-loader-spin {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: ui-spin .7s linear infinite;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   2) DOT LOADER
------------------------------------------------------------ */
.ui-loader-dots {
  gap: 6px;
}

.ui-loader-dots .ui-loader-dot {
  width: 30%;
  height: 30%;
  background: var(--accent);
  border-radius: 50%;
  animation: ui-bounce 0.6s infinite alternate;
}

.ui-loader-dots .ui-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.ui-loader-dots .ui-loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes ui-bounce {
  from { opacity: 0.4; transform: translateY(0); }
  to   { opacity: 1;   transform: translateY(-4px); }
}

/* ------------------------------------------------------------
   3) SIZE VARIANTS
   xs, sm, md, lg
------------------------------------------------------------ */
.ui-loader-xs { width: 14px; height: 14px; }
.ui-loader-sm { width: 20px; height: 20px; }
.ui-loader-md { width: 26px; height: 26px; }
.ui-loader-lg { width: 36px; height: 36px; }