@tailwind base;
@tailwind components;
@tailwind utilities;


/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;

  /* Using your primary-500 color */
  background: #FF622D;

  /* Mask gradients using palette variations */
  --_m: 
    conic-gradient(#0000 10%, #FF7648),   /* primary-400 highlight */
    linear-gradient(#E8531F 0 0) content-box; /* primary-600 deep accent */

  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;

  animation: l3 1s infinite linear;
}

@keyframes l3 {
  to { transform: rotate(1turn) }
}